React前端（3000端口）与Socket.io后端（4000端口）连接异常排查

问题根源 #

你的后端代码存在两处致命错误，导致Socket.io服务无法正常响应前端连接：

• 第一行的无效代码type her会直接导致脚本运行报错
• 初始化Socket.io时，错误传入了http模块，而非你创建的server实例，导致Socket.io没有附着到监听4000端口的服务器上

修正后的后端代码 #

const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server, {
    cors: {
        origin: "http://localhost:3000"
    }
});

io.on('connection', (socket) => {
    console.log(`User ${socket.id} is connected`);

    socket.on('draw:start', ({x, y}) => {
        socket.broadcast.emit('draw:start', {x, y});
    });

    socket.on('draw:progress', ({x, y}) => {
        socket.broadcast.emit('draw:progress', {x, y});
    });

    socket.on('draw:end', () => {
        socket.broadcast.emit('draw:end')
    });

    socket.on('disconnect', () => {
        console.log(`User ${socket.id} disconnected`);
    })
});

const port = 4000;
server.listen(port, () => {
    console.log(`Websocket server listening to port ${port}`)
});

前端代码小优化（可选） #

可以去掉连接地址末尾的斜杠，保持和后端配置一致：

socketRef.current = io('http://localhost:4000');

验证步骤 #

1. 删除后端第一行的type her无效代码
2. 将Socket.io初始化时的http参数替换为server实例
3. 重启后端服务，再启动前端项目
4. 此时后端控制台应该会输出用户连接ID，前端也能正常发送draw:*事件

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