From 26e6a141f130908aa4c352795f5aaa3200fad9a5 Mon Sep 17 00:00:00 2001 From: talksik Date: Sun, 8 May 2022 13:13:42 -0500 Subject: [PATCH] handling disconnection better just know the whole socket thing will improve with better code that can scale later on...know that ill never be happy with it, but just live with it and make sure that the data flow is understandable and clean --- packages/api/sockets/index.ts | 45 +++++++++++++++++-- .../components/lines/lineRow.tsx/index.tsx | 32 +++++++++++-- .../src/controller/lineDataProvider.tsx | 4 ++ 3 files changed, 75 insertions(+), 6 deletions(-) diff --git a/packages/api/sockets/index.ts b/packages/api/sockets/index.ts index 306ccc0..78b766f 100644 --- a/packages/api/sockets/index.ts +++ b/packages/api/sockets/index.ts @@ -86,7 +86,11 @@ export default function InitializeWs(io: any) { ServerRequestChannels.CONNECT_TO_LINE, (req: ConnectToLineRequest) => { // add this user to the room - console.log(`${socket.id} user joined room for line ${req.lineId}`); + console.log( + `${socket.id} user CONNECTED room for line ${Object.keys( + socket.rooms + )}` + ); const roomName = `connectedLine:${req.lineId}`; socket.join(roomName); @@ -122,13 +126,13 @@ export default function InitializeWs(io: any) { ServerRequestChannels.TUNE_INTO_LINE, async (req: TuneToLineRequest) => { console.log( - `${socket.id} user tuned into room for line ${req.lineId}` + `${socket.id} user TUNED into room for line ${req.lineId}` ); const roomName = `tunedLine:${req.lineId}`; socket.join(roomName); - console.log(`${socket.id} now in rooms ${socket.rooms}`); + console.log(`${socket.id} now in rooms ${Object.keys(socket.rooms)}`); // persist tuning in if user is toggle tuning in if (req.keepTunedIn) { @@ -264,6 +268,41 @@ export default function InitializeWs(io: any) { } ); + // tell all connected people that I am disconnecting + // tell tuned in folks that I am leaving the room + // tell the tuned in folks the new list of + socket.on("disconnecting", (reason: any) => { + console.log(reason); + + console.log(socket.rooms); + for (const roomName of socket.rooms) { + if (roomName !== socket.id) { + const lineId = roomName.split(":")[1]; + if (roomName.includes("tunedLine")) { + // get fresh list of tuned in folks without me + const clientUserIdsInRoom = [ + ...(io.sockets.adapter.rooms.get(roomName) ?? []), + ].map( + (otherUserSocketId: string) => + socketIdsToUserIds[otherUserSocketId] + ); + + io.in(roomName).emit( + ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE, + new SomeoneUntunedFromLineResponse( + lineId, + userInfo.userId, + clientUserIdsInRoom + ) + ); + } else if (roomName.includes("connectedLine")) { + //TODO: p3: client doesn't really to know right now in our flow as this list is not really used + // io.in(roomName).emit(ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE, new SomeoneDisconnected(lineId, userInfo.userId, clientUserIdsInRoom)); + } + } + } + }); + // ==== DISCONNECT ==== socket.on("disconnect", () => { delete socketIdsToUserIds[socket.id]; diff --git a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx index 28a6631..cea75ab 100644 --- a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx +++ b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx @@ -341,7 +341,10 @@ function StreamRoom({ $ws.on( `${ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE}:${lineId}`, - (res: SomeoneUntunedFromLineResponse) => {} + (res: SomeoneUntunedFromLineResponse) => { + // find the peer object and remove from our userPeers map + // will also cause unmounting the child component which destroys peer object but also can destroy here + } ); }) .catch((error) => { @@ -371,14 +374,37 @@ function StreamRoom({ useEffect(() => { console.log("keeping an eye on user peers map"); console.log(userPeers); - - // TODO: p1...when the peer map user count === tuned in - 1, then we tell parent to say that we are actually tuned in/connected }, [userPeers]); // todo, someone tell the main object that I am finally connected after everything...different than tuned in + // TODO: p1...when the peer map user count > tunedIn.length, then we get rid of the right person from list cuzz they have officially left or disconnected useEffect(() => { console.log("change in tuned in users in the streaming room!!!"); + + setUserPeers((prevUserPeersMap) => { + // go through the userIds here + // if tunedIn users doesn't have a userId, this guy prolly disconnected + + const newMap = { ...prevUserPeersMap }; //ensures going through the list of peers again to remove specific ones + + const otherUserIdsPeers = Object.keys(prevUserPeersMap); + + otherUserIdsPeers.forEach((otherUserId) => { + // problem if we are trying to show stream of someone who is not tuned in + if (!tunedInUsers.includes(otherUserId)) { + console.log("user left with id:", otherUserId); + const disconnectedLocalPeer = newMap[otherUserId]; + + if (disconnectedLocalPeer) { + disconnectedLocalPeer.peer?.destroy(); + delete newMap[otherUserId]; + } + } + }); + + return newMap; + }); }, [tunedInUsers]); // todo: when user isUserBroadcasting is false, disable localUserStream in this component diff --git a/packages/desktop/src/controller/lineDataProvider.tsx b/packages/desktop/src/controller/lineDataProvider.tsx index 31ce2f1..ad6f3ce 100644 --- a/packages/desktop/src/controller/lineDataProvider.tsx +++ b/packages/desktop/src/controller/lineDataProvider.tsx @@ -319,6 +319,10 @@ function useSocketHandler(linesData: MasterLineData[]) { [$ws] ); + /** + * TODO: handle telling overall current client that we are finally rtc connected for a certain line + */ + // TODO: move all of these emitters to just having child views doing the work here return { linesMap,