Using Vue.js with vue-socket-io

Question

I am trying to use vue-socket-io with Vue.

I can emit messages from client to server without a problem. But, from server to Vue app, I can't receive anything.

What am I doing wrong?

main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// socket io
import * as io from "socket.io-client";
import VueSocketIO from "vue-socket.io";

Vue.use(
  new VueSocketIO({
    debug: true,
    connection: io('http://localhost:3000'), // options object is Optional
  })
);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

App.vue:

<template>
  <v-app>
    <div>Test</div>
  </v-app>
</template>

<script>
export default {
  name: "App",
  mounted() {
    this.$socket.on("user-connected", (data) => {
      debugger;
      console.log(data);
      this.$socket.emit("users");
    });
    this.$socket.emit("users");
    this.$socket.on("users", (data) => {
      console.log("users", data);
    });
};
</script>

Node server:

...
const server = http.createServer(app);
const io = require("socket.io")(server);
server.listen(port);
server.on("listening", () => {
  const addr = server.address();
  console.log(`Mágica acontecendo em  ${addr.address} na porta ${addr.port}`);
});

io.on("connection", async function (socket) {
    console.log("conectado:" + socket.id);
    socket.broadcast.emit("user-connected", socket.id);
});
  

Solution 1

I had this issue earlier and fixed it with listener.subscribe:

mounted() {
    this.sockets.listener.subscribe("user-connected", (data) => {
        debugger;
        console.log(data);
        this.$socket.emit("users");
    });
    this.$socket.emit("users");
    this.sockets.listener.subscribe("users", (data) => {
        console.log("users", data);
    });
},

Not sure if it'll work for you but it's worth a try.

Solution 2

Using socket.io with Vue.js and Node.js full example:

In your backend (Node.js):

//setting up sockets
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)
io.on('connection', (socket) => {
  socket.on('sendUpdateUsers', function(data) {
    io.emit('usersUpdate', data)
  });
})

Sending a socket update from the component:

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  users: []
 }
},
methods: {
 this.socket.emit('sendUpdateUsers', {users: this.users})
}

Listening to socket in the component:

import io from 'socket.io-client';

data() {
 return {
  socket: io(),
  users: []
 }
},
created() {
  this.socket.on('usersUpdate', (data) => {
   this.users = data.users
  })
}