我正在使用 React 构建一个 Web 应用程序，用户可以在其中输入群组通话。我有一个运行 Socket.IO 来管理客户端事件的 NodeJS 服务器，并且用户通过使用简单对等 (WebRTC) 的对等连接进行连接。

从加入通话、看到其他用户到能够离开，一切都正常运行。通话是“永远开放”的，类似于discord，用户可以随意出入。但是，如果您在不刷新页面的情况下离开然后尝试重新加入通话，通话会在所有方面中断。用户离开和重新加入时会出现以下错误：

错误：对等体销毁后无法发出信号

对于通话中的另一位用户，它会为尝试重新加入的一个用户多次记录“用户加入”事件。之前它也会添加多个对等点，但我现在确保不存在重复项。

然而，对我来说，最奇怪的是，当用户离开时，他们会向房间里的所有其他用户发出呼叫。其他用户成功地破坏了对等连接，然后将用户从他们的对等阵列中删除。轮到他离开的用户也会破坏每个连接并将对等数组重置为空数组。所以我很困惑它试图重新建立什么 PTP 连接。

const [roomSize, setRoomSize] = useState(0);

const socketRef = useRef();
const userVideo = useRef();
const peersRef = useRef([]);

const roomId = 'meeting_' + props.zoneId;

useEffect(async () => {
    socketRef.current = io.connect(SERVER_URI, {
        jsonp: false,
        forceNew: true,
        extraHeaders: {
            "x-access-token": window.localStorage.getItem('accessToken'),
            "zone-id": props.zoneId
        }
    });
}, []);
useEffect(async () => {
    if (props.active) {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ 
                video: {
                    height: window.innerHeight / 2,
                    width: window.innerWidth / 2
                }, 
                audio: true });
            userVideo.current.srcObject = stream;
            console.log(`%cJoined socket at ${SERVER_URI}, connected=${socketRef.current.connected}`, 'color: pink');

            socketRef.current.emit("join room", roomId);

            socketRef.current.on("all users", users => {
                users.forEach(userID => {
                    const peer = createPeer(userID, socketRef.current.id, stream);
                    const peerObj = {
                        peerID: userID,
                        peer,
                    };
                    if (!peersRef.current.find(p => p.peerID === userID))
                        peersRef.current.push(peerObj);
                });
                setRoomSize(peersRef.current.length);
                console.log(`%cNew Room Members: ${peersRef.current.length}; %o`, 'color: cyan', {peersRef: peersRef.current});
            })

            socketRef.current.on("user joined", payload => {
                const peer = addPeer(payload.signal, payload.callerID, stream);
                const peerObj = {
                    peerID: payload.callerID,
                    peer,
                };
                if (!peersRef.current.find(p => p.peerID === payload.callerID))
                    peersRef.current.push(peerObj);
                setRoomSize(peersRef.current.length);
                console.log(`%cSomeone Joined. Members: ${peersRef.current.length}; %o`, 'color: cyan', {peersRef: peersRef.current});
            });

            socketRef.current.on("receiving returned signal", payload => {
                /** @type {Peer} */
                const item = peersRef.current.find(p => p.peerID === payload.id);
                item.peer.signal(payload.signal);
                console.log("%creceiving return signal", 'color: lightgreen');
            });

            socketRef.current.on('user left', id => {
                const peerObj = peersRef.current.find(p => p.peerID === id);
                // console.log("user left", { peerObj });
                if (peerObj)
                    peerObj.peer.destroy();
                const peers = peersRef.current.filter(p => p.peerID !== id);
                peersRef.current = peers;
                setRoomSize(peersRef.current.length);
                console.log(`%cSomeone Left. Members: ${peersRef.current.length}`, 'color: cyan');
            });
        } catch (err) {
            console.trace(err);
        }
    }
    else if (socketRef.current && socketRef.current.connected) {

        socketRef.current.emit("leave room");
        peersRef.current.forEach(peerObj => {
            peerObj.peer.destroy();
        });
        peersRef.current = [];
        setRoomSize(peersRef.current.length);
    }
}, [props.active, peersRef.current]);

const createPeer = (userToSignal, callerID, stream) => {
    const peer = new Peer({
        initiator: true,
        trickle: false,
        stream,
    });
    peer.on("signal", signal => {
        socketRef.current.emit("sending signal", { userToSignal, callerID, signal })
    })
    return peer;
}

const addPeer = (incomingSignal, callerID, stream) => {
    const peer = new Peer({
        initiator: false,
        trickle: false,
        stream,
    })
    peer.on("signal", signal => {
        socketRef.current.emit("returning signal", { signal, callerID })
    })
    peer.signal(incomingSignal);
    return peer;
}

快速编辑：上面的代码是 React 组件的一部分，它为每个对等点呈现一个视频元素。

props.active 变为 false 时是用户离开通话的时间。这发生在第二个 useEffect 钩子的末尾，离开的客户端应该在销毁它们后删除所有对等对象。为什么此用户在重新连接时会收到上述错误？以及如何防止此错误发生？

编辑：我刚刚注意到，当两个用户都离开通话，并且都尝试重新加入而不刷新时，不会发生错误。因此，与离开自己相比，在用户离开时移除对等点时会有所不同，这是我最好的猜测。