Add ping pong mechanic to websocket service to keep connection healthy (#253)

* Add ping pong mechanic to websocket service to keep connection healthy

* Add divider into custom-example auto field loader

* Change WS_PING_INTERVAL_IN_SECONDS to actual seconds

Author: tjeerddie

src/custom-example/uniforms/AutoFieldLoader.tsx

@@ -2,6 +2,7 @@ import {
     AcceptField,
     BoolField,
     DateField,
+    DividerField,
     LabelField,
     ListField,
     LocationCodeField,
@@ -49,6 +50,8 @@ export function autoFieldFunction(props: GuaranteedProps<unknown> & Record<strin
                     return LongTextField;
                 case "label":
                     return LabelField;
+                case "divider":
+                    return DividerField;
                 case "summary":
                     return SummaryField;
                 case "subscription":

src/env.ts

@@ -33,6 +33,7 @@ interface Env {
     GITLAB_URL: string;
     CI_PROJECT_PATH: string;
     LOCALE: string;
+    WS_PING_INTERVAL_IN_SECONDS: number;
 }
 
 // We normally load env from window.__env__ as defined in public/env.js which
@@ -63,4 +64,5 @@ export const ENV: Env = window.__env__ || {
     GITLAB_URL: process.env.REACT_APP_GITLAB_URL,
     CI_PROJECT_PATH: process.env.REACT_APP_CI_PROJECT_PATH,
     LOCALE: process.env.REACT_APP_LOCALE || "en-GB",
+    WS_PING_INTERVAL_IN_SECONDS: parseInt(process.env.WS_PING_INTERVAL_IN_SECONDS || "30"),
 };

src/websocketService/index.ts

@@ -1,26 +1,10 @@
-/*
- * Copyright 2019-2023 SURF.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
 import { useAuth } from "oidc-react";
 import { useEffect, useState } from "react";
 import useWebSocket, { Options, ReadyState } from "react-use-websocket";
 
 import { ENV } from "../env";
 
 const isSecure = !!ENV.BACKEND_URL.includes("https");
-
 const wsProtocol = isSecure ? "wss" : "ws";
 const websocketUrl = `${wsProtocol}${ENV.BACKEND_URL.replace(/(^\w+|^)/, "")}`;
 
@@ -30,6 +14,9 @@ export interface SurfWebSocket<T> {
     useFallback: boolean;
 }
 
+const pingMessage = "__ping__";
+const pingintervalInMilliseconds = ENV.WS_PING_INTERVAL_IN_SECONDS * 1000;
+
 const websocketSettings: Options = {
     retryOnError: true,
     reconnectAttempts: 10,
@@ -46,7 +33,7 @@ const useWebsocketServiceWithAuth = <T extends object>(endpoint: string): SurfWe
     const baseUrl = `${websocketUrl}/${endpoint}?token=`;
     const [url, setUrl] = useState<string>("");
 
-    const { lastJsonMessage, readyState } = useWebSocket(url, websocketSettings, !!url);
+    const { lastJsonMessage, readyState, sendMessage, lastMessage } = useWebSocket(url, websocketSettings, !!url);
     const [useFallback, setUsefallback] = useState<boolean>(false);
 
     useEffect(() => {
@@ -57,23 +44,44 @@ const useWebsocketServiceWithAuth = <T extends object>(endpoint: string): SurfWe
         setUrl(`${baseUrl}${auth.userData?.access_token}`);
     }, [baseUrl, auth.userData?.access_token]);
 
+    useEffect(() => {
+        const pingInterval = setInterval(() => sendMessage(pingMessage), pingintervalInMilliseconds);
+        return () => clearInterval(pingInterval);
+    }, [sendMessage]);
+
+    useEffect(() => {
+        if (lastMessage && lastMessage.data === "__pong__") {
+            // handle pong...
+        }
+    }, [lastMessage]);
+
     return { lastMessage: lastJsonMessage, readyState, useFallback };
 };
 
 const useWebsocketServiceWithoutAuth = <T extends object>(endpoint: string): SurfWebSocket<T> => {
     const baseUrl = `${websocketUrl}/${endpoint}?token=`;
-    const { lastJsonMessage, readyState } = useWebSocket(baseUrl, websocketSettings);
+    const { lastJsonMessage, readyState, sendMessage, lastMessage } = useWebSocket(baseUrl, websocketSettings);
     const [useFallback, setUsefallback] = useState<boolean>(false);
 
     useEffect(() => {
-        console.log(readyState);
         if (readyState === ReadyState.CLOSED) {
             setUsefallback(true);
         } else {
             setUsefallback(false);
         }
     }, [readyState]);
 
+    useEffect(() => {
+        const pingInterval = setInterval(() => sendMessage(pingMessage), pingintervalInMilliseconds);
+        return () => clearInterval(pingInterval);
+    }, [sendMessage]);
+
+    useEffect(() => {
+        if (lastMessage && lastMessage.data === "__pong__") {
+            // handle pong...
+        }
+    }, [lastMessage]);
+
     return { lastMessage: lastJsonMessage, readyState, useFallback };
 };