我对Socket.IO和后端技术都很陌生。但是,我有使用Vue的经验,我正在尝试创建一个简单的多人游戏。
但是我在第一步就卡住了...连接vueJS和socketIO。
下面是服务器:
const app = express()
const http = require("http");
const server = http.createServer(app)
const io = require('socket.io')(8000);
io.on('connection', function(socket) {
console.log('new connection');
socket.on('updateUsers', function(data) {
console.log('event received');
});
})
这是主目录。
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"
import "./assets/main.css";
const app = createApp(App);
app.use(router, new VueSocketIO({
debug: true,
connection: SocketIO('http://localhost:5173/'),
}));
app.mount("#app");
和主页。vue:
import io from 'socket.io-client';
data() {
return {
socket: io()
}
},
methods: {
startGame() {this.socket.emit('updateUsers', "someUser")
},
}
因此,无论是来自服务器的“新连接”在终端中呈现,还是前端都无法发送事件(没有错误,但也没有发生任何事情)。您发现什么问题了吗?可能是路由器的问题,还是因为我向应用程序传递了两个参数?
app.use(router, new VueSocketIO...)
2条答案
按热度按时间bmp9r5qi1#
您能否添加此快速中间件代码以允许Socket IO服务器中的跨源请求。
1yjd4xko2#
发现了这个问题,它几乎是愚蠢的。套接字库不支持VueJS 3,它只支持vueJS 2。所以有两个替代品来让它工作,第一个是Vue-3-Socket.io,第二个是Vue-Socket.io-Extended的alpha版本。我去了第二个,它完成了工作。