Removed Namespaces, Fixed Backend & Refactored Code

code/client/src/domain/editor/hooks/useEvents.ts

@@ -16,7 +16,7 @@ function useEvents(fugueOperations: FugueDomainOperations, { socket }: Communica
   }
 
   useSocketListeners(socket, {
-    'document:operation': onOperation,
+    operation: onOperation,
   });
 }
 

code/client/src/domain/editor/operations/history/operations.ts

@@ -25,7 +25,7 @@ export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperation
       .flat()
       .filter(operation => operation !== undefined && operation !== null);
 
-    socket.emit('document:operation', communicationOperations);
+    socket.emit('operation', communicationOperations);
   };
 
   function getOperation(operation: HistoryOperation) {

code/client/src/domain/editor/operations/input/operations.ts

@@ -11,43 +11,43 @@ export default (fugue: Fugue, { socket }: Communication): InputDomainOperations
   function insertCharacter(char: string, cursor: Cursor, styles: InlineStyle[] = []) {
     if (char.length !== 1) throw new Error('Invalid character');
     const operations = fugue.insertLocal(cursor, nodeInsert(char, styles));
-    socket.emit('document:operation', operations);
+    socket.emit('operation', operations);
   }
 
   function insertLineBreak(cursor: Cursor) {
     const operations = fugue.insertLocal(cursor, '\n');
     const styleOperation = fugue.updateBlockStyleLocal(cursor.line + 1, 'paragraph', true);
-    socket.emit('document:operation', [styleOperation, ...operations]);
+    socket.emit('operation', [styleOperation, ...operations]);
   }
 
   function deleteCharacter(cursor: Cursor) {
     // don't delete line if it's not a paragraph - this is to prevent deleting the block style & line simultaneously
     if (cursor.column === 0 && fugue.getBlockStyle(cursor.line) !== 'paragraph') return;
     const operations = fugue.deleteLocalByCursor(cursor);
-    if (operations) socket.emit('document:operation', operations);
+    if (operations) socket.emit('operation', operations);
   }
 
   function deleteSelection(selection: Selection) {
     const operations = fugue.deleteLocal(selection);
-    socket.emit('document:operation', operations);
+    socket.emit('operation', operations);
   }
 
   function deleteWord(cursor: Cursor, reverse: boolean) {
     const operations = fugue.deleteWordByCursor(cursor, reverse);
     if (!operations) return;
-    socket.emit('document:operation', operations);
+    socket.emit('operation', operations);
   }
 
   function pasteText(start: Cursor, text: string) {
     const chars = text.split('');
     const lineNodes = chars.filter(char => char === '\n');
     const insertOperations: Operation[] = fugue.insertLocal(start, ...text);
     const styleOperations = lineNodes.map(() => fugue.updateBlockStyleLocal(start.line + 1, 'paragraph', true));
-    socket.emit('document:operation', [...styleOperations, ...insertOperations]);
+    socket.emit('operation', [...styleOperations, ...insertOperations]);
   }
 
   function updateSelection(range: BaseSelection, styles: InlineStyle[]) {
-    socket.emit('document:cursor', { range, styles });
+    socket.emit('cursorChange', { range, styles });
   }
 
   return {

code/client/src/domain/editor/operations/markdown/operations.ts

@@ -37,7 +37,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(styleOperation);
 
     // emit operations
-    socket.emit('document:operation', operations);
+    socket.emit('operation', operations);
   }
 
   /**
@@ -64,7 +64,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(...styleOperations);
 
     // emit operations
-    socket.emit('document:operation', operations);
+    socket.emit('operation', operations);
   }
 
   function deleteBlockStyles(selection: Selection) {
@@ -75,7 +75,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     if ((start === end && start.column === 0) || start.line !== end.line) {
       const newSelection = start.column !== 0 ? { start: { line: start.line + 1, column: 0 }, end } : selection;
       const operations = fugue.updateBlockStylesLocalBySelection('paragraph', newSelection);
-      socket.emit('document:operation', operations);
+      socket.emit('operation', operations);
     }
   }
 

code/client/src/domain/editor/slate/hooks/useCursors.ts

@@ -23,7 +23,7 @@ export function useCursors({ socket }: Communication) {
   };
 
   useSocketListeners(socket, {
-    'document:cursor': onCursorChange,
+    cursorChange: onCursorChange,
   });
 
   return { cursors };

code/client/src/domain/editor/slate/hooks/useRenderers.ts

@@ -17,7 +17,7 @@ function useRenderers(editor: Editor, fugue: Fugue, { socket }: Communication) {
       const line = path[path.length - 1];
       const updateBlockStyle = (style: BlockStyle) => {
         const operation = fugue.updateBlockStyleLocal(line, style);
-        socket.emit('document:operation', [operation]);
+        socket.emit('operation', [operation]);
       };
       return getElementRenderer(type, props, updateBlockStyle);
     },

code/client/src/services/communication/socket/socketCommunication.ts

@@ -1,14 +1,12 @@
-import namespaces from '@/services/communication/socket/namespaces/namespaces.ts';
 import { io } from 'socket.io-client';
 import config from '@/config.ts';
+import { OperationEmitter } from '@/services/communication/socket/operationEmitter.ts';
 
 type EmitType = (event: string, data?: any) => void;
 type ListenType = (eventHandlers: SocketEventHandlers) => void;
 type ConnectionType = (namespace: string) => void;
 export type SocketEventHandlers = Record<string, (...args: any[]) => void>;
 
-io(config.SOCKET_SERVER_URL);
-
 export interface SocketCommunication {
   emit: EmitType;
   on: ListenType;
@@ -17,43 +15,41 @@ export interface SocketCommunication {
   disconnect: ConnectionType;
 }
 
-function emit(str: string, data: any) {
-  const [namespace, event] = str.split(':');
-  if (!namespace || !event) throw new Error('Invalid event format');
-  const socket = namespaces[`/${namespace}`];
-  if (!socket) throw new Error('Invalid namespace');
-  socket.emit(event, data);
+const socket = io(config.SOCKET_SERVER_URL);
+const OPERATION_DELAY = 100;
+const operationEmitter = new OperationEmitter(socket, OPERATION_DELAY);
+
+function emit(event: string, data: any) {
+  switch (event) {
+    case 'operation':
+      operationEmitter.addOperation(...data);
+      break;
+    case 'cursor':
+      setTimeout(() => socket.emit(event, data), OPERATION_DELAY);
+      break;
+    default:
+      socket.emit(event, ...data);
+      break;
+  }
 }
 
 function on(eventHandlers: SocketEventHandlers) {
-  Object.entries(eventHandlers).forEach(([str, handler]) => {
-    const [namespace, event] = str.split(':');
-    if (!namespace || !event) throw new Error('Invalid event format');
-    const socket = namespaces[`/${namespace}`];
-    if (!socket) throw new Error('Invalid namespace:' + namespace);
+  Object.entries(eventHandlers).forEach(([event, handler]) => {
     socket.on(event, handler);
   });
 }
 
 function off(eventHandlers: SocketEventHandlers) {
-  Object.entries(eventHandlers).forEach(([str, handler]) => {
-    const [namespace, event] = str.split(':');
-    if (!namespace || !event) throw new Error('Invalid event format');
-    const socket = namespaces[`/${namespace}`];
-    if (!socket) throw new Error('Invalid namespace:' + namespace);
+  Object.entries(eventHandlers).forEach(([event, handler]) => {
     socket.off(event, handler);
   });
 }
 
-function connect(namespace: string) {
-  const socket = namespaces[namespace];
-  if (!socket) throw new Error('Invalid namespace:' + namespace);
+function connect() {
   socket.connect();
 }
 
-function disconnect(namespace: string) {
-  const socket = namespaces[namespace];
-  if (!socket) throw new Error('Invalid namespace:' + namespace);
+function disconnect() {
   socket.disconnect();
 }
 

code/client/src/ui/pages/document/Document.tsx

@@ -35,14 +35,14 @@ function Document() {
       setTitle(name);
       setLoaded(true);
       setFilePath(`/documents/${title || 'Untitled'}`);
-      socket.emit('document:join', id);
+      socket.emit('joinDocument', id);
     }
     fetchDocument().catch(e => {
       publishError(e);
       navigate('/');
     });
     return () => {
-      socket.emit('document:leave');
+      socket.emit('leaveDocument');
     };
   }, [fugue, id, http, socket, publishError, services, setFilePath, navigate, title]);
 

code/client/src/ui/pages/document/components/title/Title.tsx

@@ -40,7 +40,7 @@ function Title(props: TitleProps) {
   }
 
   useSocketListeners(socket, {
-    'document:title': setTitle,
+    documentUpdated: setTitle, // TODO: fix later
   });
 
   return (

code/client/src/ui/pages/workspace/hooks/useDocuments.ts

@@ -41,9 +41,9 @@ export function useDocuments() {
   }
 
   useSocketListeners(socket, {
-    'document:created': onCreateDocument,
-    'document:deleted': onDeleteDocument,
-    'document:updated': onUpdateDocument,
+    documentCreated: onCreateDocument,
+    documentDeleted: onDeleteDocument,
+    documentUpdated: onUpdateDocument,
   });
 
   return {

code/client/src/ui/pages/workspace/hooks/useWorkspaces.ts

@@ -45,9 +45,9 @@ function useWorkspaces() {
   }
 
   useSocketListeners(socket, {
-    'workspace:created': onCreateWorkspace,
-    'workspace:deleted': onDeleteWorkspace,
-    'workspace:updated': onUpdateWorkspace,
+    workspaceCreated: onCreateWorkspace,
+    workspaceDeleted: onDeleteWorkspace,
+    workspaceUpdated: onUpdateWorkspace,
   });
 
   return {

code/server/src/ts/config.ts

@@ -6,8 +6,8 @@ config();
 const SERVER_PORT = parseInt(process.env.PORT || '8080');
 const CLIENT_PORT = parseInt(process.env.CLIENT_PORT || '5173');
 const HOST_IP = process.env.HOST_IP;
-const ORIGIN = [`http://localhost:${CLIENT_PORT}`];
-if (HOST_IP) ORIGIN.push(`http://${HOST_IP}:${CLIENT_PORT}`);
+const ORIGIN = [`http://localhost:${CLIENT_PORT}`, 'http://localhost:8080'];
+if (HOST_IP) ORIGIN.push(`http://${HOST_IP}:${CLIENT_PORT}`, `http://${HOST_IP}:8080`);
 const SERVER_IP = HOST_IP || 'localhost';
 
 const SERVER_OPTIONS = {

code/server/src/ts/controllers/http/workspace/resourcesHandlers.ts

@@ -19,9 +19,9 @@ function resourcesHandlers(service: ResourcesService, io: Server) {
     const { type, name, parent } = resource;
     if (!wid) throw new InvalidParameterError('Workspace id is required');
     if (!type) throw new InvalidParameterError('Resource type is required');
-    if (!parent) throw new InvalidParameterError('Resource parent is required');
+    // if (!parent) throw new InvalidParameterError('Resource parent is required');
     const id = await service.createResource(wid, name, type, parent);
-    io.of('/workspaces').in(wid).emit('resources:create', { id, name, type, parent });
+    io.in(wid).emit('resourceCreated', { id, name, type, parent });
     httpResponse.created(res).json({ id });
   };
 
@@ -50,7 +50,7 @@ function resourcesHandlers(service: ResourcesService, io: Server) {
     const resource = req.body as Partial<WorkspaceResource>;
     if (!resource) throw new InvalidParameterError('Body is required');
     await service.updateResource(id, resource);
-    io.of('/workspaces').in(wid).emit('resources:update', resource);
+    io.in(wid).emit('resourceUpdated', resource);
     httpResponse.noContent(res).send();
   };
 
@@ -64,11 +64,11 @@ function resourcesHandlers(service: ResourcesService, io: Server) {
     if (!wid) throw new InvalidParameterError('Workspace id is required');
     if (!id) throw new InvalidParameterError('Resource id is required');
     await service.deleteResource(id);
-    io.of('/workspaces').in(wid).emit('resources:delete', { id });
+    io.in(wid).emit('resourceDeleted', { id });
     httpResponse.noContent(res).send();
   };
 
-  const router = PromiseRouter({mergeParams: true});
+  const router = PromiseRouter({ mergeParams: true });
   router.post('/', createResource);
   router.get('/:id', getResource);
   router.put('/:id', updateResource);

code/server/src/ts/controllers/http/workspace/workspaceHandlers.ts

@@ -51,7 +51,7 @@ function workspaceHandlers(services: Services, io: Server) {
     if (!id) throw new InvalidParameterError('Workspace id is required');
     if (!name) throw new InvalidParameterError('Workspace name is required');
     await services.workspace.updateWorkspace(id, name);
-    io.of('/workspaces').in(id).emit('workspaces:update', { id, name });
+    io.in(id).emit('updatedWorkspace', { id, name });
     httpResponse.noContent(res).send();
   };
 
@@ -64,7 +64,7 @@ function workspaceHandlers(services: Services, io: Server) {
     const { wid } = req.params;
     if (!wid) throw new InvalidParameterError('Workspace id is required');
     await services.workspace.deleteWorkspace(wid);
-    io.of('/workspaces').in(wid).emit('workspaces:delete', { id: wid });
+    io.in(wid).emit('workspaceDeleted', { id: wid });
     httpResponse.noContent(res).send();
   };
 

code/server/src/ts/controllers/ws/events.ts

@@ -1,26 +1,24 @@
 import { SocketHandler } from '@controllers/ws/types';
 import { DocumentsService } from '@services/DocumentsService';
-import onOperation from '@controllers/ws/namespaces/document/onOperation';
-import onCursorChange from '@controllers/ws/namespaces/document/onCursorChange';
-import onJoinDocument from '@controllers/ws/namespaces/document/onJoinDocument';
-import onLeaveDocument from '@controllers/ws/namespaces/document/onLeaveDocument';
-import onJoinWorkspace from '@controllers/ws/namespaces/workspace/onJoinWorkspace';
-import onLeaveWorkspace from '@controllers/ws/namespaces/workspace/onLeaveWorkspace';
+import onOperation from '@controllers/ws/events/document/onOperation';
+import onCursorChange from '@controllers/ws/events/document/onCursorChange';
+import onJoinDocument from '@controllers/ws/events/document/onJoinDocument';
+import onLeaveDocument from '@controllers/ws/events/document/onLeaveDocument';
+import onJoinWorkspace from '@controllers/ws/events/workspace/onJoinWorkspace';
+import onLeaveWorkspace from '@controllers/ws/events/workspace/onLeaveWorkspace';
 
-export default function events(service: DocumentsService): Record<string, Record<string, SocketHandler>> {
+export default function events(service: DocumentsService): Record<string, SocketHandler> {
   if (!service) throw new Error('Service parameter is required');
 
   return {
-    '/document': {
-      operation: onOperation(service),
-      cursor: onCursorChange(),
-      join: onJoinDocument(),
-      leave: onLeaveDocument(),
-    },
-    '/workspaces': {
-      join: onJoinWorkspace(),
-      leave: onLeaveWorkspace(),
-    },
-    '/users': {},
+    // document events
+    operation: onOperation(service),
+    cursorChange: onCursorChange(),
+    joinDocument: onJoinDocument(),
+    leaveDocument: onLeaveDocument(),
+
+    // workspace events
+    joinWorkspace: onJoinWorkspace(),
+    leaveWorkspace: onLeaveWorkspace(),
   };
 }