Websocket watcher

jest.config.ts

@@ -14,7 +14,9 @@ const config: Config = {
         '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
     },
     // see https://github.com/react-dnd/react-dnd/issues/3443
-    transformIgnorePatterns: ['node_modules/(?!react-dnd|dnd-core|@react-dnd)'], // transform from ESM
+    transformIgnorePatterns: [
+        'node_modules/(?!react-dnd|dnd-core|@react-dnd)',
+    ], // transform from ESM
     globals: {
         IS_REACT_ACT_ENVIRONMENT: true,
     },

package.json

@@ -43,21 +43,22 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-querybuilder": "^7.2.0",
         "react-virtualized": "^9.22.5",
+        "reconnecting-websocket": "^4.4.0",
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@mui/system": "^5.15.15",
-        "@mui/x-tree-view": "^6.17.0",
-        "papaparse": "^5.4.1",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
+        "@mui/system": "^5.15.15",
+        "@mui/x-tree-view": "^6.17.0",
         "ag-grid-community": "^31.0.0",
         "ag-grid-react": "^31.2.0",
         "notistack": "^3.0.1",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.2",

src/components/index.ts

@@ -20,3 +20,4 @@ export * from './overflowableText';
 export * from './snackbarProvider';
 export * from './topBar';
 export * from './treeViewFinder';
+export * from './websocket';

src/components/websocket/Websocket.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+// @author Quentin CAPY
+
+import { PropsWithChildren, useEffect, useMemo } from 'react';
+import ReconnectingWebSocket from 'reconnecting-websocket';
+import { ListenerEventWS, ListenerOnOpen, WSContext } from './contexts/WSContext';
+import { useListenerManager } from './hooks/useListenerManager';
+
+// the delay before we consider the WS truly connected
+const DELAY_BEFORE_WEBSOCKET_CONNECTED = 12000;
+
+export type WebsocketProps = { urls: Record<string, string> };
+export function Websocket({ urls, children }: PropsWithChildren<WebsocketProps>) {
+    const {
+        broadcast: broadcastMessage,
+        addListener: addListenerMessage,
+        removeListener: removeListenerMessage,
+    } = useListenerManager<ListenerEventWS, MessageEvent>(urls);
+    const {
+        broadcast: broadcastOnOpen,
+        addListener: addListenerOnOpen,
+        removeListener: removeListenerOnOpen,
+    } = useListenerManager<ListenerOnOpen, never>(urls);
+
+    useEffect(() => {
+        const connections = Object.keys(urls).map((urlKey) => {
+            const rws = new ReconnectingWebSocket(() => urls[urlKey], [], {
+                // this option set the minimum duration being connected before reset the retry count to 0
+                minUptime: DELAY_BEFORE_WEBSOCKET_CONNECTED,
+            });
+
+            rws.onmessage = broadcastMessage(urlKey);
+
+            rws.onclose = (event) => {
+                console.error('Unexpected Notification WebSocket closed', event);
+            };
+            rws.onerror = (event) => {
+                console.error('Unexpected Notification WebSocket error', event);
+            };
+
+            rws.onopen = () => broadcastOnOpen(urlKey);
+            return rws;
+        });
+
+        return () => {
+            connections.forEach((c) => c.close());
+        };
+    }, [broadcastMessage, broadcastOnOpen, urls]);
+
+    const contextValue = useMemo(
+        () => ({
+            addListenerEvent: addListenerMessage,
+            removeListenerEvent: removeListenerMessage,
+            addListenerOnOpen,
+            removeListenerOnOpen,
+        }),
+        [addListenerMessage, removeListenerMessage, addListenerOnOpen, removeListenerOnOpen]
+    );
+    return <WSContext.Provider value={contextValue}>{children}</WSContext.Provider>;
+}

src/components/websocket/contexts/WSContext.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+// @author Quentin CAPY
+
+import { createContext } from 'react';
+
+export type ListenerEventWS = {
+    id: string;
+    callback: (event: MessageEvent) => void;
+};
+
+export type ListenerOnOpen = {
+    id: string;
+    callback: () => void;
+};
+
+export type WSContextType = {
+    addListenerEvent: (urlKey: string, l: ListenerEventWS) => void;
+    removeListenerEvent: (urlKey: string, idListener: string) => void;
+    addListenerOnOpen: (urlKey: string, l: ListenerOnOpen) => void;
+    removeListenerOnOpen: (urlKey: string, idListener: string) => void;
+};
+
+export type WSContextRecordType = Record<string, WSContextType>;
+
+export const WSContext = createContext<WSContextType>({
+    addListenerEvent: () => {},
+    removeListenerEvent: () => {},
+    addListenerOnOpen: () => {},
+    removeListenerOnOpen: () => {},
+});

src/components/websocket/hooks/useListener.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+// @author Quentin CAPY
+
+import { useContext, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { WSContext } from '../contexts/WSContext';
+
+export const useListener = (
+    listenerKey: string,
+    {
+        listenerCallbackMessage,
+        listenerCallbackOnOpen,
+        propsId,
+    }: {
+        listenerCallbackMessage?: (event: MessageEvent<any>) => void;
+        listenerCallbackOnOpen?: () => void;
+        propsId?: string;
+    }
+) => {
+    const { addListenerEvent, removeListenerEvent, addListenerOnOpen, removeListenerOnOpen } = useContext(WSContext);
+
+    useEffect(() => {
+        const id = propsId ?? uuidv4();
+        if (listenerCallbackMessage) {
+            addListenerEvent(listenerKey, {
+                id,
+                callback: listenerCallbackMessage,
+            });
+        }
+        return () => removeListenerEvent(listenerKey, id);
+    }, [addListenerEvent, removeListenerEvent, listenerKey, listenerCallbackMessage, propsId]);
+
+    useEffect(() => {
+        const id = propsId ?? uuidv4();
+        if (listenerCallbackOnOpen) {
+            addListenerOnOpen(listenerKey, {
+                id,
+                callback: listenerCallbackOnOpen,
+            });
+        }
+        return () => removeListenerOnOpen(listenerKey, id);
+    }, [addListenerOnOpen, removeListenerOnOpen, listenerKey, listenerCallbackOnOpen, propsId]);
+};

src/components/websocket/hooks/useListenerManager.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+// @author Quentin CAPY
+import { useCallback, useEffect, useRef } from 'react';
+import { ListenerEventWS, ListenerOnOpen } from '../contexts/WSContext';
+
+export const useListenerManager = <
+    TListener extends ListenerEventWS | ListenerOnOpen,
+    TMessage extends MessageEvent | never
+>(
+    urls: Record<string, string>
+) => {
+    const urlsListenersRef = useRef(
+        Object.keys(urls).reduce((acc, urlKey) => {
+            acc[urlKey] = [];
+            return acc;
+        }, {} as Record<string, TListener[]>)
+    );
+
+    useEffect(() => {
+        urlsListenersRef.current = Object.keys(urls).reduce((acc, urlKey) => {
+            acc[urlKey] = [];
+            return acc;
+        }, {} as Record<string, TListener[]>);
+    }, [urls]);
+
+    const addListenerEvent = useCallback((urlKey: string, listener: TListener) => {
+        const urlsListeners = urlsListenersRef.current;
+        if (urlKey in urlsListeners) {
+            urlsListeners[urlKey].push(listener);
+        } else {
+            urlsListeners[urlKey] = [listener];
+        }
+        urlsListenersRef.current = urlsListeners;
+    }, []);
+    const removeListenerEvent = useCallback((urlKey: string, id: string) => {
+        const listeners = urlsListenersRef.current?.[urlKey];
+        if (listeners) {
+            const newListerner = listeners.filter((l) => l.id !== id);
+            urlsListenersRef.current = {
+                ...urlsListenersRef.current,
+                [urlKey]: newListerner,
+            };
+        }
+    }, []);
+    const broadcast = useCallback(
+        (urlKey: string) => (event: TMessage) => {
+            const listenerList = urlsListenersRef.current?.[urlKey];
+            if (listenerList) {
+                listenerList.forEach(({ callback }) => {
+                    callback(event);
+                });
+            }
+        },
+        []
+    );
+
+    return {
+        addListener: addListenerEvent,
+        removeListener: removeListenerEvent,
+        broadcast,
+    };
+};

src/components/websocket/index.ts

@@ -0,0 +1,4 @@
+export * from './Websocket';
+export * from './contexts/WSContext';
+export * from './hooks/useListener';
+export * from './hooks/useListenerManager';