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])
+}

commafeed-client/src/pages/app/Layout.tsx

@@ -25,6 +25,7 @@ import { Logo } from "components/Logo"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { OnMobile } from "components/responsive/OnMobile"
 import { useAppLoading } from "hooks/useAppLoading"
+import { useWebSocket } from "hooks/useWebSocket"
 import { LoadingPage } from "pages/LoadingPage"
 import { ReactNode, Suspense, useEffect } from "react"
 import { TbPlus } from "react-icons/tb"
@@ -85,6 +86,7 @@ export default function Layout({ sidebar, header }: LayoutProps) {
     const { loading } = useAppLoading()
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
     const dispatch = useAppDispatch()
+    useWebSocket()
 
     useEffect(() => {
         dispatch(reloadSettings())