nicer boxes

js/ws.ts

@@ -1,8 +1,46 @@
-const getSocket = (url: string): WebSocket => {
-    let ws = new WebSocket(url);
+const sockets: Record<string, MySocket> = {};
 
-    ws.onclose = () => setTimeout(() => (ws = getSocket(url)), 100);
-    ws.onerror = () => ws.close();
+type MySocket = {
+  send: (data: string) => void;
+  addMessageListener: (listener: (event: string) => void) => void;
+  _listeners: ((event: string) => void)[];
+  _ws: WebSocket;
+};
 
-    return ws;
-  };
+const isSocketOpen = (url: string): boolean => {
+  return sockets[url]?._ws?.readyState === WebSocket.OPEN;
+};
+
+const initSocket = (url: string): MySocket => {
+  if (sockets[url]) {
+    if (isSocketOpen(url)) {
+      return sockets[url];
+    } else {
+      sockets[url]._ws.close();
+    }
+  }
+
+  const ws = new WebSocket(url);
+  const socket: MySocket = {
+    send: (data: string) => {
+      sockets[url]._ws.send(data);
+    },
+    addMessageListener: (listener: (event: string) => void) => {
+      socket._listeners.push(listener);
+    },
+    _listeners: sockets[url]?._listeners ?? [],
+    _ws: ws,
+  };
+
+
+  ws.onerror = () => ws.close();
+  ws.onclose = () => initSocket(url);
+  ws.onmessage = (event) => {
+    console
+    sockets[url]._listeners.forEach((listener) => listener(event.data));
+  };
+
+  sockets[url] = socket;
+  
+  return sockets[url];
+};