如何在Node.js+Express路由中访问socket.io的onConnection等事件

当前代码存在的问题 #

• 在路由处理函数内重复绑定Socket.io事件监听器（比如io.on("connection")、io.on("pause")），每触发一次路由请求就会新增一个监听器，导致后续事件触发时逻辑重复执行。
• Socket.io事件绑定位置错误：connection事件是全局监听客户端连接，应该放在服务器初始化阶段，而不是每次HTTP请求里；自定义事件（如pause）应该绑定到单个socket实例，而非全局io对象。
• 路由导出方式不够简洁，通过函数传递io的写法可以简化。

Express服务器创建与导入机制 #

1. 服务器创建逻辑：
   • 先调用express()生成Express应用实例app，它负责管理HTTP请求的路由、中间件、请求响应处理。
   • 再用http.createServer(app)创建HTTP服务器server，因为Socket.io需要依托已有的HTTP服务器来启动WebSocket服务。
   • 最后将server传入Socket.io的Server构造函数，生成io实例，实现WebSocket通信。
2. 路由导入与挂载：
   • Express路由通过express.Router()创建独立的路由实例，之后通过app.use(path, router)挂载到主应用的指定路径下，这样请求就会被转发到对应的路由处理函数。
   • 要在路由中使用io，除了当前通过闭包传递的方式，更简洁的是把io挂载到app.locals上，路由里可以直接通过req.app.locals.io访问。

优化后的代码实现 #

index.js #

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const cors = require("cors");
const PORT = 8080;

// 创建Express应用
const app = express();
// 创建HTTP服务器
const server = http.createServer(app);

// 配置中间件
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

// 初始化Socket.io
const io = new Server(server, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
    },
});

// 全局监听客户端连接，只执行一次
io.on("connection", (socket) => {
    console.log(`用户已连接: ${socket.id}`);

    // 监听单个客户端的pause事件
    socket.on("pause", () => {
        socket.emit("userPaused");
        // 如果需要广播给所有在线客户端，改用 io.emit("userPaused")
    });

    // 监听客户端断开连接
    socket.on("disconnect", () => {
        console.log(`用户已断开: ${socket.id}`);
    });
});

// 导入路由并挂载到对应路径
const loginRoute = require("./routes/auth");
const youtubeRoutes = require("./routes/youtube");

app.use("/auth", loginRoute);
app.use("/yt", youtubeRoutes); // 挂载后，请求localhost:8080/yt/youtube1会匹配路由

// 启动服务器
server.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

youtube.js #

const express = require("express");
const router = express.Router();

router.get("/youtube1", (req, res) => {
    console.log("test2");
    // 示例：通过路由触发Socket.io广播
    // req.app.locals.io.emit("notice", "用户访问了youtube1页面");
    res.send("This is the youtube HOME request");
});

router.post("/message", (req, res) => {
    console.log("Post请求已触发");
    // 通过app.locals获取io，向所有客户端发送消息
    req.app.locals.io.emit("serverMessage", "后端收到了你的消息");
    res.send("test post request");
});

module.exports = router;

优化点详解 #

• Socket.io事件全局绑定：把connection和自定义事件的监听放在服务器初始化代码中，避免每次HTTP请求都重复绑定监听器，防止逻辑重复执行。
• 简化io传递方式：将io挂载到app.locals，路由中直接通过req.app.locals.io访问，无需用函数包裹路由导出，代码更清晰。
• 修复事件绑定逻辑：自定义事件（如pause）绑定到单个socket实例，这样只会响应当前客户端的事件；如果用io.on("pause")会监听所有客户端的该事件，逻辑不符合预期。
• 补充必要中间件：添加express.json()，确保能正确解析POST请求的JSON参数。
• 明确路由挂载：添加app.use("/yt", youtubeRoutes)，保证请求路径localhost:8080/yt/youtube1能正确匹配到路由处理函数。

内容的提问来源于stack exchange，提问作者Ethan Gordon