Vuejs create a websocket connection in only one vue component - vue.js

Question

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

Answer 1

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
}