react-realtime-hooks 1.2.0 → 1.2.1

package/dist/index.cjs

@@ -826,6 +826,9 @@ var useWebSocket = (options) => {
   const protocolsDependency = toProtocolsDependency(options.protocols);
   const socketRef = react.useRef(null);
   const socketKeyRef = react.useRef(null);
+  const activeSocketEpochRef = react.useRef(null);
+  const closingSocketEpochRef = react.useRef(null);
+  const nextSocketEpochRef = react.useRef(0);
   const manualCloseRef = react.useRef(false);
   const manualOpenRef = react.useRef(false);
   const skipCloseReconnectRef = react.useRef(false);
@@ -914,17 +917,28 @@ var useWebSocket = (options) => {
     stateRef.current = resolved;
     setState(resolved);
   };
-  const closeSocket = react.useEffectEvent((code, reason) => {
-    const socket2 = socketRef.current;
-    if (socket2 === null) {
-      return;
-    }
-    socketRef.current = null;
-    socketKeyRef.current = null;
-    if (isSocketActive(socket2)) {
-      socket2.close(code, reason);
-    }
+  const isActiveSocketEvent = react.useEffectEvent((socketEpoch) => {
+    return activeSocketEpochRef.current === socketEpoch;
   });
+  const shouldHandleSocketClose = react.useEffectEvent((socketEpoch) => {
+    return activeSocketEpochRef.current === socketEpoch || closingSocketEpochRef.current === socketEpoch;
+  });
+  const closeSocket = react.useEffectEvent(
+    (config = {}) => {
+      const socket2 = socketRef.current;
+      const socketEpoch = activeSocketEpochRef.current;
+      if (socket2 === null || socketEpoch === null) {
+        return;
+      }
+      socketRef.current = null;
+      socketKeyRef.current = null;
+      activeSocketEpochRef.current = null;
+      closingSocketEpochRef.current = config.trackClose ? socketEpoch : null;
+      if (isSocketActive(socket2)) {
+        socket2.close(config.code, config.reason);
+      }
+    }
+  );
   const applyHeartbeatAction = react.useEffectEvent(
     (action, error, reconnectTrigger) => {
       heartbeat.stop();
@@ -959,7 +973,7 @@ var useWebSocket = (options) => {
       };
       skipCloseReconnectRef.current = true;
       suppressReconnectRef.current = true;
-      closeSocket();
+      closeSocket({ trackClose: true });
     }
   );
   const parseMessage = react.useEffectEvent((event) => {
@@ -1013,10 +1027,17 @@ var useWebSocket = (options) => {
         lastError: parseError,
         status: "error"
       }));
-      closeSocket(1003, "parse-error");
+      closeSocket({
+        code: 1003,
+        reason: "parse-error",
+        trackClose: true
+      });
     }
   });
-  const handleError = react.useEffectEvent((event) => {
+  const handleError = react.useEffectEvent((event, socketEpoch) => {
+    if (!isActiveSocketEvent(socketEpoch)) {
+      return;
+    }
     heartbeat.stop();
     commitState((current) => ({
       ...current,
@@ -1026,9 +1047,18 @@ var useWebSocket = (options) => {
     }));
     options.onError?.(event);
   });
-  const handleClose = react.useEffectEvent((event) => {
-    socketRef.current = null;
-    socketKeyRef.current = null;
+  const handleClose = react.useEffectEvent((event, socketEpoch) => {
+    if (!shouldHandleSocketClose(socketEpoch)) {
+      return;
+    }
+    if (activeSocketEpochRef.current === socketEpoch) {
+      socketRef.current = null;
+      socketKeyRef.current = null;
+      activeSocketEpochRef.current = null;
+    }
+    if (closingSocketEpochRef.current === socketEpoch) {
+      closingSocketEpochRef.current = null;
+    }
     heartbeat.stop();
     updateBufferedAmount();
     const pendingCloseAction = pendingCloseActionRef.current;
@@ -1108,7 +1138,11 @@ var useWebSocket = (options) => {
       lastChangedAt: Date.now(),
       status: "closing"
     }));
-    closeSocket(code, reason);
+    closeSocket({
+      code,
+      reason,
+      trackClose: true
+    });
   };
   const send = (message) => {
     const socket2 = socketRef.current;
@@ -1160,8 +1194,12 @@ var useWebSocket = (options) => {
       return;
     }
     const socket2 = new WebSocket(resolvedUrl, options.protocols);
+    const socketEpoch = nextSocketEpochRef.current + 1;
     socketRef.current = socket2;
     socketKeyRef.current = nextSocketKey;
+    activeSocketEpochRef.current = socketEpoch;
+    closingSocketEpochRef.current = null;
+    nextSocketEpochRef.current = socketEpoch;
     socket2.binaryType = options.binaryType ?? "blob";
     commitState((current) => ({
       ...current,
@@ -1170,16 +1208,22 @@ var useWebSocket = (options) => {
       status: reconnect.status === "running" || reconnect.status === "scheduled" ? "reconnecting" : "connecting"
     }));
     const handleSocketOpen = (event) => {
+      if (!isActiveSocketEvent(socketEpoch)) {
+        return;
+      }
       handleOpen(event, socket2);
     };
     const handleSocketMessage = (event) => {
+      if (!isActiveSocketEvent(socketEpoch)) {
+        return;
+      }
       handleMessage(event);
     };
     const handleSocketError = (event) => {
-      handleError(event);
+      handleError(event, socketEpoch);
     };
     const handleSocketClose = (event) => {
-      handleClose(event);
+      handleClose(event, socketEpoch);
     };
     socket2.addEventListener("open", handleSocketOpen);
     socket2.addEventListener("message", handleSocketMessage);
@@ -1203,6 +1247,8 @@ var useWebSocket = (options) => {
   react.useEffect(() => () => {
     suppressReconnectRef.current = true;
     socketKeyRef.current = null;
+    activeSocketEpochRef.current = null;
+    closingSocketEpochRef.current = null;
     terminalErrorRef.current = null;
     const socket2 = socketRef.current;
     socketRef.current = null;