add websocket support to immediately refresh tree when new entries are available

commafeed-client/src/hooks/useWebSocket.ts

@@ -0,0 +1,24 @@
+import { reloadTree } from "app/slices/tree"
+import { useAppDispatch } from "app/store"
+import { useEffect } from "react"
+import WebsocketHeartbeatJs from "websocket-heartbeat-js"
+
+export const useWebSocket = () => {
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        const currentUrl = new URL(window.location.href)
+        const wsProtocol = currentUrl.protocol === "http:" ? "ws" : "wss"
+        const wsUrl = `${wsProtocol}://${currentUrl.hostname}:${currentUrl.port}/ws`
+
+        const ws = new WebsocketHeartbeatJs({ url: wsUrl, pingMsg: "ping" })
+        ws.onmessage = event => {
+            const { data } = event
+            if (typeof data === "string") {
+                if (data.startsWith("new-feed-entries:")) dispatch(reloadTree())
+            }
+        }
+
+        return () => ws.close()
+    }, [dispatch])
+}