VueJS 3与Socket.io无法建立连接，请求排查问题

我是Socket.IO及后端技术的新手，但具备Vue使用经验，正尝试开发一款简单的多人游戏，却卡在了VueJS 3与Socket.io建立连接的第一步。

目前服务器终端未打印'new connection'日志，前端发送事件也无任何反应（无报错，但也没有任何效果）。请问能发现问题所在吗？会不会是路由的问题，或是因为我给app.use传递了两个参数导致的？

我的代码： #

服务器代码

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');
  });
})

main.js代码

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");

homepage.vue代码

import io from 'socket.io-client';
data() {
    return {
      socket: io()
    }
  },
methods: {
    startGame() {this.socket.emit('updateUsers', "someUser")
    },
}

问题分析与修复方案 #

1. 服务器端Socket.IO配置错误

• 你创建了HTTP Server但未将其绑定到Socket.IO，反而直接传入端口8000，这会导致Socket.IO创建独立服务，无法与Express共享服务实例。
• 缺少跨域配置：前端运行在5173端口，服务器在8000端口，跨域限制会阻止连接建立。

修正后的服务器代码：

const app = require('express')();
const http = require("http");
const server = http.createServer(app);

// 将Server实例传入Socket.IO，并配置跨域允许前端地址
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"]
  }
});

io.on('connection', function(socket) {
  console.log('new connection');

  socket.on('updateUsers', function(data) {
    console.log('event received:', data);
  });
});

// 启动服务器监听8000端口
server.listen(8000, () => {
  console.log('Server running on http://localhost:8000');
});

2. 前端连接地址与插件挂载错误

• 你让Socket.IO连接前端自己的5173端口，正确的连接地址应该是服务器的8000端口。
• app.use()不能同时传入多个插件实例，需分开调用挂载路由和Socket.IO插件。

修正后的main.js代码：

import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"
import "./assets/main.css";

const app = createApp(App);

// 单独挂载路由
app.use(router);
// 挂载VueSocketIO插件，连接服务器地址
app.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:8000'), 
}));

app.mount("#app");

3. 组件内重复创建Socket实例问题

既然已通过VueSocketIO插件全局注入了$socket实例，无需在组件内重新导入并创建新的Socket实例，直接使用全局注入的实例即可。

修正后的homepage.vue代码：

// 移除 import io from 'socket.io-client';
data() {
  return {
    // 移除 socket: io()
  }
},
methods: {
  startGame() {
    this.$socket.emit('updateUsers', "someUser");
  },
}

内容的提问来源于stack exchange，提问作者Ivo Mitev