deps: use modern websocket implementation

Author: TheMythologist

package.json

@@ -46,7 +46,7 @@
     "@convergencelabs/ace-collab-ext": "^0.6.0",
     "event-emitter-es6": "^1.1.5",
     "logdown": "^3.3.1",
-    "reconnecting-websocket": "^4.4.0",
+    "partysocket": "^1.0.3",
     "sharedb": "^5.1.1"
   }
 }

source/sharedb-ace-binding.ts

@@ -7,10 +7,7 @@
 
 // TODO: support reconnects with same id
 
-// TODO: We keep getting:
-// connection to 'ws...' failed: Invalid frame header
-
-import WebSocket from 'reconnecting-websocket';
+import { WebSocket } from 'partysocket';
 import Logdown from 'logdown';
 import sharedb from 'sharedb/lib/sharedb';
 import type {
@@ -155,7 +152,7 @@ class SharedbAceBinding {
     // this.radarManager.removeView();
     this.initializeLocalPresence();
     for (const [id, update] of Object.entries(this.usersPresence.remotePresences)) {
-      this.initializeRemotePresence(id, update);
+      this.updatePresence(id, update);
     }
   };
 
@@ -164,12 +161,13 @@ class SharedbAceBinding {
    */
   listen = () => {
     // TODO: Also update view on window resize
+    // TODO: Clicking on radar indicator is not exactly accurate
     this.session.on('change', this.onLocalChange);
     this.session.on('changeScrollTop', this.onLocalChangeScrollTop);
     this.doc.on('op', this.onRemoteChange);
     this.doc.on('load', this.onRemoteReload);
 
-    this.usersPresence.on('receive', this.onPresenceUpdate);
+    this.usersPresence.on('receive', this.updatePresence);
     this.session.selection.on('changeCursor', this.onLocalCursorChange);
     this.session.selection.on('changeSelection', this.onLocalSelectionChange);
   };
@@ -183,7 +181,7 @@ class SharedbAceBinding {
     this.doc.off('op', this.onRemoteChange);
     this.doc.off('load', this.onRemoteReload);
 
-    this.usersPresence.off('receive', this.onPresenceUpdate);
+    this.usersPresence.off('receive', this.updatePresence);
     this.session.selection.off('changeCursor', this.onLocalCursorChange);
     this.session.selection.off('changeSelection', this.onLocalSelectionChange);
   };
@@ -347,7 +345,7 @@ class SharedbAceBinding {
     }
   };
 
-  onPresenceUpdate = (id: string, update: PresenceUpdate) => {
+  updatePresence = (id: string, update: PresenceUpdate) => {
     // TODO: logger and error handling
     // TODO: separate into multiple handlers
     if (update === null) {
@@ -387,19 +385,19 @@ class SharedbAceBinding {
     }
 
     if (update.radarViewRows) {
-      const intialRows = AceViewportUtil.indicesToRows(
+      const rows = AceViewportUtil.indicesToRows(
         this.editor,
         update.radarViewRows.start,
         update.radarViewRows.end
       );
       try {
-        this.radarManager.setViewRows(id, intialRows);
+        this.radarManager.setViewRows(id, rows);
       } catch {
         this.radarManager.addView(
           id,
           update.user.name,
           update.user.color,
-          intialRows,
+          rows,
           update.radarCursorRow || 0
         );
       }
@@ -451,47 +449,6 @@ class SharedbAceBinding {
     });
   };
 
-  // TODO: Actually the same as onPresenceUpdate
-  initializeRemotePresence = (id: string, update: PresenceUpdate) => {
-    if (update.cursorPos) {
-      try {
-        this.cursorManager.setCursor(id, update.cursorPos);
-      } catch {
-        this.cursorManager.addCursor(id, update.user.name, update.user.color, update.cursorPos);
-      }
-    }
-
-    if (update.selectionRange) {
-      const ranges = AceRangeUtil.fromJson(update.selectionRange);
-      try {
-        this.selectionManager.setSelection(id, ranges);
-      } catch {
-        this.selectionManager.addSelection(id, update.user.name, update.user.color, ranges);
-      }
-    }
-
-    if (update.radarViewRows) {
-      const rows = AceViewportUtil.indicesToRows(
-        this.editor,
-        update.radarViewRows.start,
-        update.radarViewRows.end
-      );
-
-      try {
-        this.radarManager.setViewRows(id, rows);
-        this.radarManager.setCursorRow(id, update.radarCursorRow || 0);
-      } catch {
-        this.radarManager.addView(
-          id,
-          update.user.name,
-          update.user.color,
-          rows,
-          update.radarCursorRow || 0
-        );
-      }
-    }
-  };
-
   destroyPresence = () => {
     // TODO: logger and error handling
     this.localPresence?.destroy();

source/sharedb-ace.ts

@@ -5,7 +5,7 @@
  * @license MIT
  */
 
-import WebSocket from 'reconnecting-websocket';
+import { WebSocket } from 'partysocket';
 import EventEmitter from 'event-emitter-es6';
 import type sharedb from 'sharedb/lib/sharedb';
 import { Connection as sharedbConnection } from 'sharedb/lib/client';

source/types.ts

@@ -1,4 +1,4 @@
-import type WebSocket from 'reconnecting-websocket';
+import type { WebSocket } from 'partysocket';
 
 export interface SharedbAceUser {
   id: string;

yarn.lock

@@ -2161,6 +2161,11 @@ event-emitter-es6@^1.1.5:
   resolved "https://registry.yarnpkg.com/event-emitter-es6/-/event-emitter-es6-1.1.5.tgz#ef95311b2e17aa39be763b031ce4af7ee9cb7849"
   integrity sha1-75UxGy4Xqjm+djsDHOSvfunLeEk=
 
+event-target-shim@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-6.0.2.tgz#ea5348c3618ee8b62ff1d344f01908ee2b8a2b71"
+  integrity sha512-8q3LsZjRezbFZ2PN+uP+Q7pnHUMmAOziU2vA2OwoFaKIXxlxl38IylhSSgUorWu/rf4er67w0ikBqjBFk/pomA==
+
 events@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -3398,6 +3403,13 @@ parse5@6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+partysocket@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/partysocket/-/partysocket-1.0.3.tgz#58cf1494d44900a7377592683d171fddd3d9c543"
+  integrity sha512-7sSojS4oCRK1Fe1h+Sa0Za5dwOf+M9VksQlynD8yqwGpLvnO4oxx9ppmOSeh6CJTMbF5gbnvUQKMK525QSBdBw==
+  dependencies:
+    event-target-shim "^6.0.2"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -3576,11 +3588,6 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.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==
-
 reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"