Socket.io emit仅对发起用户生效 多客户端无法通信如何解决？

• 核心错误在服务端的事件发送逻辑：socket.emit() 只会将事件回发给触发当前事件的单个客户端（也就是发起emit请求的那个浏览器窗口/设备），所以其他已连接的客户端完全收不到通知。
• React端存在不规范写法风险：直接操作DOM、socket事件监听未绑定组件生命周期，可能引发内存泄漏、数据更新异常等问题。

第一步：修改服务端代码 #

将server.js中child-login事件回调里的socket.emit替换为io.emit，io.emit会向所有已连接的客户端广播事件，所有在线的窗口/设备都能收到通知。
修改后的完整服务端代码：

const server = require("http").createServer();
const io = require("socket.io")(server, {
    cors: {
        origin: "*"
    }
});

io.on('connection', socket => {
    console.log('User Connected:' + socket.id);

    socket.on('child-login', (data) => {
        console.log(data);
        console.log(socket.id);
        // 替换这里的socket.emit为io.emit实现全客户端广播
        io.emit('child-login', data);
        // 如果你需要排除发起请求的客户端不接收，就用socket.broadcast.emit('child-login', data)
    })

});

server.listen(3001, () => {
    console.log('Server Running....')
});

第二步：优化React端代码（可选但推荐） #

调整代码符合React生命周期规范，避免直接操作DOM，防止内存泄漏：

import { useState, useEffect } from "react";
import { io } from 'socket.io-client';

// 如果是跨设备测试，这里要改成服务端所在机器的局域网IP，比如http://192.168.3.2:3001
const socket = io('http://localhost:3001');

function Dashboard() {
    const [lastLogin, setLastLogin] = useState('');

    useEffect(() => {
        // 组件挂载时绑定监听
        const loginHandler = (data) => {
            setLastLogin(data);
        };
        socket.on('child-login', loginHandler);

        // 组件卸载时移除监听，避免内存泄漏
        return () => {
            socket.off('child-login', loginHandler);
        }
    }, []);

    const loginChild = e => {
        e.preventDefault();
        socket.emit('child-login', e.target.innerHTML);
    }

    return (
       <div>
            <ul>
                <li>
                    <a onClick={loginChild}>Walter Melon</a>
                </li>
                <li>
                    <a onClick={loginChild}>Teri Dactyl</a>
                </li>
            </ul>
           <h1 className="js-last-login">{lastLogin}</h1>
       </div>
    );
}

export default Dashboard;

额外注意事项 #

• 如果要测试多设备通信，React端的socket连接地址不能使用localhost，需要替换为运行服务端的设备在同一局域网下的IP地址，同时保证所有测试设备都在同一个局域网内。
• 生产环境不要开启origin: "*"的CORS配置，要指定允许的前端域名，避免安全风险。

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