javascript - 为什么WebRTC断开后无法重连？

Question

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

一切都很实用，从加入通话、看到其他用户到能够离开。调用是“常开”的，类似于discord，用户可以随意来来去去。但是，如果您离开然后在不刷新页面的情况下尝试重新加入通话，则通话会四面八方中断。用户离开并重新加入时出现以下错误:

Error: cannot signal after peer is destroyed

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

然而，对我来说，最奇怪的部分是当用户离开时，他们会向房间内的所有其他用户发出调用。其他用户成功地破坏了对等连接，然后从他们的对等阵列中删除该用户。轮到他离开的用户也会破坏每个连接并将对等数组重置为空数组。所以我对它试图重新建立的 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 Hook 的末尾，离开的客户端应该在销毁它们之后删除所有对等对象。为什么此用户在重新连接时收到上述错误？以及如何防止此错误发生？

编辑:我刚刚注意到，当两个用户都离开通话，并且都尝试在不刷新的情况下重新加入时，不会发生错误。因此，我最好的猜测是，在用户离开时删除对等点与离开你自己是不同的。

Answer 1

TLDR；将您在 useEffect 正文中使用的所有 refs 放入 useEffect deps 数组中。

---

我一定要先检查 useEffect deps 数组。看起来整个钩子(Hook)主体的多个位置都需要 socketRef，但它似乎不在 deps 数组中。这可能会导致 Hook 使用低于当前的数据。

也正因为如此，socketRef ref 对象可能永远不会实际上更新，这意味着，它可能正确地从对等点中删除用户，因为 peerRefs 在 useEffect deps 数组中，但是内部 session (房间)可能无法识别它；房间对用户的内部表示仍然存在。

重复一遍，但为了清楚起见，您提到了:

So something is different when removing a peer upon a user leaving compared to leaving yourself is my best guess.

这与上面列出的原因相同。它在对等方离开时发生的原因是因为 peerRefs ref 对象在 useEffect deps 数组中，所以您描述的效果只是“完美时机”，如果你会的，因为应用程序状态(所有引用)彼此正确同步。