From 019ddcbb8cd03e79bb9539d970ccf80940630773 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Thu, 28 Oct 2021 11:36:26 +1100 Subject: [PATCH] Add back optionality to session socket to prevent multiple connections --- src/contexts/PartyContext.tsx | 6 +++--- src/contexts/PlayerContext.tsx | 8 ++++---- src/hooks/useNetworkedState.ts | 12 ++++++------ src/network/NetworkedMapAndTokens.tsx | 8 ++++---- src/network/NetworkedMapPointer.tsx | 4 ++-- src/network/Session.ts | 25 ++++++++++++------------- 6 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/contexts/PartyContext.tsx b/src/contexts/PartyContext.tsx index 370610e..ea65afa 100644 --- a/src/contexts/PartyContext.tsx +++ b/src/contexts/PartyContext.tsx @@ -15,7 +15,7 @@ export function PartyProvider({ session, children }: PartyProviderProps) { useEffect(() => { function handleSocketPartyState(partyState: PartyState) { - if (partyState) { + if (partyState && session.id) { const { [session.id]: _, ...otherMembersState } = partyState; setPartyState(otherMembersState); } else { @@ -23,10 +23,10 @@ export function PartyProvider({ session, children }: PartyProviderProps) { } } - session.socket.on("party_state", handleSocketPartyState); + session.socket?.on("party_state", handleSocketPartyState); return () => { - session.socket.off("party_state", handleSocketPartyState); + session.socket?.off("party_state", handleSocketPartyState); }; }); diff --git a/src/contexts/PlayerContext.tsx b/src/contexts/PlayerContext.tsx index ea4a867..c432f48 100644 --- a/src/contexts/PlayerContext.tsx +++ b/src/contexts/PlayerContext.tsx @@ -106,13 +106,13 @@ export function PlayerProvider({ session, children }: PlayerProviderProps) { } session.on("status", handleSocketStatus); - session.socket.on("connect", handleSocketConnect); - session.socket.io.on("reconnect", handleSocketConnect); + session.socket?.on("connect", handleSocketConnect); + session.socket?.io.on("reconnect", handleSocketConnect); return () => { session.off("status", handleSocketStatus); - session.socket.off("connect", handleSocketConnect); - session.socket.io.off("reconnect", handleSocketConnect); + session.socket?.off("connect", handleSocketConnect); + session.socket?.io.off("reconnect", handleSocketConnect); }; }); diff --git a/src/hooks/useNetworkedState.ts b/src/hooks/useNetworkedState.ts index 7417767..1c290bf 100644 --- a/src/hooks/useNetworkedState.ts +++ b/src/hooks/useNetworkedState.ts @@ -74,10 +74,10 @@ function useNetworkedState( return; } const update = { id: debouncedState[partialUpdatesKey], changes }; - session.socket.emit(`${eventName}_update`, update); + session.socket?.emit(`${eventName}_update`, update); } } else { - session.socket.emit(eventName, debouncedState); + session.socket?.emit(eventName, debouncedState); } dirtyRef.current = false; forceUpdateRef.current = false; @@ -112,11 +112,11 @@ function useNetworkedState( }); } - session.socket.on(eventName, handleSocketEvent); - session.socket.on(`${eventName}_update`, handleSocketUpdateEvent); + session.socket?.on(eventName, handleSocketEvent); + session.socket?.on(`${eventName}_update`, handleSocketUpdateEvent); return () => { - session.socket.off(eventName, handleSocketEvent); - session.socket.off(`${eventName}_update`, handleSocketUpdateEvent); + session.socket?.off(eventName, handleSocketEvent); + session.socket?.off(`${eventName}_update`, handleSocketUpdateEvent); }; }, [session.socket, eventName, partialUpdatesKey]); diff --git a/src/network/NetworkedMapAndTokens.tsx b/src/network/NetworkedMapAndTokens.tsx index e6e09f9..997c53e 100644 --- a/src/network/NetworkedMapAndTokens.tsx +++ b/src/network/NetworkedMapAndTokens.tsx @@ -202,12 +202,12 @@ function NetworkedMapAndTokens({ session }: { session: Session }) { ) { // Clear map before sending new one setCurrentMap(null); - session.socket.emit("map", null); + session.socket?.emit("map", null); setCurrentMapState(newMapState, true, true); setCurrentMap(newMap); - session.socket.emit("map", newMap); + session.socket?.emit("map", newMap); if (!newMap || !newMapState) { setAssetManifest(null, true, true); @@ -395,12 +395,12 @@ function NetworkedMapAndTokens({ session }: { session: Session }) { session.on("peerData", handlePeerData); session.on("peerDataProgress", handlePeerDataProgress); - session.socket.on("map", handleSocketMap); + session.socket?.on("map", handleSocketMap); return () => { session.off("peerData", handlePeerData); session.off("peerDataProgress", handlePeerDataProgress); - session.socket.off("map", handleSocketMap); + session.socket?.off("map", handleSocketMap); }; }); diff --git a/src/network/NetworkedMapPointer.tsx b/src/network/NetworkedMapPointer.tsx index 5ba07e2..a9bf26b 100644 --- a/src/network/NetworkedMapPointer.tsx +++ b/src/network/NetworkedMapPointer.tsx @@ -152,10 +152,10 @@ function NetworkedMapPointer({ session, active }: NetworkedMapPointerProps) { } } - session.socket.on("player_pointer", handleSocketPlayerPointer); + session.socket?.on("player_pointer", handleSocketPlayerPointer); return () => { - session.socket.off("player_pointer", handleSocketPlayerPointer); + session.socket?.off("player_pointer", handleSocketPlayerPointer); }; }, [session]); diff --git a/src/network/Session.ts b/src/network/Session.ts index 593545b..6011dbb 100644 --- a/src/network/Session.ts +++ b/src/network/Session.ts @@ -33,7 +33,7 @@ class Session extends EventEmitter { /** * The socket io connection */ - socket: Socket; + socket?: Socket; /** * A mapping of socket ids to session peers @@ -43,7 +43,7 @@ class Session extends EventEmitter { peers: Record; get id() { - return this.socket.id; + return this.socket?.id; } _iceServers: RTCIceServer[] = []; @@ -55,12 +55,6 @@ class Session extends EventEmitter { constructor() { super(); this.peers = {}; - this.socket = io(process.env.REACT_APP_BROKER_URL!, { - withCredentials: true, - parser: msgParser, - transports: ["websocket"], - autoConnect: process.env.REACT_APP_MAINTENANCE === "false", - }); // Signal connected peers of a closure on refresh window.addEventListener("beforeunload", this._handleUnload.bind(this)); } @@ -77,6 +71,11 @@ class Session extends EventEmitter { this.emit("status", "offline"); return; } + this.socket = io(process.env.REACT_APP_BROKER_URL!, { + withCredentials: true, + parser: msgParser, + transports: ["websocket"], + }); const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL); if (!response.ok) { throw Error("Unable to fetch ICE servers"); @@ -102,7 +101,7 @@ class Session extends EventEmitter { } disconnect() { - this.socket.disconnect(); + this.socket?.disconnect(); } /** @@ -191,7 +190,7 @@ class Session extends EventEmitter { this._gameId = gameId; this._password = password; - this.socket.emit( + this.socket?.emit( "join_game", gameId, password, @@ -224,7 +223,7 @@ class Session extends EventEmitter { }; const handleSignal = (signal: SignalData) => { - this.socket.emit("signal", JSON.stringify({ to: peer.id, signal })); + this.socket?.emit("signal", JSON.stringify({ to: peer.id, signal })); }; const handleConnect = () => { @@ -367,14 +366,14 @@ class Session extends EventEmitter { } _handleSocketReconnect() { - this.socket.sendBuffer = []; + if (this.socket) this.socket.sendBuffer = []; if (this._gameId) { this.joinGame(this._gameId, this._password); } } _handleForceUpdate() { - this.socket.disconnect(); + this.socket?.disconnect(); this.emit("status", "needs_update"); } }