websocket can now be disabled, the websocket ping interval and the tree reload interval can now be configured (#1132)

commafeed-client/src/app/types.ts

@@ -190,6 +190,9 @@ export interface ServerInfo {
     googleAnalyticsCode?: string
     smtpEnabled: boolean
     demoAccountEnabled: boolean
+    websocketEnabled: boolean
+    websocketPingInterval: number
+    treeReloadInterval: number
 }
 
 export interface Settings {

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,32 +1,37 @@
 import { setWebSocketConnected } from "app/slices/server"
 import { reloadTree } from "app/slices/tree"
-import { useAppDispatch } from "app/store"
+import { useAppDispatch, useAppSelector } from "app/store"
 import { useEffect } from "react"
 import WebsocketHeartbeatJs from "websocket-heartbeat-js"
 
 export const useWebSocket = () => {
+    const websocketEnabled = useAppSelector(state => state.server.serverInfos?.websocketEnabled)
+    const websocketPingInterval = useAppSelector(state => state.server.serverInfos?.websocketPingInterval)
     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`
+        let ws: WebsocketHeartbeatJs | undefined
 
-        const ws = new WebsocketHeartbeatJs({
-            url: wsUrl,
-            pingMsg: "ping",
-            // ping interval, just under a minute to prevent firewalls from closing idle connections
-            pingTimeout: 55000,
-        })
-        ws.onopen = () => dispatch(setWebSocketConnected(true))
-        ws.onclose = () => dispatch(setWebSocketConnected(false))
-        ws.onmessage = event => {
-            const { data } = event
-            if (typeof data === "string") {
-                if (data.startsWith("new-feed-entries:")) dispatch(reloadTree())
+        if (websocketEnabled && websocketPingInterval) {
+            const currentUrl = new URL(window.location.href)
+            const wsProtocol = currentUrl.protocol === "http:" ? "ws" : "wss"
+            const wsUrl = `${wsProtocol}://${currentUrl.hostname}:${currentUrl.port}/ws`
+
+            ws = new WebsocketHeartbeatJs({
+                url: wsUrl,
+                pingMsg: "ping",
+                pingTimeout: websocketPingInterval,
+            })
+            ws.onopen = () => dispatch(setWebSocketConnected(true))
+            ws.onclose = () => dispatch(setWebSocketConnected(false))
+            ws.onmessage = event => {
+                const { data } = event
+                if (typeof data === "string") {
+                    if (data.startsWith("new-feed-entries:")) dispatch(reloadTree())
+                }
             }
         }
 
-        return () => ws.close()
-    }, [dispatch])
+        return () => ws?.close()
+    }, [dispatch, websocketEnabled, websocketPingInterval])
 }

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

@@ -95,6 +95,7 @@ export default function Layout(props: LayoutProps) {
     const mobile = useMobile()
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
     const webSocketConnected = useAppSelector(state => state.server.webSocketConnected)
+    const treeReloadInterval = useAppSelector(state => state.server.serverInfos?.treeReloadInterval)
     const sidebarHidden = props.sidebarWidth === 0
     const dispatch = useAppDispatch()
     useWebSocket()
@@ -110,12 +111,15 @@ export default function Layout(props: LayoutProps) {
     }, [dispatch])
 
     useEffect(() => {
-        // reload tree periodically if not receiving websocket events
-        const timer = setInterval(() => {
-            if (!webSocketConnected) dispatch(reloadTree())
-        }, 30000)
+        let timer: number | undefined
+
+        if (!webSocketConnected && treeReloadInterval) {
+            // reload tree periodically if not receiving websocket events
+            timer = window.setInterval(() => dispatch(reloadTree()), treeReloadInterval)
+        }
+
         return () => clearInterval(timer)
-    }, [dispatch, webSocketConnected])
+    }, [dispatch, webSocketConnected, treeReloadInterval])
 
     const burger = (
         <Center>