Added useIsConnected() hook to keep track of DataSync connection state

Author: mpscholten

lib/IHP/DataSync/ihp-datasync.js

@@ -34,12 +34,17 @@ class DataSyncController {
         this.eventListeners = {
             message: [],
             close: [],
-            reconnect: []
+            reconnect: [],
+            open: []
         };
 
         // We store messages here that cannot be send because the connection is not available
         this.outbox = [];
         this.reconnectTimeout = null;
+    
+        // Every message from the client expects a reply from the server
+        // If that doesn't arrive in time, we can expect the connection to be broken
+        this.pendingRequestTimeout = null;
 
         this.dataSubscriptions = [];
 
@@ -63,12 +68,16 @@ class DataSyncController {
         const connect = () => new Promise((resolve, reject) => {
             const socket = new WebSocket(DataSyncController.getWSUrl())
 
-            socket.onopen = () => {
+            socket.onopen = event => {
                 // These handlers should only be installed once the connection is established
                 socket.onclose = this.onClose.bind(this);
                 socket.onmessage = this.onMessage.bind(this);
 
                 resolve(socket);
+
+                for (const listener of this.eventListeners.open) {
+                    listener(event);
+                }
             }
 
             socket.onerror = (event) => reject(event);
@@ -115,6 +124,11 @@ class DataSyncController {
 
         this.receivedFirstResponse = true;
 
+        if (this.pendingRequestTimeout) {
+            clearTimeout(this.pendingRequestTimeout);
+            this.pendingRequestTimeout = null;
+        }
+
         if (request) {
             const { resolve, reject } = request;
 
@@ -156,6 +170,10 @@ class DataSyncController {
                 }
             } else {
                 this.connection.send(JSON.stringify(payload));
+                
+                if (!this.pendingRequestTimeout) {
+                    this.pendingRequestTimeout = setTimeout(this.onPendingRequestTimeout.bind(this), 5000);
+                }
             }
         });
     }
@@ -198,6 +216,14 @@ class DataSyncController {
             }
         }
     }
+
+    onPendingRequestTimeout() {
+        if (this.connection) {
+            console.log('Pending request timed out, closing WebSocket');
+            this.connection.close();
+            this.onClose(null);
+        }
+    }
 }
 
 const APPEND_NEW_RECORD = 0;

lib/IHP/DataSync/react.js

@@ -67,4 +67,26 @@ export function useQuery(queryBuilder) {
 export function useQuerySingleResult(queryBuilder) {
     const result = useQuery(queryBuilder.limit(1));
     return result === null ? null : result[0];
+}
+
+export function useIsConnected() {
+    const dataSyncController = DataSyncController.getInstance();
+    const isConnectedDefault = dataSyncController.connection !== null;
+    
+    const [isConnected, setConnected] = useState(isConnectedDefault);
+
+    useEffect(() => {
+        const setConnectedTrue = () => setConnected(true);
+        const setConnectedFalse = () => setConnected(false);
+        
+        dataSyncController.addEventListener('open', setConnectedTrue);
+        dataSyncController.addEventListener('close', setConnectedFalse);
+
+        return () => {
+            dataSyncController.removeEventListener('open', setConnectedTrue);
+            dataSyncController.removeEventListener('close', setConnectedFalse);
+        }
+    }, [ setConnected ]);
+
+    return isConnected;
 }