Refactor/artillery

client/src/features/workSpace/hooks/usePagesManage.ts

@@ -178,11 +178,21 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
       return;
     }
     if (!socketStore.socket) return;
-
+    const startTime = performance.now();
     // 페이지 데이터 수신 핸들러
     const handlePageData = (data: { pageId: string; serializedPage: any }) => {
       if (data.pageId === pageId) {
         // 페이지 데이터 업데이트
+        const endTime = performance.now();
+        const totalTime = endTime - startTime;
+
+        console.log({
+          event: "fetchPageData",
+          pageId,
+          totalTime: `${totalTime}ms`,
+          dataSize: JSON.stringify(data.serializedPage).length,
+          timestamp: new Date().toISOString(),
+        });
         updatePageData(pageId, data.serializedPage.crdt);
 
         // 로딩 상태 업데이트

server/package.json

@@ -20,7 +20,9 @@
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json"
+    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "test:load": "artillery run ./test/socket-test.yaml",
+    "test:load:report": "artillery run ./test/socket-test.yml --output report.json && artillery report report.json"
   },
   "dependencies": {
     "@nestjs/common": "^10.0.0",
@@ -35,6 +37,7 @@
     "@nestjs/websockets": "^10.4.7",
     "@noctaCrdt": "workspace:*",
     "@types/cookie-parser": "^1.4.7",
+    "artillery": "^2.0.21",
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.7",
     "express": "^4.21.1",

server/src/metric/metric.interceptor.spec.ts

@@ -0,0 +1,7 @@
+import { MetricInterceptor } from './metric.interceptor';
+
+describe('MetricInterceptor', () => {
+  it('should be defined', () => {
+    expect(new MetricInterceptor()).toBeDefined();
+  });
+});

server/src/metric/metric.interceptor.ts

@@ -0,0 +1,24 @@
+import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
+import { Observable } from "rxjs";
+import { tap } from "rxjs/operators";
+
+@Injectable()
+export class MetricInterceptor implements NestInterceptor {
+  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
+    const start = Date.now();
+    const client = context.switchToWs().getClient();
+    const event = context.getArgs()[0].event;
+
+    return next.handle().pipe(
+      tap(() => {
+        const latency = Date.now() - start;
+        // 서버 측 지연시간 로깅
+        client.emit("operation:latency", {
+          event,
+          latency,
+          timestamp: Date.now(),
+        });
+      }),
+    );
+  }
+}

server/src/workspace/workspace.gateway.ts

@@ -24,12 +24,14 @@ import {
   RemoteCharUpdateOperation,
   CursorPosition,
 } from "@noctaCrdt/Interfaces";
-import { Logger } from "@nestjs/common";
+import { Logger, UseInterceptors } from "@nestjs/common";
 import { nanoid } from "nanoid";
 import { Page } from "@noctaCrdt/Page";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
 import { AuthService } from "../auth/auth.service";
 import { WorkspaceInviteData } from "./workspace.interface";
+import { MetricInterceptor } from "../metric/metric.interceptor";
+
 // 클라이언트 맵 타입 정의
 interface ClientInfo {
   clientId: number; // 서버가 부여한 아이디로, 0,1,2,3, 같은 숫자임.
@@ -55,6 +57,7 @@ type Operation =
   | RemoteCharUpdateOperation
   | CursorPosition;
 
+@UseInterceptors(MetricInterceptor)
 @WebSocketGateway({
   cors: {
     origin:
@@ -453,6 +456,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         page: newPage.serialize(),
       } as RemotePageCreateOperation;
       client.emit("create/page", operation);
+      console.log("페이지정보:", operation);
 
       this.emitOperation(client.id, workspaceId, "create/page", operation, batch);
     } catch (error) {
@@ -773,6 +777,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
     @MessageBody() data: RemoteCharInsertOperation,
     @ConnectedSocket() client: Socket,
     batch: boolean = false,
+    startTime: string,
   ): Promise<void> {
     const clientInfo = this.clientMap.get(client.id);
     try {
@@ -803,6 +808,9 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         backgroundColor: data.node.backgroundColor ? data.node.backgroundColor : "transparent",
       } as RemoteCharInsertOperation;
       this.emitOperation(client.id, data.pageId, "insert/char", operation, batch);
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+      console.log("insert/char test time : ", totalTime);
     } catch (error) {
       this.logger.error(
         `Char Insert 연산 처리 중 오류 발생 - Client ID: ${clientInfo?.clientId}`,

server/test/processors.js

@@ -0,0 +1,114 @@
+// processors.js
+module.exports = {
+  handlePageCreation,
+  generateCharData,
+  handleCharInsertion,
+};
+function handlePageCreation(userContext, events, done) {
+  let doneCalled = false;
+  let timeoutId;
+
+  const socket = userContext.sockets[""];
+
+  // 먼저 모든 가능한 응답 이벤트에 대한 리스너를 설정
+  socket.on("create/page", (response) => {
+    console.log("Received create/page response:", response);
+    if (response && response.page && response.page.id) {
+      handleSuccess(response.page.id);
+    }
+  });
+
+  socket.on("workspace", (response) => {
+    console.log("Received workspace response:", response);
+    if (response && response.id) {
+      handleSuccess(response.id);
+    }
+  });
+
+  // 성공 처리를 위한 헬퍼 함수
+  function handleSuccess(pageId) {
+    if (!doneCalled) {
+      userContext.vars.pageId = pageId;
+      console.log("Successfully captured page ID:", pageId);
+      doneCalled = true;
+      clearTimeout(timeoutId);
+      done();
+    }
+  }
+
+  // 이벤트 리스너 설정 후 emit 실행
+  console.log("Emitting create/page event...");
+  socket.emit("create/page", {
+    type: "pageCreate",
+    workspaceId: "guest",
+    clientId: 3,
+  });
+
+  // 타임아웃 설정 (시간을 좀 더 길게 설정)
+  timeoutId = setTimeout(() => {
+    if (!doneCalled) {
+      console.error("[ERROR] Page creation timed out - No response received after 10 seconds");
+      doneCalled = true;
+      done(new Error("Operation timed out"));
+    }
+  }, 5000); // 10초로 연장
+}
+
+const pageNodeTrackers = new Map();
+
+function generateCharData(userContext, events, done) {
+  const pageId = userContext.vars.pageId;
+
+  // 페이지별 노드 추적기 초기화
+  if (!pageNodeTrackers.has(pageId)) {
+    pageNodeTrackers.set(pageId, {
+      lastNode: null,
+      firstNode: null,
+    });
+  }
+  const nodeTracker = pageNodeTrackers.get(pageId);
+
+  const clock = Date.now() % 100000;
+
+  // 새로운 문자 노드 생성
+  const charNode = {
+    id: {
+      clock: clock,
+      client: 3,
+    },
+    value: String.fromCharCode(65 + Math.floor(Math.random() * 26)),
+    next: null, // 다음에 연결될 노드
+    prev: nodeTracker.lastNode ? nodeTracker.lastNode.id : null, // 이전 노드의 ID
+    style: [],
+    color: "black",
+    backgroundColor: "transparent",
+  };
+
+  // 첫 번째 노드인 경우 저장
+  if (!nodeTracker.firstNode) {
+    nodeTracker.firstNode = charNode;
+  }
+
+  // 이전 노드가 있는 경우, 해당 노드의 next를 현재 노드로 설정
+  if (nodeTracker.lastNode) {
+    nodeTracker.lastNode.next = charNode.id;
+  }
+
+  // 현재 노드를 마지막 노드로 저장
+  nodeTracker.lastNode = charNode;
+
+  userContext.vars.charNode = charNode;
+  return done();
+}
+
+// 문자 입력 처리를 위한 새로운 함수
+function handleCharInsertion(userContext, events, done) {
+  const socket = userContext.sockets[""];
+
+  // 문자 입력 이벤트 리스너 설정
+  socket.on("insert/char", (response) => {
+    console.log("Character inserted:", response);
+  });
+
+  done();
+}