为什么Socket.io中socket.broadcast.emit事件的发送端也会收到触发通知？

核心问题出在客户端React组件的Socket连接创建逻辑不合理，导致单个浏览器窗口存在多个活跃的Socket连接：

• 你直接将io.connect写在了函数组件的顶层代码中，没有做持久化处理，组件每一次渲染都会触发一次新的Socket连接创建
• 如果你使用的是React 18+版本，开发环境默认开启严格模式，组件会自动挂载两次，哪怕你没有额外渲染也会创建两个独立的Socket连接

socket.broadcast.emit的逻辑本身是正确的：它会向除了当前触发事件的Socket之外的所有连接推送消息。但当前浏览器窗口内存在多个Socket连接时，除了触发askConnect事件的那个Socket，同窗口内的其他Socket依然属于广播接收范围，所以当前点击的浏览器也会收到消息，表现为两个浏览器都触发了回调。

另外你客户端的连接路径存在拼写隐患：服务端注册的命名空间是/test，客户端拼接地址时建议明确加上前缀斜杠，避免REACT_APP_SOCKET_URL末尾没有斜杠时拼接出错误地址（比如http://localhost:3000test而非正确的http://localhost:3000/test）。

将Socket实例用useRef持久化，通过useEffect控制仅在组件挂载时创建一次连接，卸载时主动断开：

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

export default function A(){
    const socketRef = useRef(null);
    let peerName;
    const sUsrAg = navigator.userAgent;

    useEffect(() => {
        // 仅挂载时创建一次连接
        const socket = io.connect(`${process.env.REACT_APP_SOCKET_URL}/test`, { 
            transports: ['websocket'] 
        });
        socketRef.current = socket;

        socket.on("requestConnect",()=>{
            console.log(peerName+' received request connect event');
        })

        // 卸载时断开连接避免内存泄漏
        return () => socket.disconnect();
    }, []);

    peerName = sUsrAg.indexOf("Chrome") > -1 ? "Chrome" : "Firefox";

    const go = () => {
        socketRef.current?.emit('askConnect');
    }

    return <button onClick={go}>Go</button>; 
}

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