将 Vue.js 与 vue-socket-io 结合使用

Question

我正在尝试将 vue-socket-io 与 Vue 一起使用。

我可以毫无问题地从客户端向服务器发送消息。但是，从服务器到 Vue 应用程序，我什么也收不到。

我究竟做错了什么？

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>

节点服务器：

...
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);
});
  

Answer 1

将 socket.io 与 Vue.js 和 Node.js 一起使用的完整示例：

在你的后端（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)
  });
})

socket从组件发送更新：

import io from 'socket.io-client';

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

socket在组件中监听：

import io from 'socket.io-client';

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

Answer 2

我之前遇到过这个问题并用以下方法修复了它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);
    });
},

不确定它是否适合您，但值得一试。