Merge pull request #193 from ls1intum/feature/base64-ydoc-sync-over-websocket

feat: Use base64 strings in library functions for yjs syncs

Author: egenerse

library/lib/apollon-editor.tsx

@@ -269,12 +269,12 @@ export class ApollonEditor {
     }
   }
 
-  public sendBroadcastMessage(sendFn: (data: Uint8Array) => void) {
+  public sendBroadcastMessage(sendFn: (base64Data: string) => void) {
     this.syncManager.setSendFunction(sendFn)
   }
 
-  public receiveBroadcastedMessage(update: Uint8Array) {
-    this.syncManager.handleReceivedData(update)
+  public receiveBroadcastedMessage(base64Data: string) {
+    this.syncManager.handleReceivedData(base64Data)
   }
 
   public updateDiagramTitle(name: string) {
@@ -312,4 +312,5 @@ export class ApollonEditor {
   public addOrUpdateAssessment(assessment: Apollon.Assessment): void {
     this.diagramStore.getState().addOrUpdateAssessment(assessment)
   }
+  public uint8ToBase64 = YjsSyncClass.uint8ToBase64
 }

library/lib/store/yjsSync.ts

@@ -16,7 +16,7 @@ enum MessageType {
   YjsUpdate = 1,
 }
 
-type SendFunction = (data: Uint8Array) => void
+type SendFunction = (data: string) => void
 
 export class YjsSyncClass {
   private readonly stopYjsObserver: () => void
@@ -44,23 +44,27 @@ export class YjsSyncClass {
     this.sendFunction = sendFn
   }
 
-  public applyUpdate = (update: Uint8Array, transactionOrigin: string) => {
+  private applyUpdate = (update: Uint8Array, transactionOrigin: string) => {
     Y.applyUpdate(this.ydoc, update, transactionOrigin)
   }
 
-  public handleReceivedData = (data: Uint8Array) => {
-    const messageType = data[0]
+  public handleReceivedData = (base64Data: string) => {
+    // Decode the base64 string to Uint8Array
+    const decodedData = this.base64ToUint8(base64Data)
+    const messageType = decodedData[0]
 
     if (messageType === MessageType.YjsUpdate) {
-      const update = data.slice(1)
+      const update = decodedData.slice(1)
       this.applyUpdate(update, "remote")
     } else if (messageType === MessageType.YjsSYNC) {
       if (this.sendFunction) {
         const syncMessage = Y.encodeStateAsUpdate(this.ydoc)
         const fullMessage = new Uint8Array(1 + syncMessage.length)
         fullMessage[0] = MessageType.YjsUpdate
         fullMessage.set(syncMessage, 1)
-        this.sendFunction(fullMessage)
+
+        const base64Message = YjsSyncClass.uint8ToBase64(fullMessage)
+        this.sendFunction(base64Message)
       }
     }
   }
@@ -113,7 +117,8 @@ export class YjsSyncClass {
         const fullMessage = new Uint8Array(1 + syncMessage.length)
         fullMessage[0] = MessageType.YjsUpdate
         fullMessage.set(syncMessage, 1)
-        this.sendFunction(fullMessage)
+        const base64Message = YjsSyncClass.uint8ToBase64(fullMessage)
+        this.sendFunction(base64Message)
       }
     }
 
@@ -130,4 +135,23 @@ export class YjsSyncClass {
       this.ydoc.off("update", handleYjsUpdate)
     }
   }
+
+  /**
+   *  Convert Uint8Array to Base64 string
+   */
+  static uint8ToBase64(uint8: Uint8Array): string {
+    return btoa(String.fromCharCode(...uint8))
+  }
+
+  /**
+   * Convert Base64 string to Uint8Array
+   */
+  private base64ToUint8(base64: string): Uint8Array {
+    const binary = atob(base64)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i)
+    }
+    return bytes
+  }
 }

standalone/server/src/relaySocketServer.ts

@@ -44,13 +44,22 @@ export const startSocketServer = (): void => {
 
     ws.on("message", (message: WebSocket.RawData) => {
       const clients = diagrams.get(ws.diagramId!)
-
       if (!clients) return
 
+      // Convert message to string if it's a Buffer or string
+      // This is necessary because WebSocket messages can be sent as Buffer or string
+      // and we want to ensure we send a string to all clients
+      const messageString =
+        typeof message === "string"
+          ? message
+          : message instanceof Buffer
+            ? message.toString("utf-8")
+            : ""
+
       let count = 0
       clients.forEach((client) => {
         if (client !== ws && client.readyState === WebSocket.OPEN) {
-          client.send(message)
+          client.send(messageString)
           count++
         }
       })

standalone/webapp/src/pages/ApollonWithConnection.tsx

@@ -10,7 +10,7 @@ import {
 import { useNavigate, useParams, useSearchParams } from "react-router"
 import { toast } from "react-toastify"
 import { backendURL, backendWSSUrl } from "@/constants"
-import { DiagramView } from "@/types"
+import { DiagramView, WebSocketMessage } from "@/types"
 
 const fetchDiagramData = (diagramId: string): Promise<any> => {
   return fetch(`${backendURL}/api/${diagramId}`, {
@@ -112,23 +112,33 @@ export const ApollonWithConnection: React.FC = () => {
             )
 
             // Handle incoming Yjs updates
-            websocketRef.current.onmessage = (event: MessageEvent<Blob>) => {
-              event.data.arrayBuffer().then((buffer: ArrayBuffer) => {
-                const data = new Uint8Array(buffer)
-                instance?.receiveBroadcastedMessage(data)
-              })
+            websocketRef.current.onmessage = (event: MessageEvent<string>) => {
+              const receiveWebSocketMessage = JSON.parse(
+                event.data
+              ) as WebSocketMessage
+              instance?.receiveBroadcastedMessage(
+                receiveWebSocketMessage.diagramData
+              )
             }
 
             // Wait until socket is open before starting sync
             websocketRef.current.onopen = () => {
-              instance?.sendBroadcastMessage((data) => {
+              instance?.sendBroadcastMessage((diagramData) => {
                 if (websocketRef.current?.readyState === WebSocket.OPEN) {
-                  websocketRef.current.send(data)
+                  const sendData = { diagramData }
+                  websocketRef.current.send(JSON.stringify(sendData))
                 } else {
                   console.warn("Tried to send while WebSocket not open")
                 }
               })
-              websocketRef.current?.send(new Uint8Array([0])) // Init message
+
+              const initialSyncMessageInUintArray = instance?.uint8ToBase64(
+                new Uint8Array([0])
+              )
+              const initialMessage = JSON.stringify({
+                diagramData: initialSyncMessageInUintArray,
+              })
+              websocketRef.current?.send(initialMessage)
             }
 
             websocketRef.current.onerror = (err) => {

standalone/webapp/src/types/WebSocketMessage.ts

@@ -0,0 +1,4 @@
+export type WebSocketMessage = {
+  // new fields can be added like collaborators name-color, etc.
+  diagramData: string
+}

standalone/webapp/src/types/index.ts

@@ -1 +1,2 @@
 export * from "./ModalTypes"
+export * from "./WebSocketMessage"