javascript - vue套接字连接未触发

Question

我正在尝试将 vue 与套接字结合使用。但是我似乎无法让 vue 应用程序接受套接字事件。我正在关注在线找到的教程，他们告诉我下面的示例应该可以工作。然而事实并非如此，我很困惑为什么。

我所知道的:

socket 已连接。服务器端触发连接事件

我可以使用 this.$socket.emit('mounted', 'something') 从 app.vue 发出事件

我无法收到 sockets 下的事件部分。没有触发连接、断开连接或测试。

为什么 socket 部分不起作用？

我的 server.js:

const io  = require('socket.io')(8000);
io.on('connection', function(socket) {
  console.log(`A user connected with socket id ${socket.id}`)

  socket.on('mounted', function(data) { 
  console.log('data', data)
  io.emit('test');    
})

  socket.on('disconnect' , function(){
    console.log('User left page');
  });
});

我的 main.js

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

Vue.config.productionTip = false

Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:8000'), 
  })
);

new Vue({
  render: h => h(App),
}).$mount('#app')

我的 app.vue 中的脚本

<script>
import HelloWorld from './components/HelloWorld.vue'
//var socket = io();

export default {
  name: 'App',
  components: {
    HelloWorld
  }, 
  mounted () {
    console.log('mounted')
    this.$socket.emit('mounted', 'something')
  },
  sockets : {
    test: function(data){
      console.log('test triggered', data)
    },
    connect() {
      console.log('connected')
    },
    disconnect() {
            console.log("server disconnected");
        },
  }
}
</script>

Answer 1

如果您运行的版本高于 3.0.7，则需要卸载 vue-socket.io 并安装 3.0.7 版本。

我遇到了这个确切的问题，在检查 vue-socket.io NPM 页面后，我看到他们发布了 2 个新更新(3.0.8 和 3.0.9)。我在我的项目中运行 3.0.9。我卸载了 vue-socket.io 3.0.9 版本并安装了 3.0.7 版本，它立即工作而无需更改任何代码。我在 socket.io 工作的另一个项目也在运行 3.0.7 版本。

我不确定我是否做错了什么，但我遵循了他们新版本的确切文档，但我无法让它工作。所以现在我认为这是他们的错误。