From 4232f5e6fd892cb103fc4dbc0e4befb6f214daf9 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 16:25:17 -0800
Subject: [PATCH] chore: make socket connection more stable

---
 client-src/constants/socket.ts |  4 ++++
 client-src/main.tsx            | 16 +++++++++++++---
 client-src/routes/index.tsx    | 18 +++++-------------
 3 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 client-src/constants/socket.ts

diff --git a/client-src/constants/socket.ts b/client-src/constants/socket.ts
new file mode 100644
index 0000000..e749bc7
--- /dev/null
+++ b/client-src/constants/socket.ts
@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import PartySocket from "partysocket";
+
+export const SocketContext = createContext<PartySocket>(null!);
\ No newline at end of file
diff --git a/client-src/main.tsx b/client-src/main.tsx
index 48c4a6b..82fc8ab 100644
--- a/client-src/main.tsx
+++ b/client-src/main.tsx
@@ -5,6 +5,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
+import PartySocket from "partysocket";
+import { SocketContext } from "./constants/socket";
 
 // Create a new router instance
 const router = createRouter({ routeTree });
@@ -16,6 +18,12 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const socket = new PartySocket({
+  host: window.location.host,
+  room: "room-1",
+  party: "chat",
+})
+
 const queryClient = new QueryClient();
 
 // Render the app
@@ -24,9 +32,11 @@ if (!rootElement.innerHTML) {
   const root = createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <SocketContext value={socket}>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </SocketContext>
     </StrictMode>,
   );
 }
diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 5e1ad38..f772648 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,28 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Frog, FromServerSocketMessage, Hat, SVGUploaded } from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
 import { HAT_MAP } from "../views/room/state/hats";
 import { FROG_MAP } from "../views/room/state/frogs";
 import { socketSend } from "../views/draw/services/socket";
-import PartySocket from "partysocket";
+import { SocketContext } from "../constants/socket";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
-const socket = new PartySocket({
-  host: window.location.host,
-  room: "room-1",
-  party: "chat",
-})
-
-socket.addEventListener("message", (event) => {
-  console.log("Socket Message:", event.data);
-});
-
 function Index() {
+  const socket = useContext(SocketContext);
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
   const [hat, setHat] = useState("/TopHatP.png");
@@ -62,13 +53,14 @@ function Index() {
     return () => {
       socket.removeEventListener("message", onMessage);
     };
-  }, []);
+  }, [socket]);
 
   useEffect(() => {
     function onOpen() {
       socketSend({ type: "request-frog" });
     }
     socket.addEventListener("open", onOpen);
+    onOpen();
 
     return () => {
       socket.removeEventListener("open", onOpen);
-- 
2.51.2