Merge branch 'websocket-ts' into 'main'

@gamestdio/websocket -> websocket-ts

See merge request soapbox-pub/soapbox!3285

package.json

@@ -48,7 +48,6 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@fontsource/tajawal": "^5.1.0",
     "@fontsource/vazirmatn": "^5.1.0",
-    "@gamestdio/websocket": "^0.3.2",
     "@lexical/clipboard": "^0.18.0",
     "@lexical/hashtag": "^0.18.0",
     "@lexical/link": "^0.18.0",
@@ -150,6 +149,7 @@
     "vite-plugin-compile-time": "^0.2.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-static-copy": "^1.0.6",
+    "websocket-ts": "^2.1.5",
     "zod": "^3.23.5",
     "zustand": "^5.0.0"
   },

src/stream.ts

@@ -1,4 +1,4 @@
-import WebSocketClient from '@gamestdio/websocket';
+import { ExponentialBackoff, Websocket, WebsocketBuilder } from 'websocket-ts';
 
 import { getAccessToken } from 'soapbox/utils/auth.ts';
 
@@ -9,7 +9,7 @@ const randomIntUpTo = (max: number) => Math.floor(Math.random() * Math.floor(max
 interface ConnectStreamCallbacks {
   onConnect(): void;
   onDisconnect(): void;
-  onReceive(websocket: WebSocket, data: unknown): void;
+  onReceive(websocket: Websocket, data: unknown): void;
 }
 
 type PollingRefreshFn = (dispatch: AppDispatch, done?: () => void) => void
@@ -41,7 +41,7 @@ export function connectStream(
       }
     };
 
-    let subscription: WebSocket;
+    let subscription: Websocket;
 
     // If the WebSocket fails to be created, don't crash the whole page,
     // just proceed without a subscription.
@@ -98,29 +98,36 @@ export default function getStream(
   accessToken: string,
   stream: string,
   { connected, received, disconnected, reconnected }: {
-    connected: ((this: WebSocket, ev: Event) => any) | null;
+    connected: ((ev: Event) => any) | null;
     received: (data: any) => void;
-    disconnected: ((this: WebSocket, ev: Event) => any) | null;
-    reconnected: ((this: WebSocket, ev: Event) => any);
+    disconnected: ((ev: Event) => any) | null;
+    reconnected: ((ev: Event) => any);
   },
 ) {
   const params = [ `stream=${stream}` ];
 
-  const ws = new WebSocketClient(`${streamingAPIBaseURL}/api/v1/streaming/?${params.join('&')}`, accessToken as any);
-
-  ws.onopen      = connected;
-  ws.onclose     = disconnected;
-  ws.onreconnect = reconnected;
-
-  ws.onmessage   = (e) => {
-    if (!e.data) return;
-    try {
-      received(JSON.parse(e.data));
-    } catch (error) {
-      console.error(e);
-      console.error(`Could not parse the above streaming event.\n${error}`);
-    }
-  };
+  const ws = new WebsocketBuilder(`${streamingAPIBaseURL}/api/v1/streaming/?${params.join('&')}`)
+    .withProtocols(accessToken)
+    .withBackoff(new ExponentialBackoff(1000, 6))
+    .onOpen((_ws, ev) => {
+      connected?.(ev);
+    })
+    .onClose((_ws, ev) => {
+      disconnected?.(ev);
+    })
+    .onReconnect((_ws, ev) => {
+      reconnected(ev);
+    })
+    .onMessage((_ws, e) => {
+      if (!e.data) return;
+      try {
+        received(JSON.parse(e.data));
+      } catch (error) {
+        console.error(e);
+        console.error(`Could not parse the above streaming event.\n${error}`);
+      }
+    })
+    .build();
 
   return ws;
 }

yarn.lock

@@ -1482,11 +1482,6 @@
     tslib "2"
     typescript "5"
 
-"@gamestdio/websocket@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@gamestdio/websocket/-/websocket-0.3.2.tgz#321ba0976ee30fd14e51dbf8faa85ce7b325f76a"
-  integrity sha512-J3n5SKim+ZoLbe44hRGI/VYAwSMCeIJuBy+FfP6EZaujEpNchPRFcIsVQLWAwpU1bP2Ji63rC+rEUOd1vjUB6Q==
-
 "@gitbeaker/core@^35.8.0":
   version "35.8.0"
   resolved "https://registry.yarnpkg.com/@gitbeaker/core/-/core-35.8.0.tgz#8e55950dd6c45e6b48791432a1fa2c13b9460d39"