Updates

components/lib/hooks/useWebSocket.tsx

@@ -25,10 +25,9 @@ export const WebSocketEventNames = ["wsDataEvent", "wsMessageEvent"] as const;
  *      console.log(e.detail.message) // type string
  * })
  */
-export default function useWebSocket<T>({
-    url,
-    debounce,
-}: UseWebsocketHookParams) {
+export default function useWebSocket<
+    T extends { [key: string]: any } = { [key: string]: any }
+>({ url, debounce }: UseWebsocketHookParams) {
     const DEBOUNCE = debounce || 200;
 
     const [socket, setSocket] = React.useState<WebSocket | undefined>(
@@ -75,6 +74,8 @@ export default function useWebSocket<T>({
 
         ws.onclose = (ev) => {
             console.log("Websocket closed ... Attempting to reconnect ...");
+            console.log("URL:", url);
+
             reconnectInterval = setInterval(() => {
                 if (tries >= 3) {
                     return window.clearInterval(reconnectInterval);

components/lib/hooks/useWebSocketEventHandler.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { WebSocketEventNames } from "./useWebSocket";
+
+type Param = {
+    listener?: (typeof WebSocketEventNames)[number];
+};
+
+/**
+ * # Use Websocket Data Event Handler Hook
+ */
+export default function useWebSocketEventHandler<
+    T extends { [key: string]: any } = { [key: string]: any }
+>(param?: Param) {
+    const [data, setData] = React.useState<T | undefined>(undefined);
+    const [message, setMessage] = React.useState<string | undefined>(undefined);
+
+    React.useEffect(() => {
+        const dataEventListenerCallback = (e: Event) => {
+            const customEvent = e as CustomEvent;
+            const data = customEvent.detail.data as T | undefined;
+            const message = customEvent.detail.message as string | undefined;
+            if (data) setData(data);
+            if (message) setMessage(message);
+        };
+
+        const messageEventName: (typeof WebSocketEventNames)[number] =
+            param?.listener || "wsDataEvent";
+        window.addEventListener(messageEventName, dataEventListenerCallback);
+
+        return function () {
+            window.removeEventListener(
+                messageEventName,
+                dataEventListenerCallback
+            );
+        };
+    }, []);
+
+    return { data, message };
+}