Socket.io 마인드맵 작업 동작

nestjs-BE/server/package.json

@@ -62,6 +62,7 @@
     "jest": "^29.5.0",
     "prettier": "^3.0.0",
     "prisma": "^5.6.0",
+    "socket.io-client": "^4.8.1",
     "source-map-support": "^0.5.21",
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.0",

nestjs-BE/server/src/board-trees/board-trees.gateway.ts

@@ -1,78 +1,67 @@
-import { UnauthorizedException } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import {
   OnGatewayConnection,
+  OnGatewayInit,
   SubscribeMessage,
   WebSocketGateway,
   WebSocketServer,
+  WsException,
 } from '@nestjs/websockets';
+import { ConfigService } from '@nestjs/config';
 import { Server, Socket } from 'socket.io';
 import { BoardTreesService } from './board-trees.service';
-import {
-  OperationAdd,
-  OperationDelete,
-  OperationMove,
-  OperationUpdate,
-} from '../crdt/operation';
+import type { BoardOperation } from './schemas/board-operation.schema';
 
 @WebSocketGateway({ namespace: 'board' })
-export class BoardTreesGateway implements OnGatewayConnection {
+export class BoardTreesGateway implements OnGatewayInit, OnGatewayConnection {
   constructor(
     private boardTreesService: BoardTreesService,
     private jwtService: JwtService,
+    private configService: ConfigService,
   ) {}
 
   @WebSocketServer()
   server: Server;
 
-  handleConnection(client: Socket, token: string) {
-    if (!token) {
-      client.disconnect();
-      throw new UnauthorizedException();
-    }
-    try {
-      this.jwtService.verify(token);
-    } catch (error) {
-      client.disconnect();
-      throw new UnauthorizedException();
-    }
+  afterInit(server: Server) {
+    server.use((socket, next) => {
+      const token = socket.handshake.auth.token;
+      if (!token) {
+        next(new WsException('access token required'));
+      }
+      try {
+        this.jwtService.verify(token, {
+          secret: this.configService.get<string>('JWT_ACCESS_SECRET'),
+        });
+        next();
+      } catch (error) {
+        next(new WsException('token is invalid'));
+      }
+    });
   }
 
-  @SubscribeMessage('joinBoard')
-  async handleJoinBoard(client: Socket, payload: string) {
-    const payloadObject = JSON.parse(payload);
-    if (!this.boardTreesService.hasTree(payloadObject.boardId)) {
-      await this.boardTreesService.initBoardTree(
-        payloadObject.boardId,
-        payloadObject.boardName,
-      );
+  handleConnection(client: Socket) {
+    const query = client.handshake.query;
+    const boardId = query.boardId;
+
+    if (!boardId) {
+      client.emit('board_id_required', new WsException('board id required'));
+      client.disconnect();
     }
-    client.join(payloadObject.boardId);
-    client.emit(
-      'initTree',
-      this.boardTreesService.getTreeData(payloadObject.boardId),
-    );
+    client.join(boardId);
+    client.emit('board_joined', boardId);
   }
 
-  @SubscribeMessage('updateMindmap')
-  handleUpdateMindmap(client: Socket, payload: string) {
-    const payloadObject = JSON.parse(payload);
-    const { boardId, operation: serializedOperation } = payloadObject;
-
-    const operationTypeMap = {
-      add: OperationAdd.parse,
-      delete: OperationDelete.parse,
-      move: OperationMove.parse,
-      update: OperationUpdate.parse,
-    };
-
-    const operation =
-      operationTypeMap[serializedOperation.operationType](serializedOperation);
-    this.boardTreesService.applyOperation(boardId, operation);
-    this.boardTreesService.updateTreeData(boardId);
+  @SubscribeMessage('createOperation')
+  async handleCreateOperation(client: Socket, operation: BoardOperation) {
+    await this.boardTreesService.createOperationLog(operation);
+    client.broadcast.to(operation.boardId).emit('operation', operation);
+    client.emit('operationCreated');
+  }
 
-    client.broadcast
-      .to(boardId)
-      .emit('operationFromServer', serializedOperation);
+  @SubscribeMessage('getOperations')
+  async handleGetOperations(client: Socket, boardId: string) {
+    const operations = await this.boardTreesService.getOperationLogs(boardId);
+    client.emit('getOperations', operations);
   }
 }

nestjs-BE/server/src/board-trees/board-trees.module.ts

@@ -4,11 +4,16 @@ import { MongooseModule } from '@nestjs/mongoose';
 import { BoardTreesService } from './board-trees.service';
 import { BoardTreesGateway } from './board-trees.gateway';
 import { BoardTree, BoardTreeSchema } from './schemas/board-tree.schema';
+import {
+  BoardOperation,
+  BoardOperationSchema,
+} from './schemas/board-operation.schema';
 
 @Module({
   imports: [
     MongooseModule.forFeature([
       { name: BoardTree.name, schema: BoardTreeSchema },
+      { name: BoardOperation.name, schema: BoardOperationSchema },
     ]),
     JwtModule,
   ],

nestjs-BE/server/src/board-trees/board-trees.service.ts

@@ -2,13 +2,16 @@ import { Injectable } from '@nestjs/common';
 import { InjectModel } from '@nestjs/mongoose';
 import { Model } from 'mongoose';
 import { BoardTree } from './schemas/board-tree.schema';
+import { BoardOperation } from './schemas/board-operation.schema';
 import { CrdtTree } from '../crdt/crdt-tree';
 import { Operation } from '../crdt/operation';
 
 @Injectable()
 export class BoardTreesService {
   constructor(
     @InjectModel(BoardTree.name) private boardTreeModel: Model<BoardTree>,
+    @InjectModel(BoardOperation.name)
+    private boardOperationModel: Model<BoardOperation>,
   ) {}
 
   private boardTrees = new Map<string, CrdtTree>();
@@ -57,4 +60,15 @@ export class BoardTreesService {
       .updateOne({ boardId }, { tree: JSON.stringify(tree) })
       .exec();
   }
+
+  async createOperationLog(operation: BoardOperation) {
+    return this.boardOperationModel.create(operation);
+  }
+
+  async getOperationLogs(boardId: string) {
+    return this.boardOperationModel
+      .find({ boardId })
+      .select('-_id -__v')
+      .lean();
+  }
 }

nestjs-BE/server/src/board-trees/schemas/board-operation.schema.ts

@@ -0,0 +1,28 @@
+import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
+import { HydratedDocument } from 'mongoose';
+
+export type BoardOperationDocument = HydratedDocument<BoardOperation>;
+
+@Schema()
+export class BoardOperation {
+  @Prop({ required: true })
+  boardId: string;
+
+  @Prop({ required: true })
+  type: string;
+
+  @Prop()
+  parentId: string;
+
+  @Prop()
+  oldParentId: string;
+
+  @Prop()
+  content: string;
+
+  @Prop()
+  oldContent: string;
+}
+
+export const BoardOperationSchema =
+  SchemaFactory.createForClass(BoardOperation);