@jsenv/core 27.5.3 → 27.7.0

package/dist/js/server_events_client.js

@@ -1,244 +1,105 @@
-const STATUSES = {
+const READY_STATES = {
   CONNECTING: "connecting",
-  CONNECTED: "connected",
-  DISCONNECTED: "disconnected"
+  OPEN: "open",
+  CLOSING: "closing",
+  CLOSED: "closed"
 };
-const createEventSourceConnection = (eventSourceUrl, {
-  retryMaxAttempt = Infinity,
-  retryAllocatedMs = Infinity,
-  lastEventId,
-  useEventsToManageConnection = true
-} = {}) => {
-  const {
-    EventSource
-  } = window;
-
-  if (typeof EventSource !== "function") {
-    return () => {};
-  }
-
-  let eventSource;
-  const listenersMap = new Map();
-  const callbacksMap = new Map();
-  const eventSourceOrigin = new URL(eventSourceUrl).origin;
-
-  const addEventCallbacks = namedCallbacks => {
-    let listenersMapSize = listenersMap.size;
-    Object.keys(namedCallbacks).forEach(eventName => {
-      const callback = namedCallbacks[eventName];
-      const existingCallbacks = callbacksMap.get(eventName);
-      let callbacks;
-
-      if (existingCallbacks) {
-        callbacks = existingCallbacks;
-      } else {
-        callbacks = [];
-        callbacksMap.set(eventName, callbacks);
-      }
-
-      if (callbacks.length === 0) {
-        const eventListener = e => {
-          if (e.origin === eventSourceOrigin) {
-            if (e.lastEventId) {
-              lastEventId = e.lastEventId;
-            }
-
-            callbacks.forEach(eventCallback => {
-              eventCallback(e);
-            });
-          }
-        };
-
-        listenersMap.set(eventName, eventListener);
-
-        if (eventSource) {
-          eventSource.addEventListener(eventName, eventListener);
-        }
-      }
-
-      callbacks.push(callback);
-    });
-
-    if (useEventsToManageConnection && listenersMapSize === 0 && listenersMap.size > 0 && status.value !== STATUSES.CONNECTING && status.value !== STATUSES.CONNECTED) {
-      _connect();
-    }
-
-    let removed = false;
-    return () => {
-      if (removed) return;
-      removed = true;
-      listenersMapSize = listenersMap.size;
-      Object.keys(namedCallbacks).forEach(eventName => {
-        const callback = namedCallbacks[eventName];
-        const callbacks = callbacksMap.get(eventName);
-
-        if (callbacks) {
-          const index = callbacks.indexOf(callback);
-
-          if (index > -1) {
-            callbacks.splice(index, 1);
-
-            if (callbacks.length === 0) {
-              const listener = listenersMap.get(eventName);
-
-              if (listener) {
-                listenersMap.delete(listener);
-
-                if (eventSource) {
-                  eventSource.removeEventListener(eventName, listener);
-                }
-              }
-            }
-          }
-        }
-      });
-      namedCallbacks = null; // allow garbage collect
-
-      if (useEventsToManageConnection && listenersMapSize > 0 && listenersMap.size === 0 && (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED)) {
-        _disconnect();
-      }
-    };
-  };
-
-  const status = {
-    value: "default",
+const createConnectionManager = (attemptConnection, {
+  retry,
+  retryAfter,
+  retryMaxAttempt,
+  retryAllocatedMs
+}) => {
+  const readyState = {
+    value: READY_STATES.CLOSED,
     goTo: value => {
-      if (value === status.value) {
+      if (value === readyState.value) {
         return;
       }
 
-      status.value = value;
-      status.onchange();
+      readyState.value = value;
+      readyState.onchange();
     },
     onchange: () => {}
   };
 
   let _disconnect = () => {};
 
-  const attemptConnection = url => {
-    if (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED) {
+  const connect = () => {
+    if (readyState.value === READY_STATES.CONNECTING || readyState.value === READY_STATES.OPEN) {
       return;
     }
 
-    eventSource = new EventSource(url, {
-      withCredentials: true
-    });
-
-    _disconnect = () => {
-      if (status.value !== STATUSES.CONNECTING && status.value !== STATUSES.CONNECTED) {
-        console.warn(`disconnect() ignored because connection is ${status.value}`);
-        return;
-      }
-
-      if (eventSource) {
-        eventSource.onerror = undefined;
-        eventSource.close();
-        listenersMap.forEach((listener, eventName) => {
-          eventSource.removeEventListener(eventName, listener);
-        });
-      }
-
-      eventSource = null;
-      status.goTo(STATUSES.DISCONNECTED);
-    };
-
     let retryCount = 0;
-    let firstRetryMs = Date.now();
-
-    eventSource.onerror = errorEvent => {
-      if (errorEvent.target.readyState === EventSource.CONNECTING) {
-        if (retryCount > retryMaxAttempt) {
-          console.info(`could not connect after ${retryMaxAttempt} attempt`);
-
-          _disconnect();
-
-          return;
-        }
-
-        if (retryCount === 0) {
-          firstRetryMs = Date.now();
-        } else {
-          const allRetryDuration = Date.now() - firstRetryMs;
-
-          if (retryAllocatedMs && allRetryDuration > retryAllocatedMs) {
-            console.info(`could not connect in less than ${retryAllocatedMs} ms`);
-
-            _disconnect();
-
+    let msSpent = 0;
+
+    const attempt = () => {
+      readyState.goTo(READY_STATES.CONNECTING);
+      _disconnect = attemptConnection({
+        onClosed: () => {
+          if (!retry) {
+            readyState.goTo(READY_STATES.CLOSED);
+            console.info(`[jsenv] failed to connect to server`);
             return;
           }
-        }
-
-        retryCount++;
-        status.goTo(STATUSES.CONNECTING);
-        return;
-      }
-
-      if (errorEvent.target.readyState === EventSource.CLOSED) {
-        _disconnect();
 
-        return;
-      }
-    };
+          if (retryCount > retryMaxAttempt) {
+            readyState.goTo(READY_STATES.CLOSED);
+            console.info(`[jsenv] could not connect to server after ${retryMaxAttempt} attempt`);
+            return;
+          }
 
-    eventSource.onopen = () => {
-      status.goTo(STATUSES.CONNECTED);
-    };
+          if (retryAllocatedMs && msSpent > retryAllocatedMs) {
+            readyState.goTo(READY_STATES.CLOSED);
+            console.info(`[jsenv] could not connect to server in less than ${retryAllocatedMs}ms`);
+            return;
+          } // if closed while open -> connection lost
+          // otherwise it's the attempt to connect for the first time
+          // or to reconnect
 
-    listenersMap.forEach((listener, eventName) => {
-      eventSource.addEventListener(eventName, listener);
-    });
 
-    if (!listenersMap.has("welcome")) {
-      addEventCallbacks({
-        welcome: () => {} // to update lastEventId
+          if (readyState.value === READY_STATES.OPEN) {
+            console.info(`[jsenv] server connection lost; retrying to connect`);
+          }
 
+          retryCount++;
+          setTimeout(() => {
+            msSpent += retryAfter;
+            attempt();
+          }, retryAfter);
+        },
+        onOpen: () => {
+          readyState.goTo(READY_STATES.OPEN); // console.info(`[jsenv] connected to server`)
+        }
       });
-    }
+    };
 
-    status.goTo(STATUSES.CONNECTING);
+    attempt();
   };
 
-  let _connect = () => {
-    attemptConnection(eventSourceUrl);
+  const disconnect = () => {
+    if (readyState.value !== READY_STATES.CONNECTING && readyState.value !== READY_STATES.OPEN) {
+      console.warn(`disconnect() ignored because connection is ${readyState.value}`);
+      return null;
+    }
 
-    _connect = () => {
-      attemptConnection(lastEventId ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId) : eventSourceUrl);
-    };
+    return _disconnect();
   };
 
   const removePageUnloadListener = listenPageUnload(() => {
-    if (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED) {
+    if (readyState.value === READY_STATES.CONNECTING || readyState.value === READY_STATES.OPEN) {
       _disconnect();
     }
   });
-
-  const destroy = () => {
-    removePageUnloadListener();
-
-    _disconnect();
-
-    listenersMap.clear();
-    callbacksMap.clear();
-  };
-
   return {
-    status,
-    connect: () => _connect(),
-    addEventCallbacks,
-    disconnect: () => _disconnect(),
-    destroy
+    readyState,
+    connect,
+    disconnect,
+    destroy: () => {
+      removePageUnloadListener();
+      disconnect();
+    }
   };
-};
-
-const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {
-  if (url.indexOf("?") === -1) {
-    url += "?";
-  } else {
-    url += "&";
-  }
-
-  return `${url}last-event-id=${encodeURIComponent(lastEventId)}`;
 }; // const listenPageMightFreeze = (callback) => {
 //   const removePageHideListener = listenEvent(window, "pagehide", (pageHideEvent) => {
 //     if (pageHideEvent.persisted === true) {
@@ -271,7 +132,6 @@ const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {
 //   }
 // }
 
-
 const listenPageUnload = callback => {
   const removePageHideListener = listenEvent(window, "pagehide", pageHideEvent => {
     if (pageHideEvent.persisted !== true) {
@@ -288,20 +148,193 @@ const listenEvent = (emitter, event, callback) => {
   };
 };
 
-const eventsourceConnection = createEventSourceConnection(document.location.href, {
-  retryMaxAttempt: Infinity,
-  retryAllocatedMs: 20 * 1000
+const createEventsManager = ({
+  effect = () => {}
+} = {}) => {
+  const callbacksMap = new Map();
+  let cleanup;
+
+  const addCallbacks = namedCallbacks => {
+    let callbacksMapSize = callbacksMap.size;
+    Object.keys(namedCallbacks).forEach(eventName => {
+      const callback = namedCallbacks[eventName];
+      const existingCallbacks = callbacksMap.get(eventName);
+      let callbacks;
+
+      if (existingCallbacks) {
+        callbacks = existingCallbacks;
+      } else {
+        callbacks = [];
+        callbacksMap.set(eventName, callbacks);
+      }
+
+      callbacks.push(callback);
+    });
+
+    if (effect && callbacksMapSize === 0 && callbacksMapSize.size > 0) {
+      cleanup = effect();
+    }
+
+    let removed = false;
+    return () => {
+      if (removed) return;
+      removed = true;
+      callbacksMapSize = callbacksMap.size;
+      Object.keys(namedCallbacks).forEach(eventName => {
+        const callback = namedCallbacks[eventName];
+        const callbacks = callbacksMap.get(eventName);
+
+        if (callbacks) {
+          const index = callbacks.indexOf(callback);
+
+          if (index > -1) {
+            callbacks.splice(index, 1);
+
+            if (callbacks.length === 0) {
+              callbacksMap.delete(eventName);
+            }
+          }
+        }
+      });
+      namedCallbacks = null; // allow garbage collect
+
+      if (cleanup && typeof cleanup === "function" && callbacksMapSize > 0 && callbacksMapSize.size === 0) {
+        cleanup();
+        cleanup = null;
+      }
+    };
+  };
+
+  const triggerCallbacks = event => {
+    const callbacks = callbacksMap.get(event.type);
+
+    if (callbacks) {
+      callbacks.forEach(callback => {
+        callback(event);
+      });
+    }
+  };
+
+  const destroy = () => {
+    callbacksMap.clear();
+
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+  };
+
+  return {
+    addCallbacks,
+    triggerCallbacks,
+    destroy
+  };
+};
+
+const createWebSocketConnection = (websocketUrl, {
+  protocols = ["jsenv"],
+  useEventsToManageConnection = true,
+  retry = false,
+  retryAfter = 1000,
+  retryMaxAttempt = Infinity,
+  retryAllocatedMs = Infinity
+} = {}) => {
+  const connectionManager = createConnectionManager(({
+    onClosed,
+    onOpen
+  }) => {
+    let socket = new WebSocket(websocketUrl, protocols);
+    let interval;
+
+    const cleanup = () => {
+      if (socket) {
+        socket.onerror = null;
+        socket.onopen = null;
+        socket.onclose = null;
+        socket.onmessage = null;
+        socket = null;
+        clearInterval(interval);
+      }
+    };
+
+    socket.onerror = () => {
+      cleanup();
+      onClosed();
+    };
+
+    socket.onopen = () => {
+      socket.onopen = null;
+      onOpen();
+      interval = setInterval(() => {
+        socket.send('{"type":"ping"}');
+      }, 30_000);
+    };
+
+    socket.onclose = () => {
+      cleanup();
+      onClosed();
+    };
+
+    socket.onmessage = messageEvent => {
+      const event = JSON.parse(messageEvent.data);
+      eventsManager.triggerCallbacks(event);
+    };
+
+    return () => {
+      if (socket) {
+        socket.close();
+        cleanup();
+      }
+    };
+  }, {
+    retry,
+    retryAfter,
+    retryMaxAttempt,
+    retryAllocatedMs
+  });
+  const eventsManager = createEventsManager({
+    effect: () => {
+      if (useEventsToManageConnection) {
+        connectionManager.connect();
+        return () => {
+          connectionManager.disconnect();
+        };
+      }
+
+      return null;
+    }
+  });
+  return {
+    readyState: connectionManager.readyState,
+    connect: connectionManager.connect,
+    disconnect: connectionManager.disconnect,
+    listenEvents: namedCallbacks => {
+      return eventsManager.addCallbacks(namedCallbacks);
+    },
+    destroy: () => {
+      connectionManager.destroy();
+      eventsManager.destroy();
+    }
+  };
+};
+
+/* globals self */
+const websocketScheme = self.location.protocol === "https" ? "wss" : "ws";
+const websocketUrl = `${websocketScheme}://${self.location.host}${self.location.pathname}${self.location.search}`;
+const websocketConnection = createWebSocketConnection(websocketUrl, {
+  retry: true,
+  retryAllocatedMs: 10_000
 });
 const {
-  status,
+  readyState,
   connect,
-  addEventCallbacks,
-  disconnect
-} = eventsourceConnection;
+  disconnect,
+  listenEvents
+} = websocketConnection;
 window.__server_events__ = {
-  addEventCallbacks,
-  status,
+  readyState,
   connect,
-  disconnect
+  disconnect,
+  listenEvents
 };
 connect();