我正在尝试使用客户端 - 服务器模型构建多人游戏。 我正在使用 nodejs 和 vuejs(2.5 版)项目。但是,我似乎无法让连接(使用 socket.io-client 和 vue-socket.io)正常工作。
在“main.js”中我有以下代码:
import Vue from 'vue';
import App from './App.vue';
import io from 'socket.io-client';
import VueSocketio from 'vue-socket.io';
export const socket = io('http://localhost:8080');
socket.on('connection', function() {
console.log('connected!');
});
Vue.use(VueSocketio, socket);
console.log('imports done...');
Vue.config.productionTip = false
new Vue({
render: h => h(App),
sockets: {
connect() {
console.log('socket connected...');
},
disconnect() {
console.log('socket disconnected...');
}
}
}).$mount('#app')
当我在浏览器中打开页面时,我确实在控制台中看到“导入完成...”,但是当我使用 localhost:8080 打开或关闭其他浏览器选项卡时,我在新窗口或我用 localhost:8080 打开的第一个窗口。
我还尝试将套接字语法放入 App.vue 文件中,但这也没有用。我看到消息“App.vue 脚本测试”。出现在控制台中,但控制台中没有出现连接或断开连接消息。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
console.log('App.vue script test.');
export default {
name: 'app',
components: {
HelloWorld
},
sockets: {
connect() {
console.log('App.vue: client connected...');
},
disconnect() {
console.log('App.vue: client disconnected...');
}
}
}
</script>
谁知道这个问题怎么解决? 提前致谢。
最佳答案
据我所知,您缺少套接字 io 的服务器部分。
不幸的是,我不知道你的服务器是如何设置的,所以我创建了一个独立于你的其他服务器运行的套接字 io 服务器。您想研究如何将它集成到您的服务器中。
我设置了一个简单的套接字 io 服务器,我称之为 server.js 它可以使用 node server.js
启动var http = require('http');
var socketio = require('socket.io')
function server(req, res) {
// you should probably include something like express if you want to return responses.
res.write("basic response");
}
let app = http.createServer(server);
var io = socketio(app);
io.on('connection', function(socket){
console.log('a user connected');
socket.on("share", (message) => {
io.emit("update", message)
})
});
app.listen(3000)
我试图建立一个类似于您的客户端(main.js)的项目
import Vue from 'vue'
import App from './App.vue'
import io from 'socket.io-client'
import VueSocketIo from 'vue-socket.io'
export const socket = io("http://localhost:3000")
socket.on('connection', () => {
console.log("connected");
})
Vue.use(VueSocketIo, socket)
console.log("imports done...");
new Vue({
el: '#app',
render: h => h(App),
sockets:{
connect() {
console.log("socket connected...")
},
disconnected() {
console.log("socket disconnected...")
}
}
})
我没有对 App.vue 做任何事情(我把它包括在内是为了完整)
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
关于javascript - Vue socket io 不工作(无法触发连接事件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52653035/