Switching to websocket-ts. #247 (#515)

package.json

@@ -39,14 +39,13 @@
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "moment": "^2.29.1",
-    "reconnecting-websocket": "^4.4.0",
     "register-service-worker": "^1.7.2",
     "rxjs": "^7.4.0",
     "serialize-javascript": "^6.0.0",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.11.2",
     "tributejs": "^5.1.3",
-    "ws": "^8.2.3"
+    "websocket-ts": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/shared/components/app/navbar.tsx

@@ -75,8 +75,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   componentDidMount() {
     // Subscribe to jwt changes
     if (isBrowser()) {
-      this.websocketEvents();
-
       this.searchTextField = createRef();
       console.log(`isLoggedIn = ${this.state.isLoggedIn}`);
 
@@ -629,14 +627,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return !adminOnly || this.canAdmin;
   }
 
-  /// Listens for some websocket errors
-  websocketEvents() {
-    let msg = i18n.t("websocket_disconnected");
-    WebSocketService.Instance.closeEventListener(() => {
-      console.error(msg);
-    });
-  }
-
   requestNotificationPermission() {
     if (UserService.Instance.myUserInfo) {
       document.addEventListener("DOMContentLoaded", function () {

src/shared/services/WebSocketService.ts

@@ -1,49 +1,53 @@
 import { PersonViewSafe, WebSocketJsonResponse } from "lemmy-js-client";
-import {
-  default as ReconnectingWebSocket,
-  Options as WSOptions,
-} from "reconnecting-websocket";
 import { Observable } from "rxjs";
 import { share } from "rxjs/operators";
+import {
+  ExponentialBackoff,
+  Websocket as WS,
+  WebsocketBuilder,
+} from "websocket-ts";
 import { wsUri } from "../env";
 import { isBrowser } from "../utils";
 
 export class WebSocketService {
   private static _instance: WebSocketService;
-  private ws: ReconnectingWebSocket;
-  public wsOptions: WSOptions = {
-    connectionTimeout: 5000,
-    maxRetries: 10,
-  };
+  private ws: WS;
   public subject: Observable<any>;
 
   public admins: PersonViewSafe[];
   public banned: PersonViewSafe[];
 
   private constructor() {
-    this.ws = new ReconnectingWebSocket(wsUri, [], this.wsOptions);
     let firstConnect = true;
 
     this.subject = new Observable((obs: any) => {
-      this.ws.onmessage = e => {
-        try {
-          obs.next(JSON.parse(e.data));
-        } catch (err) {
-          console.log(err);
-        }
-      };
-      this.ws.onopen = () => {
-        console.log(`Connected to ${wsUri}`);
+      this.ws = new WebsocketBuilder(wsUri)
+        .onMessage((_i, e) => {
+          try {
+            obs.next(JSON.parse(e.data.toString()));
+          } catch (err) {
+            console.log(err);
+          }
+        })
+        .onOpen(() => {
+          console.log(`Connected to ${wsUri}`);
 
-        if (!firstConnect) {
-          let res: WebSocketJsonResponse<any> = {
-            reconnect: true,
-          };
-          obs.next(res);
-        }
-
-        firstConnect = false;
-      };
+          if (!firstConnect) {
+            let res: WebSocketJsonResponse<any> = {
+              reconnect: true,
+            };
+            obs.next(res);
+          }
+          firstConnect = false;
+        })
+        .onRetry(() => {
+          console.log("Retrying websocket connection...");
+        })
+        .onClose(() => {
+          console.error("Websocket closed.");
+        })
+        .withBackoff(new ExponentialBackoff(100, 7))
+        .build();
     }).pipe(share());
 
     if (isBrowser()) {
@@ -60,10 +64,6 @@ export class WebSocketService {
     this.ws.send(data);
   }
 
-  public closeEventListener(listener: (event: CloseEvent) => void) {
-    this.ws.addEventListener("close", listener);
-  }
-
   public static get Instance() {
     return this._instance || (this._instance = new this());
   }

yarn.lock

@@ -7061,11 +7061,6 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
-reconnecting-websocket@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
-  integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
-
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -8646,6 +8641,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+websocket-ts@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/websocket-ts/-/websocket-ts-1.1.1.tgz#de482da5e0c714ebc58a43fe94157e5a855f2828"
+  integrity sha512-rm+S60J74Ckw5iizzgID12ju+OfaHAa6dhXhULIOrXkl0e05RzxfY42/vMStpz5jWL3iz9mkyjPcFUY1IgI0fw==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -8761,11 +8761,6 @@ ws@^8.1.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.0.tgz#0b738cd484bfc9303421914b11bb4011e07615bb"
   integrity sha512-uYhVJ/m9oXwEI04iIVmgLmugh2qrZihkywG9y5FfZV2ATeLIzHf93qs+tUNqlttbQK957/VX3mtwAS+UfIwA4g==
 
-ws@^8.2.3:
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
-  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
-
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"