[英]Vue socket io does not work (cannot get it to fire connection events)
I am trying to build a multiplayer game with a client - server model. 我正在尝试使用客户端-服务器模型构建多人游戏。 I am using nodejs, with a vuejs (version 2.5) project.
我正在使用带有vuejs(2.5版)项目的nodejs。 However, I cannot seem to get the connections (using socket.io-client and vue-socket.io ) to work.
但是,我似乎无法使连接(使用socket.io-client和vue-socket.io )正常工作。
In 'main.js' i have the following code: 在“ 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')
When I open the page in the browser I do see the 'imports done...' in the console, however when I open or close additional browser tabs with localhost:8080, I see no messages in either the new window or the first window I opened with localhost:8080. 当我在浏览器中打开页面时,在控制台中确实看到“导入已完成...”,但是当我使用localhost:8080打开或关闭其他浏览器选项卡时,在新窗口或第一个窗口中都看不到任何消息我用localhost:8080打开。
I also tried putting the sockets syntax in the App.vue file, but that also did not work. 我还尝试将套接字语法放入App.vue文件中,但这也没有用。 I see the message 'App.vue script test.'
我看到消息“ App.vue脚本测试”。 appear in the console, but no connect or disconnect messages appearing in the console.
出现在控制台中,但没有连接或断开消息出现在控制台中。
<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>
Would anyone know how to solve this problem? 有人知道如何解决这个问题吗? Thanks in advance.
提前致谢。
As far as I can tell you are missing the server part of socket io. 据我所知,您缺少套接字io的服务器部分。
Unfortunatly I don't how your server is set up so I created a socket io server that be run independently of your other server. 不幸的是,我没有设置您的服务器,因此我创建了一个套接字io服务器,该服务器可以独立于其他服务器运行。 You want to look into how to integrate it in your server.
您想研究如何将其集成到服务器中。
I set up a simple socket io server that I called server.js it can be started using node server.js
我设置了一个简单的套接字io服务器,称为server.js,可以使用节点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)
I tried to set up a project similiar to your client side (main.js) 我试图建立一个与您的客户端类似的项目(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...")
}
}
})
I didn't do anything to the App.vue(I included it for completenes) 我没有对App.vue做任何事情(为完整起见,我将其包括在内)
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.