Socket.io连接正常但前端收不到服务端emit消息求助

1. 路由挂载位置错误 #

你在io.on('connect')事件内部挂载userRoutes，这会导致每次有新Socket连接时重复注册路由。Express路由应该在服务器启动前一次性挂载，而非每次连接时执行。

修改服务端代码，将路由挂载移到连接事件外部：

const express = require('express');
const app = express()
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const userRoutes = require('./routes/user');

// 提前挂载路由，不要放在连接事件内
app.use('/user', userRoutes)

io.on('connect',(socket)=>{
    console.log("conected: ");

    socket.on('disconnect',()=>{
        console.log("disconected")
    })
})

http.listen(3000, function () {
    console.log("Server On");
})

2. io.emit语法错误 #

你的changeStatus控制器中，io.emit的写法存在语法问题：

// 错误写法
io.emit('changeStatus'()=>{console.log("send..")});

这里错误地将匿名函数拼接在事件名后，正确写法是先触发事件，再单独处理日志：

async function changeStatus(req, res) { 
    // 数据库操作
    // 正确触发事件
    io.emit('changeStatus');
    console.log("send..");
    res.status(201).json({
        message: "Status updated :)"
    })
}

如果需要给前端传递数据，可将数据作为第二个参数传入：

io.emit('changeStatus', { status: 'updated' });

3. 确保Controller获取正确的io实例 #

要保证userController中使用的io是主文件创建的全局实例，而非重新初始化的。可以通过以下方式传递：

• 将io挂载到app.locals，在控制器中通过req.app.locals.io访问

主文件示例：

app.locals.io = io; // 挂载到app.locals

控制器示例：

async function changeStatus(req, res) { 
    // 数据库操作
    req.app.locals.io.emit('changeStatus');
    console.log("send..");
    res.status(201).json({
        message: "Status updated :)"
    })
}

4. 前端Socket初始化优化 #

虽然连接正常，但建议明确指定协议，同时移除已被主流浏览器淘汰的flashsocket传输方式：

this.socket = io('http://localhost:3000',{ transports : ['websocket', 'polling'] });

完成以上修改后重启服务，用Postman调用接口，前端即可正常接收changeStatus事件并打印日志。

内容的提问来源于stack exchange，提问作者Hey L1nk