fix: updates for dead sessions (#33)

* fix: updates for dead sessions * fix: remove extraneous assignment in redis.ts Co-authored-by: Drew Radcliff <[email protected]> --------- Co-authored-by: Drew Radcliff <[email protected]>
lewxdev · Aug 23, 2024 · c48ca39 · c48ca39
1 parent a927686
commit c48ca39
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 58 deletions.
diff --git a/app/components/field.tsx b/app/components/field.tsx
@@ -5,15 +5,14 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { Skull } from "lucide-react";
 import { Fade } from "@/components/fade";
 import { Plot } from "@/components/plot";
-import { useSocket } from "@/components/socket-provider";
 import { useSocketEvent } from "@/hooks/use-socket-event";
 
 const GRID_SIZE = 2;
 const GAP_SIZE = GRID_SIZE * 0.125;
 const PX_PER_REM = 16;
 
 export function Field() {
-  const { sessionState } = useSocket();
+  const [sessionState] = useSocketEvent("sessionState");
   const [plots] = useSocketEvent("update");
   const size = plots ? Math.sqrt(plots.length) : 0;
 

diff --git a/app/components/plot.tsx b/app/components/plot.tsx
@@ -11,7 +11,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 export function Plot({ className, index, state, ...props }: Props) {
-  const { socket } = useSocket();
+  const socket = useSocket();
   const longPressProps = useLongPress({
     onLongPress: useCallback(() => {
       if (state === "flagged" || state === "unknown") {

diff --git a/app/components/socket-provider.tsx b/app/components/socket-provider.tsx
@@ -2,16 +2,9 @@
 
 import { createContext, useContext, useEffect, useState } from "react";
 import { io } from "socket.io-client";
-import type { SessionState, SocketClient } from "@/types";
+import type { SocketClient } from "@/types";
 
-const socket: SocketClient = io({ autoConnect: false });
-
-type SocketContextValue = {
-  socket: SocketClient;
-  sessionState: SessionState | null;
-};
-
-const SocketContext = createContext<SocketContextValue | null>(null);
+const SocketContext = createContext<SocketClient | null>(null);
 
 export function useSocket() {
   const socketContext = useContext(SocketContext);
@@ -22,29 +15,26 @@ export function useSocket() {
 }
 
 export function SocketProvider({ children }: React.PropsWithChildren) {
-  const [sessionState, setSessionState] = useState<SessionState | null>(null);
+  const [socket] = useState<SocketClient>(() =>
+    io({
+      auth: (callback) => {
+        callback({ sessionId: localStorage.getItem("sessionId") });
+      },
+    }),
+  );
 
   useEffect(() => {
-    socket.auth = { sessionId: localStorage.getItem("sessionId") };
-    socket.connect();
-
-    socket.on("connect_error", (error) => {
-      if (error.message === "dead") {
-        setSessionState("dead");
-      }
-    });
-
     socket.on("session", (sessionId) => {
       socket.auth = { sessionId };
       localStorage.setItem("sessionId", sessionId);
     });
 
-    socket.on("sessionState", setSessionState);
-  }, []);
+    return () => {
+      socket.off();
+    };
+  }, [socket]);
 
   return (
-    <SocketContext.Provider value={{ socket, sessionState }}>
-      {children}
-    </SocketContext.Provider>
+    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
   );
 }
diff --git a/app/hooks/use-socket-event.ts b/app/hooks/use-socket-event.ts
@@ -3,7 +3,7 @@ import { useSocket } from "@/components/socket-provider";
 import type { ServerToClientEvents } from "@/types";
 
 export function useSocketEvent<K extends keyof ServerToClientEvents>(event: K) {
-  const { socket } = useSocket();
+  const socket = useSocket();
   const [result, setResult] = useState<
     Parameters<ServerToClientEvents[K]> | []
   >([]);

diff --git a/app/server.ts b/app/server.ts
@@ -1,4 +1,3 @@
-import crypto from "crypto";
 import { createServer } from "node:http";
 import next from "next";
 import { Server } from "socket.io";
@@ -13,48 +12,52 @@ const port = 3000;
 async function main() {
   const app = next({ dev, hostname, port });
   await app.prepare();
-
   const httpServer = createServer(app.getRequestHandler());
   const io: SocketServer = new Server(httpServer);
-
-  let clientsCount = 0;
   let field = await Field.fromRedis();
 
+  // middleware on incoming connection (see: https://socket.io/docs/v4/server-api/#serverusefn)
+  // handles "authentication" and manages *initial* session data
+  // note:
+  // * socket is not connected when this runs
+  // * only executed once per connection
   io.use(async (socket, next) => {
     const { sessionId } = socket.handshake.auth;
-    const sessionState = await redis.getSession(sessionId);
-    if (sessionState === "dead") {
-      return next(new Error("dead"));
-    }
-    socket.data.sessionId = sessionState
-      ? sessionId
-      : crypto.randomBytes(8).toString("hex");
+    socket.data = await redis.getSession(sessionId);
     next();
   });
 
+  // client connects (or reconnects)
   io.on("connection", async (socket) => {
-    if (field.isComplete) {
-      field = await Field.create(field.size + 10);
-      await redis.resetSessions();
-      io.emit("sessionState", "alive");
-    }
+    // update client count for all clients
+    io.emit("clientsCount", io.engine.clientsCount);
 
-    await redis.setSession(socket.data.sessionId, "alive");
+    // send initial data to newly connected client
     socket.emit("session", socket.data.sessionId);
-    socket.emit("sessionState", "alive");
-
-    clientsCount++;
-    io.emit("clientsCount", clientsCount);
-    io.emit("exposedPercent", field.exposedPercent);
+    socket.emit("sessionState", socket.data.sessionState);
     socket.emit("update", field.plots);
+    socket.emit("exposedPercent", field.exposedPercent);
+
+    // middleware on incoming event (see: https://socket.io/docs/v4/server-api/#socketusefn)
+    // handles *subsequent* listeners, blocking events from dead sessions
+    socket.use((event, next) => {
+      if (socket.data.sessionState === "dead") {
+        return next(new Error("dead", { cause: event }));
+      }
+      next();
+    });
+
+    // client event listeners
 
     socket.on("expose", async (index) => {
       if (field.exposeCell(index) === "dead") {
         await redis.setSession(socket.data.sessionId, "dead");
-        socket.emit("sessionState", "dead");
+        // update session state and emit to client
+        socket.emit("sessionState", (socket.data.sessionState = "dead"));
       } else if (field.isComplete) {
         field = await Field.create(field.size + 10);
         await redis.resetSessions();
+        // everyone is alive again 🎉
         io.emit("sessionState", "alive");
       }
       io.emit("exposedPercent", field.exposedPercent);
@@ -66,9 +69,9 @@ async function main() {
       io.emit("update", field.plots);
     });
 
+    // client disconnects
     socket.on("disconnect", () => {
-      clientsCount--;
-      io.emit("clientsCount", clientsCount);
+      io.emit("clientsCount", io.engine.clientsCount);
     });
   });
 

diff --git a/app/types/index.ts b/app/types/index.ts
@@ -19,8 +19,9 @@ export type ServerToClientEvents = {
 
 type InterServerEvents = {};
 
-type SocketData = {
+export type SocketData = {
   sessionId: string;
+  sessionState: SessionState;
 };
 
 export type SocketClient = Socket<ServerToClientEvents, ClientToServerEvents>;

diff --git a/app/utils/redis.ts b/app/utils/redis.ts
@@ -1,5 +1,6 @@
+import crypto from "node:crypto";
 import { Redis } from "ioredis";
-import type { SessionState } from "@/types";
+import type { SessionState, SocketData } from "@/types";
 
 const fieldKey = "field:data";
 const sessionKey = "user:sessions";
@@ -24,10 +25,15 @@ export async function encodeData(value: number[]) {
   return value;
 }
 
-export async function getSession(id: string) {
+export async function getSession(sessionId: string): Promise<SocketData> {
   const redis = getClient();
-  const value = await redis.hget(sessionKey, id);
-  return value === "alive" || value === "dead" ? value : null;
+  const sessionState = await redis.hget(sessionKey, sessionId);
+  if (sessionState === "alive" || sessionState === "dead") {
+    return { sessionId, sessionState };
+  }
+  const newSessionId = crypto.randomBytes(8).toString("hex");
+  await setSession(newSessionId, "alive");
+  return { sessionId: newSessionId, sessionState: "alive" };
 }
 
 export async function setSession(id: string, state: SessionState) {