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

commafeed-client/package-lock.json

@@ -36,7 +36,8 @@
                 "react-router-dom": "^6.4.3",
                 "react-swipeable": "^7.0.0",
                 "swagger-ui-react": "^4.15.2",
-                "tinycon": "^0.6.8"
+                "tinycon": "^0.6.8",
+                "websocket-heartbeat-js": "^1.1.0"
             },
             "devDependencies": {
                 "@lingui/cli": "^3.15.0",
@@ -10175,6 +10176,11 @@
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
             "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
         },
+        "node_modules/websocket-heartbeat-js": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/websocket-heartbeat-js/-/websocket-heartbeat-js-1.1.0.tgz",
+            "integrity": "sha512-5BSa6e8LUs0I8XrZXPUxAzo5Zmd45s69WmuY+7rNUjhgSzN1YUjFs1QWQJqfuq+JKpAuwp0fdlNNxODZNHGXhA=="
+        },
         "node_modules/whatwg-url": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -17479,6 +17485,11 @@
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
             "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
         },
+        "websocket-heartbeat-js": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/websocket-heartbeat-js/-/websocket-heartbeat-js-1.1.0.tgz",
+            "integrity": "sha512-5BSa6e8LUs0I8XrZXPUxAzo5Zmd45s69WmuY+7rNUjhgSzN1YUjFs1QWQJqfuq+JKpAuwp0fdlNNxODZNHGXhA=="
+        },
         "whatwg-url": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",

commafeed-client/package.json

@@ -43,7 +43,8 @@
         "react-router-dom": "^6.4.3",
         "react-swipeable": "^7.0.0",
         "swagger-ui-react": "^4.15.2",
-        "tinycon": "^0.6.8"
+        "tinycon": "^0.6.8",
+        "websocket-heartbeat-js": "^1.1.0"
     },
     "devDependencies": {
         "@lingui/cli": "^3.15.0",

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())

commafeed-client/vite.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
         port: 8082,
         proxy: {
             "/rest": "http://localhost:8083",
+            "/ws": "ws://localhost:8083",
             "/swagger": "http://localhost:8083",
         },
     },