From f410648e7945e7672442ed18ad875d1fa8cc970b Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 1 Dec 2021 15:54:46 -0500 Subject: [PATCH] Switching to websocket-ts. #247 (#515) --- package.json | 3 +- src/shared/components/app/navbar.tsx | 10 ---- src/shared/services/WebSocketService.ts | 64 ++++++++++++------------- yarn.lock | 15 ++---- 4 files changed, 38 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 74b1d87d..04241d71 100644 --- a/package.json +++ b/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", diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 0f8d6471..2a40915d 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -75,8 +75,6 @@ export class Navbar extends Component { 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 { 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 () { diff --git a/src/shared/services/WebSocketService.ts b/src/shared/services/WebSocketService.ts index 9d4c5f6b..85a1af85 100644 --- a/src/shared/services/WebSocketService.ts +++ b/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; 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 = { - reconnect: true, - }; - obs.next(res); - } - - firstConnect = false; - }; + if (!firstConnect) { + let res: WebSocketJsonResponse = { + 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()); } diff --git a/yarn.lock b/yarn.lock index 0ebbf570..c0c3a80f 100644 --- a/yarn.lock +++ b/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"