javascript - vue套接字连接未触发
问题描述
我正在尝试将 vue 与套接字结合使用。但是我似乎无法让 vue 应用程序接受套接字事件。我正在关注在线找到的教程,他们告诉我下面的示例应该可以工作。然而事实并非如此,我很困惑为什么。
我所知道的:
- 插座已连接。服务器端触发连接事件
- 我可以通过使用从 app.vue 发出事件
this.$socket.emit('mounted', 'something')
- 我无法收到该
sockets
部分下的事件。没有触发连接、断开连接或测试。
为什么插座部分不起作用?
我的 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>
解决方案
如果您运行的版本高于 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 版本。
我不确定我是否做错了什么,但我遵循了他们新版本的确切文档,但我无法让它工作。所以现在我认为这是他们的错误。
推荐阅读
- scheme - 在 Scheme 中返回有状态函数的修改版本
- api - Twitter API get webhooks for my account [PHP]
- jquery - 如何在跨度中包装按钮的文本/值?
- r - 在 R 的 vrtest 包中使用 Lo.Mac 函数时出现 UseMethod("filter") 错误
- typescript - 在 vue 中访问从 axios 获取请求中创建的计算值
- mongodb - 在 k8s 中连接 mongo-express 到 mongoDb 失败
- flutter - 如果 firebase 没有要显示的数据,则不会在 firebase 动画列表小部件中执行构建方法
- python - 使用 plotly 在分组条形图中根据 RGB 值更改颜色
- java - 对 JAX-RS 服务的 GET 查询没有响应
- r - R CMD 检查失败,出现“在 Windows 10 上设置 LC_CTYPE=en_US.UTF-8 failed ERROR