Verbindung zu socket.io von Vue.js Komponente

Question

Angenommen, ich habe zwei Server (Express für die Bereitstellung meines Vue SPA [Port 8080] und Express + Socket als API [Port 8082]).

Ich möchte Socket-Verbindung nur für den Fall, dass der Benutzer authentifiziert wird (Authentifizierung in Ajax gegen den Server auf Port 8082 ausgeführt) öffnen.

Nehmen Sie also an, nachdem Benutzer angemeldet ist, die App auf die Homepage umleiten. I Home.vue Komponente erstellt, wo ich (im erstellten Haken) versucht, das socket.io Skript für den Client und offene Verbindung zu importieren: gehen

<template> 
 
    <div> 
 
    Home 
 
    </div> 
 
</template> 
 

 
<script> 
 
import config from '../../../config/env' 
 
export default { 
 
    data() { 
 
    return { 
 

 
    } 
 
    }, 
 
    
 
    created() { 
 
    var scriptElement = document.createElement('script') 
 
    scriptElement.type = "text/javascript" 
 

 
    scriptElement.src = `http://${config.baseSocketUrl}/socket.io/socket.io.js` 
 
    document.getElementsByTagName("head")[0].appendChild(scriptElement); 
 

 
    scriptElement.onload(() => { 
 
     const socket = io(config.crmSocket_nsp) 
 

 
     socket.on('welcome', (data) => { 
 
     alert(data) 
 
     }) 
 
    }) 
 
    } 
 
} 
 

 
</script> 
 

 
<style lang="scss" scoped> 
 

 
</style>

es nicht gut^^ '

Also habe ich versucht, das Skript-Tag in der index.html-Datei festgeschrieben, wo die App eingehangen() und dann die gleiche Methode verwenden, um den Socket innerhalb des erstellten Lebenszyklus-Hooks zu verbinden. Trotzdem ging es nicht gut. Das io hier ist undefiniert!

Jede Richtung wird gesegnet sein! danke allen!

Answer 1

Es arbeitet auf der Bühne sollte beforeMount() statt created()