Feat/#126-BK: 회의록 DB에 저장하기 (#131)

Author: se030

@wabinar-crdt/index.ts

@@ -16,15 +16,20 @@ class CRDT {
   private client: number;
   private structure: LinkedList;
 
-  constructor(initialclock: number = 1, client: number = 0) {
+  constructor(
+    initialclock: number = 1,
+    client: number = 0,
+    initialStructure: LinkedList,
+  ) {
     this.clock = initialclock;
     this.client = client;
-    this.structure = new LinkedList();
+
+    Object.setPrototypeOf(initialStructure, LinkedList.prototype);
+    this.structure = initialStructure as LinkedList;
   }
 
-  setClientId(id: number) {
-    this.client = id;
-    Object.setPrototypeOf(this.structure, LinkedList.prototype);
+  get data() {
+    return this.structure;
   }
 
   generateNode(letter: string) {

@wabinar-crdt/linked-list.ts

@@ -5,7 +5,7 @@ type RemoteIdentifier = Identifier | null;
 type ModifiedIndex = number | null;
 
 export default class LinkedList {
-  private head?: Node;
+  head?: Node;
 
   insertByIndex(index: number, node: Node): RemoteIdentifier {
     try {

client/src/components/Editor/index.tsx

@@ -9,9 +9,7 @@ import style from './style.module.scss';
 
 function Editor() {
   const workspace = useParams();
-  const socket: Socket = io(
-    `${env.SERVER_PATH}/api/sc-workspace/${workspace.id}`,
-  );
+  const socket: Socket = io(`${env.SERVER_PATH}/sc-workspace/${workspace.id}`);
 
   const {
     syncCRDT,

client/src/hooks/useCRDT.tsx

@@ -2,6 +2,7 @@ import CRDT, {
   RemoteInsertOperation,
   RemoteDeleteOperation,
 } from '@wabinar/crdt';
+import LinkedList from '@wabinar/crdt/linked-list';
 import { useRef } from 'react';
 import { useUserContext } from 'src/hooks/useUserContext';
 
@@ -16,17 +17,18 @@ interface RemoteOperation {
 }
 
 export function useCRDT() {
-  const crdtRef = useRef<CRDT>(new CRDT());
   const userContext = useUserContext();
+  const clientId = userContext.userInfo?.user.id;
+
+  const crdtRef = useRef<CRDT>(new CRDT(1, clientId, new LinkedList()));
 
   let initialized = false;
   const operationSet: RemoteOperation[] = [];
 
   const syncCRDT = (object: unknown) => {
-    Object.setPrototypeOf(object, CRDT.prototype);
+    Object.setPrototypeOf(object, LinkedList.prototype);
 
-    crdtRef.current = object as CRDT;
-    crdtRef.current.setClientId(userContext.userInfo?.user.id);
+    crdtRef.current = new CRDT(1, clientId, object as LinkedList);
 
     initialized = true;
     operationSet.forEach(({ type, op }) => {

server/apis/mom/model.ts

@@ -1,5 +1,6 @@
 import mongoose from '@db';
 import { Schema } from 'mongoose';
+import LinkedList from '@wabinar/crdt/linked-list';
 
 interface Block {
   type: String;
@@ -9,11 +10,13 @@ interface Block {
 interface Mom {
   name: string;
   blocks: Block[];
+  structure: LinkedList;
 }
 
 const momSchema = new Schema<Mom>({
   name: String,
   blocks: Array<Block>,
+  structure: Object,
 });
 
 const momModel = mongoose.model('Mom', momSchema);

server/apis/mom/service.ts

@@ -1,7 +1,8 @@
+import LinkedList from '@wabinar/crdt/linked-list';
 import momModel from './model';
 
 // TODO: 예외처리
-export const getMom = async (id: number) => {
+export const getMom = async (id: string) => {
   const mom = await momModel.findOne({ _id: id });
   return mom;
 };
@@ -10,3 +11,7 @@ export const createMom = async () => {
   const mom = await momModel.create({ name: '', blocks: [] });
   return mom;
 };
+
+export const putMom = async (id: string, structure: LinkedList) => {
+  await momModel.updateOne({ _id: id }, { structure });
+};

server/socket/mom.ts

@@ -1,13 +1,17 @@
-import { createMom, getMom } from '@apis/mom/service';
+import { createMom, getMom, putMom } from '@apis/mom/service';
 import { Server } from 'socket.io';
 import CRDT from '@wabinar/crdt';
 
-const crdt = new CRDT(1, -100);
+async function momSocketServer(io: Server) {
+  const momId = '6380c9f7b757041ca21fe96c';
+
+  const { structure } = await getMom(momId);
+
+  const crdt = new CRDT(1, -1, structure);
 
-function momSocketServer(io: Server) {
   const workspace = io.of(/^\/api\/sc-workspace\/\d+$/);
 
-  workspace.on('connection', (socket) => {
+  workspace.on('connection', async (socket) => {
     const name = socket.nsp.name;
     const workspaceId = name.match(/\d+/g)[0];
 
@@ -16,9 +20,6 @@ function momSocketServer(io: Server) {
       return;
     }
 
-    // 초기화에 필요한 정보 전달
-    socket.emit('mom-initialization', crdt);
-
     /* 회의록 선택 시 회의록 정보 불러오기 */
     socket.on('select-mom', async (roomId) => {
       socket.join(roomId);
@@ -37,11 +38,15 @@ function momSocketServer(io: Server) {
     socket.on('mom-insertion', async (op) => {
       socket.broadcast.emit('mom-insertion', op);
       crdt.remoteInsert(op);
+
+      putMom(momId, crdt.data);
     });
 
     socket.on('mom-deletion', async (op) => {
       socket.broadcast.emit('mom-deletion', op);
       crdt.remoteDelete(op);
+
+      putMom(momId, crdt.data);
     });
 
     // 에러 시
@@ -53,6 +58,11 @@ function momSocketServer(io: Server) {
     socket.on('disconnect', () => {
       console.log('user disconnected', socket.id);
     });
+
+    // 초기화에 필요한 정보 전달
+    const { structure } = await getMom(momId);
+
+    socket.emit('mom-initialization', structure);
   });
 }