本文详解如何在 Express + Node.js 应用中正确集成 Socket.IO 实现多人实时共享文本编辑，重点解决因 HTTP 服务器实例误用导致的 /socket.io/ 资源 404 错误。
本文详解如何在 express + node.js 应用中正确集成 socket.io 实现多人实时共享文本编辑，重点解决因 http 服务器实例误用导致的 `/socket.io/` 资源 404 错误。
在基于 Express 构建的 Web 应用中集成 Socket.IO 时，一个常见却极易被忽略的关键点是：必须让 Socket.IO 绑定到 http.Server 实例，而非 Express 应用实例。你遇到的 GET /socket.io/?EIO=4&transport=polling 404 错误，根本原因正是 app.listen() 启动了 Express 内置的 HTTP 服务器，而 socket.io(server) 所依赖的底层 server 实例并未真正启动——导致 Socket.IO 的客户端资源（如 /socket.io/client-dist/socket.io.js）和长连接端点（如 /socket.io/）均无法被正确路由。
✅ 正确的服务启动方式
请务必使用 http.createServer(app) 创建的 server 实例调用 .listen()：
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const app = express();
const server = http.createServer(app); // ← 创建共享的 HTTP 服务器
const io = socketIo(server); // ← Socket.IO 绑定到该 server
// 静态资源托管（HTML、CSS、JS）
app.use(express.static(__dirname + "/webpages/codingspace"));
// ⚠️ 注意：无需手动托管 /socket.io 路径！Socket.IO 自动处理
// 删除这行 ❌ app.use("/socket.io", express.static(...));
app.get("/code", (req, res) => {
res.sendFile(__dirname + "/webpages/codingspace/coding.html");
});
// ✅ 关键修复：监听 server，而非 app
server.listen(3000, () => {
console.log("✅ Server and Socket.IO are running on http://localhost:3000");
});? 客户端脚本优化建议
确保 HTML 中 Socket.IO 客户端脚本路径正确且可访问：
<!-- 推荐使用 CDN（更稳定，免本地路径问题） --> <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script> <!-- 或确保本地路径与静态托管路径一致 --> <!-- <script src="/socket.io/socket.io.js"></script> -->
同时，codinglogic.js 中的初始化逻辑已合理，但建议添加连接状态反馈以提升调试体验：
document.addEventListener("DOMContentLoaded", () => {
const socket = io(); // 自动连接到当前域名+端口
socket.on("connect", () => {
console.log("✅ Connected to Socket.IO server");
});
socket.on("connect_error", (err) => {
console.error("❌ Connection failed:", err.message);
});
const codingSpace = document.getElementById("codingSpace");
socket.on("codeChange", (newCode) => {
codingSpace.value = newCode;
});
codingSpace.addEventListener("input", () => {
socket.emit("codeChange", codingSpace.value);
});
});⚠️ 其他注意事项
- 不要手动托管 /socket.io 路径：socket.io 包会自动在 server 上注册 /socket.io/ 路由，显式使用 express.static 托管会导致冲突或 404。
- 端口一致性：确保浏览器访问的端口（如 :3000）与 server.listen() 端口完全一致；若使用反向代理（Nginx），需额外配置 WebSocket 支持。
- 跨域问题：开发阶段如前后端分离，可在服务端启用 CORS（socketIo(server, { cors: { origin: "*" } })），生产环境请指定可信源。
通过以上修正，你的协同编辑功能即可稳定运行：任意用户输入将实时广播至所有在线客户端，实现真正的双向同步。核心原则始终不变——Express 是路由处理器，http.Server 才是承载 Socket.IO 的网络基石。
