CODEWITHSUNDEEP
vue.jswebsocket
ghebby
ghebby

Reputation: 21

Vuejs create a websocket connection in only one vue component

I want to instantiate a websocket connection with the server, only in one particular component. I'm using Vuecli, socket.io, socket.io-client and vue-socket.io

Googling around I've been able to instantiate a global connection and then use it like in the following example:

/main.js

[...]

import socketio from 'socket.io-client';
import VueSocketIO from 'vue-socket.io';

[...]

export const SocketInstance = socketio('http://localhost:8080');
Vue.use( new VueSocketIO( {"debug":true, "connection":SocketInstance }));

and in my Comenponent.vue I can use this.$socket. to refer to the websocket instance.

<template>
.....
</template>
<script>
export default {
   data(){
    return { .... }
   },
   methods:{
      ... 
      // works fine
      ping(){ this.$socket.emit('pingServer','hey') }
      ...
   },
   // to listen for messages from the server i'm using:
   sockets: {
     message(data){  console.log(data); },
     serverResp(data){  console.log(data); },
   }
   ...
}
</script>

To have the websocket in a single component I've tried the following:

/Component.vue

<template>
.....
</template>
<script>
//import lib
import socketio from 'socket.io-client';
import VueSocketIO from 'vue-socket.io';

export default {
   data(){
     return {
        socket: null,
        ...
     }
   },
   created(){
      this.s = socketio('http://localhost:8080');
      this.socket = new VueSocketIO( {"debug":true, "connection":s });

      ....
   },
   methods: {
      // emit data does work 
      ping(){ this.socket.emit('pingServer','hey') }

   },

   // not available anymore  
   sockets:{
      message(data){}
   }


}

</script>

Per state of the above code, I can send data to server with this.sock.emit() but I can't figure out how to listen for the message coming from server.

Thanks in advance for any help.

github link of the project: https://github.com/anatolieGhebea/simpleDocBuilder

the component is under /frontend/src/views/Editor.vue

Upvotes: 2

Views: 4150

Answers (1)

Sethmo011
Sethmo011

Reputation: 601

In your created() method (I'm not sure which is using the socket.io client), but you can do 

//example msg event
this.s.on("msg", (data) => { console.log("joined", data); }

I implemented something similar, though I used a mixin, but you can readily transfer this to a single component. An excerpt of my code (on the client-side, I'm just using the npm library 'socket.io-client') from here )

const io = require("socket.io-client")
export default{
    data() {
        return {
            socket: undefined
        }
    },//end data
    created() {
        let chatUrl = "http://localhost:3000";

        this.socket = io(chatUrl, {        
        //force websockets only - it's optional
        transports: ["websocket"]
        });

        //socket io events
        this.socket.on("join", data => {
            console.log("joined ", data);
        });
    },//end created
    methods: {
        //e.g. sending a chat message
        send_chat: function(message) {
           this.socket.emit("chat", message);
        },
    },//end methods
}

Upvotes: 1

Related Questions