Node.js与Express.js中静态JS文件无法连接socket.io问题

核心问题：服务器启动方式错误 #

你创建了独立的HTTP服务器实例server并绑定了Socket.IO，但最后用app.listen()启动服务，这会创建一个新的、未关联Socket.IO的HTTP服务器，导致客户端的Socket连接无法被正确监听，自然收不到join-room事件。

修复步骤 #

1. 修正服务器启动代码 #

把app.listen(port, ...)替换为server.listen(port, ...)，让绑定了Socket.IO的HTTP服务器实例启动：

// 替换前
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

// 替换后
server.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

2. 可选：确认客户端Socket路径匹配 #

虽然服务端指定了path: "/socket.io"，客户端io()默认会适配该路径，但如果存在路径歧义，可以显式指定：

// script.js中
const socket = io({ path: "/socket.io" });

3. 排查媒体权限分支 #

如果用户拒绝摄像头/麦克风权限，getUserMedia会进入catch分支，导致socket.emit("join-room")不执行。可以在catch分支添加提示，确认是否走到这一步：

.catch((err) => {
  console.error("Error accessing media devices: ", err);
  alert("请授予摄像头和麦克风权限，否则无法触发房间连接");
});

修复后的完整index.js代码 #

const express = require("express");
const app = express();
const path = require("path");
const router = require("./controller/routes");
const server = require("http").createServer(app);
const io = require("socket.io")(server, {
  path: "/socket.io", // Add this line to specify the path
});
port = 4000;

app.set("view engine", "ejs");
app.use("/", router.router);
app.use(
  "/socket.io",
  express.static(path.join(__dirname, "node_modules/socket.io/client-dist"))
);

app.use("/public", express.static(path.join(__dirname, "public")));

io.on("connection", (socket) => {
  console.log("A user connected");

  socket.on("join-room", () => {
    console.log("Joined the room");
  });

  socket.on("disconnect", () => {
    console.log("User disconnected");
  });
});

// 关键修改：用绑定了Socket.IO的server实例启动服务
server.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

验证流程 #

1. 重启服务器
2. 打开页面，确认浏览器控制台无Socket连接错误
3. 授予媒体权限后，查看服务器控制台是否输出A user connected和Joined the room

内容的提问来源于stack exchange，提问作者ritik mittal