为何不同客户端无法通过Express.js/Socket.IO服务器通信？

问题出在服务器端的消息发送逻辑上：你使用的socket.emit('aabc', data)只会把消息发送给触发newMessage事件的当前客户端，所以只有发消息的用户自己能收到，其他连接的客户端自然收不到。

两种修复方案 #

方案1：给所有在线客户端发消息（含发送者） #

如果需要让所有连接到服务器的客户端都收到这条消息，把socket.emit替换成io.emit：

io.on('connection', (socket) => {
    console.log("An user has joined!")

    socket.on("newMessage", (data) => {
        console.log("the message: " +  data)
        // io.emit 会给所有已连接的客户端推送消息
        io.emit('aabc', data)
        console.log("a message has been sent to all clients.")
    });
});

方案2：给除发送者外的其他客户端发消息 #

如果不想让发送者重复收到自己发的消息，使用socket.broadcast.emit：

io.on('connection', (socket) => {
    console.log("An user has joined!")

    socket.on("newMessage", (data) => {
        console.log("the message: " +  data)
        // broadcast.emit 仅向当前客户端以外的其他在线用户推送消息
        socket.broadcast.emit('aabc', data)
        // 如果还要给发送者自己发，可额外加一句 socket.emit('aabc', data)
        console.log("a message has been sent to other clients.")
    });
});

客户端优化建议 #

你的React客户端每次组件挂载都会创建新的Socket连接，建议在组件卸载时断开连接，避免无效连接堆积：

useEffect(() => {
    const socket = io('http://localhost:1234/');
  
    socket.on('aabc', (data: any) => {
        console.log("This is the message: " + data)
    });

    // 组件卸载时断开Socket连接
    return () => socket.disconnect();
}, []);

内容的提问来源于stack exchange，提问作者Taylor F.