PEER-234: Add functioning collab UI

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

docker-compose.yaml

@@ -169,6 +169,8 @@ services:
     environment:
       - VITE_USER_SERVICE=http://${USER_SERVICE_NAME}:${USER_EXPRESS_PORT}
       - VITE_QUESTION_SERVICE=http://${QUESTION_SERVICE_NAME}:${QUESTION_EXPRESS_PORT}
+      - VITE_COLLAB_SERVICE=http://${COLLAB_SERVICE_NAME}:${COLLAB_EXPRESS_PORT}
+      - VITE_COLLAB_WS=ws://${COLLAB_SERVICE_NAME}:${COLLAB_EXPRESS_PORT}
       - VITE_MATCHING_SERVICE=http://${MATCHING_SERVICE_NAME}:${MATCHING_EXPRESS_PORT}
       - FRONTEND_PORT=${FRONTEND_PORT}
     depends_on:

frontend/entrypoint.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
 
-envsubst '${FRONTEND_PORT} ${VITE_USER_SERVICE} ${VITE_QUESTION_SERVICE} ${VITE_COLLAB_SERVICE}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf
+envsubst '${FRONTEND_PORT} ${VITE_USER_SERVICE} ${VITE_QUESTION_SERVICE} ${VITE_COLLAB_SERVICE} ${VITE_COLLAB_WS}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf
 
 nginx -g 'daemon off;'

frontend/nginx.conf.template

@@ -34,6 +34,17 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
+    location /collab-ws {
+        proxy_pass ${VITE_COLLAB_WS};
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
     access_log /var/log/nginx/access.log;
     error_log /var/log/nginx/error.log;
 }

frontend/package.json

@@ -49,8 +49,9 @@
     "remark-math": "^6.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "ws": "^8.18.0",
     "y-codemirror.next": "^0.3.5",
-    "y-socket.io": "^1.1.3",
+    "y-websocket": "^2.0.4",
     "yjs": "^13.6.20",
     "zod": "^3.23.8"
   },
@@ -61,6 +62,7 @@
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/ws": "^8.5.12",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",

frontend/src/lib/hooks/use-collab.ts

@@ -2,11 +2,11 @@ import type { LanguageName } from '@uiw/codemirror-extensions-langs';
 import type { Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { yCollab } from 'y-codemirror.next';
-import { SocketIOProvider } from 'y-socket.io';
+import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 
 import { extensions as baseExtensions, getLanguage } from '@/lib/editor/extensions';
-import { COLLAB_SERVICE } from '@/services/api-clients';
+import { COLLAB_WS } from '@/services/api-clients';
 
 // credit: https://github.com/yjs/y-websocket
 const usercolors = [
@@ -39,7 +39,7 @@ export const useCollab = (roomId: string) => {
       const doc = new Y.Doc();
       let provider = null;
       try {
-        provider = new SocketIOProvider(COLLAB_SERVICE, roomId, doc, {});
+        provider = new WebsocketProvider(COLLAB_WS, roomId, doc);
       } catch (err) {
         const { name, message } = err as Error;
         console.error(
@@ -50,9 +50,20 @@ export const useCollab = (roomId: string) => {
       const ytext = doc.getText('codemirror');
       const undoManager = new Y.UndoManager(ytext);
       const awareness = provider.awareness;
-      const { color, light } = getRandomColor();
 
+      provider.on('status', (event: unknown) => {
+        const ev = event as { status?: string } | undefined;
+        console.log(`Connection Status: ${ev?.status}`);
+      });
+
+      // TODO: Update state store, then display avatars
+      awareness.on('update', () => {
+        console.log(awareness.getStates().values()); // Array of name, color, light
+      });
+
+      const { color, light } = getRandomColor();
       // TODO: Get user name
+      // TODO: Set user ID
       awareness.setLocalStateField('user', {
         name: `Anon`,
         color: color,

frontend/src/services/api-clients.ts

@@ -3,6 +3,7 @@ import axios from 'axios';
 export const USER_SERVICE = '/user-service';
 export const QUESTION_SERVICE = '/question-service';
 export const COLLAB_SERVICE = '/collaboration-service';
+export const COLLAB_WS = '/collab-ws';
 
 const getApiClientBaseConfig = (service: string) => ({
   baseURL: service,

frontend/vite.config.ts

@@ -44,6 +44,10 @@ export default defineConfig(({ mode }) => {
             '*': '/',
           },
         },
+        '/collab-ws': {
+          target: `${env.VITE_COLLAB_SERVICE.replace('http', 'ws')}`,
+          ws: true,
+        },
       },
     },
   };