Add yjs on server and frontend implementation

Author: wr1159

collab-service/app/server.js

@@ -3,9 +3,13 @@ import http from "http";
 import index from "./index.js";
 import { Server } from "socket.io";
 import { addMessageToChat } from "./model/repository.js";
+import ywsUtils from "y-websocket/bin/utils";
+import { WebSocketServer } from "ws";
+const setupWSConnection = ywsUtils.setupWSConnection;
 
 const PORT = process.env.PORT || 3002;
 const server = http.createServer(index);
+const docs = ywsUtils.docs;
 
 const io = new Server(server, {
   cors: {
@@ -16,6 +20,27 @@ const io = new Server(server, {
   },
 });
 
+const yjsWs = new WebSocketServer({ noServer: true });
+yjsWs.on("connection", (conn, req) => {
+  setupWSConnection(conn, req, {
+    gc: req.url.slice(1) !== "ws/prosemirror-versions",
+  });
+});
+
+setInterval(() => {
+  let conns = 0;
+  docs.forEach((doc) => {
+    conns += doc.conns.size;
+  });
+  const stats = {
+    conns,
+    docs: docs.size,
+    websocket: `ws://localhost:${PORT}`,
+    http: `http://localhost:${PORT}`,
+  };
+  console.log(`${new Date().toISOString()} Stats: ${JSON.stringify(stats)}`);
+}, 10000);
+
 io.on("connection", (socket) => {
   console.log("User connected to Socket.IO");
 
@@ -39,6 +64,19 @@ io.on("connection", (socket) => {
   });
 });
 
+server.on("upgrade", (request, socket, head) => {
+  const pathname = new URL(request.url, `http://${request.headers.host}`)
+    .pathname;
+
+  if (pathname.startsWith("/yjs")) {
+    yjsWs.handleUpgrade(request, socket, head, (ws) => {
+      yjsWs.emit("connection", ws, request);
+    });
+  } else {
+    socket.destroy();
+  }
+});
+
 connectToMongo()
   .then(() => {
     server.listen(PORT, () => {

frontend/app/app/collab/[room_id]/page.tsx

@@ -0,0 +1,16 @@
+import dynamic from "next/dynamic";
+
+export const MonacoEditor = dynamic(
+  () => import("@/components/collab/monaco-editor"),
+  {
+    ssr: false,
+  }
+);
+
+export default function CollabRoom({
+  params,
+}: {
+  params: { room_id: string };
+}) {
+  return <MonacoEditor roomId={params.room_id} />;
+}

frontend/components/collab/monaco-editor.tsx

@@ -0,0 +1,60 @@
+"use client";
+import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import { MonacoBinding } from "y-monaco";
+import { editor as MonacoEditor } from "monaco-types";
+
+import React, { useEffect, useMemo, useState } from "react";
+import Editor from "@monaco-editor/react";
+
+export default function MonacoEdit({ roomId }: { roomId: string }) {
+  const ydoc = useMemo(() => new Y.Doc(), []);
+  const [editor, setEditor] =
+    useState<MonacoEditor.IStandaloneCodeEditor | null>(null);
+  const [provider, setProvider] = useState<WebsocketProvider | null>(null);
+  const [binding, setBinding] = useState<MonacoBinding | null>(null);
+
+  // this effect manages the lifetime of the Yjs document and the provider
+  useEffect(() => {
+    const provider = new WebsocketProvider(
+      "ws://localhost:3002/yjs",
+      roomId,
+      ydoc
+    );
+    console.log(provider);
+    setProvider(provider);
+    return () => {
+      provider?.destroy();
+      ydoc.destroy();
+    };
+  }, [ydoc, roomId]);
+
+  // this effect manages the lifetime of the editor binding
+  useEffect(() => {
+    if (provider == null || editor == null) {
+      console.log(provider, editor);
+      return;
+    }
+    const monacoBinding = new MonacoBinding(
+      ydoc.getText(),
+      editor.getModel()!,
+      new Set([editor]),
+      provider?.awareness
+    );
+    setBinding(monacoBinding);
+    return () => {
+      monacoBinding.destroy();
+    };
+  }, [ydoc, provider, editor]);
+
+  return (
+    <Editor
+      height="90vh"
+      defaultValue="// some comment"
+      defaultLanguage="javascript"
+      onMount={(editor) => {
+        setEditor(editor);
+      }}
+    />
+  );
+}