Add websocket provider

I'd prefer WebRTC over websocket here (especially as the WS
implementation isn't encrypted; however I've run into issues around
cross browser collaboration - namely:

yjs/y-webrtc#56
yjs/y-webrtc#53
yjs/y-webrtc#19

For now having websocket allows iterating on the editor and the UX until
I can look at those issues more in depth.

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint src",
     "fmt": "prettier --ignore-unknown --write --ignore-path .gitignore .",
     "fmt-check": "prettier --ignore-unknown --list-different --ignore-path .gitignore .",
-    "run-signaling-server": "node_modules/y-webrtc/bin/server.js"
+    "ws-server": "PORT=4444 y-websocket",
+    "rtc-server": "PORT=4444 node_modules/y-webrtc/bin/server.js"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.11.0",
@@ -29,6 +30,7 @@
     "process": "^0.11.10",
     "y-codemirror.next": "^0.3.2",
     "y-webrtc": "^10.2.6",
+    "y-websocket": "^1.5.0",
     "yjs": "^13.6.10"
   },
   "devDependencies": {

src/components/editor.tsx

@@ -10,12 +10,13 @@ import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import * as cmView from "@codemirror/view";
 import { yCollab, yUndoManagerKeymap } from "y-codemirror.next";
-import { WebrtcProvider } from "y-webrtc";
 import * as Y from "yjs";
 
+import { Provider } from "../session";
+
 interface EditorProps {
   text: Y.Text;
-  provider: WebrtcProvider;
+  provider: Provider;
 }
 
 const Editor = ({ text, provider }: EditorProps) => {

src/session.ts

@@ -1,4 +1,5 @@
 import { WebrtcProvider } from "y-webrtc";
+import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
 
 import { randomIshId } from "./utils";
@@ -36,31 +37,43 @@ export function getSessionFromURL(): Session {
   return new Session(room, password);
 }
 
-export function getSignalingServerURL(): string {
+// TODO: Make this configurable.
+export function getServerURL(): string {
   const url = new URL(window.location.href);
   url.port = "4444";
   return `ws://${url.host}`;
 }
 
+const MODE: "rtc" | "ws" = "ws";
+
+export type Provider = WebsocketProvider | WebrtcProvider;
+
 export class Session {
   room: string;
   password: string;
   doc: Y.Doc;
   text: Y.Text;
-  provider: WebrtcProvider;
+  provider: Provider;
 
   constructor(room: string, password: string) {
     this.room = room;
     this.password = password;
     this.doc = new Y.Doc();
     this.text = this.doc.getText();
 
-    this.provider = new WebrtcProvider(room, this.doc, {
-      // TODO: Make configurable
-      signaling: [getSignalingServerURL()],
-      filterBcConns: false,
-      password: password,
-    });
+    if (MODE == "ws") {
+      this.provider = new WebsocketProvider(
+        getServerURL(),
+        this.room,
+        this.doc,
+      );
+    } else {
+      this.provider = new WebrtcProvider(room, this.doc, {
+        signaling: [getServerURL()],
+        filterBcConns: false,
+        password: password,
+      });
+    }
   }
 
   contents(): string {