Skip to content

Commit 2e3c0e0

Browse files
juyeong-sse030
juyeong-s
and
se030
authored
Refactor/#260-S: 소켓 이벤트 상수화 리팩토링 및 회의록 소켓 핸들러 분리 (#272)
* feat : @wabinar에 constants/socket-message 상수화 파일 생성 * refactor : mom 소켓의 text, vote block, question block 이벤트를 핸들러로 분리 * refactor : 소켓 이벤트 상수화 도메인 별로 export 하도록 변경 * refactor : 질문 블록 소켓 이벤트명 상수화 적용 Co-authored-by: Seyoung Kim <[email protected]>
1 parent 4a067c5 commit 2e3c0e0

File tree

21 files changed

+481
-515
lines changed

21 files changed

+481
-515
lines changed

‎@wabinar/constants/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "@wabinar/constants",
3+
"version": "1.0.0",
4+
"description": "CRDT for wabinar",
5+
"license": "MIT",
6+
"scripts": {
7+
"test": "jest"
8+
},
9+
"devDependencies": {
10+
"jest": "^29.3.1"
11+
}
12+
}

‎@wabinar/constants/socket-message.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export const WORKSPACE_EVENT = {
2+
START_MEETING: 'start-meeting',
3+
END_MEETING: 'end-meeting',
4+
SEND_HELLO: 'send-hello',
5+
RECEIVE_HELLO: 'receive-hello',
6+
SEND_OFFER: 'send-offer',
7+
RECEIVE_OFFER: 'receive-offer',
8+
SEND_ANSWER: 'send-answer',
9+
RECEIVE_ANSWER: 'receive-answer',
10+
SEND_ICE: 'send-ice',
11+
RECEIVE_ICE: 'receive-ice',
12+
RECEIVE_BYE: 'receive_bye',
13+
};
14+
15+
export const MOM_EVENT = {
16+
CREATE: 'create',
17+
SELECT: 'select',
18+
UPDATE_TITLE: 'update-mom-title',
19+
INIT: 'init-mom',
20+
INSERT_BLOCK: 'insert-block',
21+
DELETE_BLOCK: 'delete-block',
22+
UPDATED: 'updated-mom',
23+
};
24+
25+
export const BLOCK_EVENT = {
26+
INIT: 'init-block',
27+
LOAD_TYPE: 'load-type',
28+
UPDATE_TYPE: 'update-type',
29+
INSERT_TEXT: 'insert-text',
30+
DELETE_TEXT: 'delete-text',
31+
UPDATE_TEXT: 'update-text',
32+
CREATE_VOTE: 'create-vote',
33+
UPDATE_VOTE: 'update-vote',
34+
END_VOTE: 'end-vote',
35+
FETCH_QUESTIONS: 'fetch-questions',
36+
ADD_QUESTIONS: 'add-questions',
37+
RESOLVE_QUESTIONS: 'resolve-questions',
38+
};

‎client/src/components/Mom/Block/TextBlock.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { BlockType } from '@wabinar/api-types/block';
2+
import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
23
import {
3-
RemoteInsertOperation,
44
RemoteDeleteOperation,
5+
RemoteInsertOperation,
56
} from '@wabinar/crdt/linked-list';
6-
import React, { useEffect, useRef, memo, useState } from 'react';
7+
import React, { memo, useEffect, useRef, useState } from 'react';
78
import BlockSelector from 'src/components/BlockSelector';
8-
import SOCKET_MESSAGE from 'src/constants/socket-message';
99
import { useCRDT } from 'src/hooks/useCRDT';
1010
import { useOffset } from 'src/hooks/useOffset';
1111
import useSocketContext from 'src/hooks/useSocketContext';
@@ -112,18 +112,18 @@ function TextBlock({
112112
useEffect(() => {
113113
registerRef(blockRef);
114114

115-
socket.emit(SOCKET_MESSAGE.BLOCK.INIT, id);
115+
socket.emit(BLOCK_EVENT.INIT, id);
116116

117-
ee.on(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
118-
ee.on(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
119-
ee.on(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
120-
ee.on(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
117+
ee.on(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
118+
ee.on(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
119+
ee.on(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
120+
ee.on(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);
121121

122122
return () => {
123-
ee.off(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
124-
ee.off(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, onInitialize);
125-
ee.off(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, onInsert);
126-
ee.off(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, onDelete);
123+
ee.off(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
124+
ee.off(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
125+
ee.off(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
126+
ee.off(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);
127127
};
128128
}, []);
129129

@@ -151,15 +151,15 @@ function TextBlock({
151151

152152
if (event.inputType === 'deleteContentBackward') {
153153
const remoteDeletion = localDeleteCRDT(offsetRef.current);
154-
socket.emit(SOCKET_MESSAGE.BLOCK.DELETE_TEXT, id, remoteDeletion);
154+
socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
155155
return;
156156
}
157157

158158
const letter = event.data as string;
159159
const previousLetterIndex = offsetRef.current - 2;
160160
const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
161161

162-
socket.emit(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, id, remoteInsertion);
162+
socket.emit(BLOCK_EVENT.INSERT_TEXT, id, remoteInsertion);
163163
};
164164

165165
// 한글 입력 핸들링
@@ -177,7 +177,7 @@ function TextBlock({
177177

178178
const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
179179

180-
socket.emit(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, id, remoteInsertion);
180+
socket.emit(BLOCK_EVENT.INSERT_TEXT, id, remoteInsertion);
181181
});
182182
};
183183

@@ -199,7 +199,7 @@ function TextBlock({
199199
.split('')
200200
.map((letter) => localInsertCRDT(previousLetterIndex++, letter));
201201

202-
socket.emit(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, id, remoteInsertions);
202+
socket.emit(BLOCK_EVENT.UPDATE_TEXT, id, remoteInsertions);
203203

204204
blockRef.current.innerText = previousText + pastedText + nextText;
205205
updateCaretPosition(pastedText.length);

‎client/src/components/Mom/Block/index.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState, useEffect, memo, useRef } from 'react';
2-
import SOCKET_MESSAGE from 'src/constants/socket-message';
1+
import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
2+
import { memo, useEffect, useRef, useState } from 'react';
33
import useSocketContext from 'src/hooks/useSocketContext';
44

55
import ee from '../EventEmitter';
@@ -28,19 +28,17 @@ function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
2828
const localUpdateFlagRef = useRef<boolean>(false);
2929

3030
useEffect(() => {
31-
socket.emit(SOCKET_MESSAGE.BLOCK.LOAD_TYPE, id, (type: BlockType) =>
32-
setType(type),
33-
);
31+
socket.emit(BLOCK_EVENT.LOAD_TYPE, id, (type: BlockType) => setType(type));
3432

35-
ee.on(`${SOCKET_MESSAGE.BLOCK.UPDATE_TYPE}-${id}`, (type) => {
33+
ee.on(`${BLOCK_EVENT.UPDATE_TYPE}-${id}`, (type) => {
3634
setType(type);
3735
localUpdateFlagRef.current = false;
3836
});
3937
}, []);
4038

4139
useEffect(() => {
4240
if (localUpdateFlagRef.current) {
43-
socket.emit(SOCKET_MESSAGE.BLOCK.UPDATE_TYPE, id, type);
41+
socket.emit(BLOCK_EVENT.UPDATE_TYPE, id, type);
4442
}
4543
}, [type]);
4644

‎client/src/components/Mom/index.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { BLOCK_EVENT, MOM_EVENT } from '@wabinar/constants/socket-message';
12
import { useEffect, useRef, useState } from 'react';
23
import { VOTE_MODE } from 'src/constants/block';
3-
import SOCKET_MESSAGE from 'src/constants/socket-message';
44
import { useCRDT } from 'src/hooks/useCRDT';
55
import useDebounce from 'src/hooks/useDebounce';
66
import useSelectedMom from 'src/hooks/useSelectedMom';
@@ -36,7 +36,7 @@ function Mom() {
3636

3737
const title = titleRef.current.innerText;
3838

39-
socket.emit(SOCKET_MESSAGE.MOM.UPDATE_TITLE, title);
39+
socket.emit(MOM_EVENT.UPDATE_TITLE, title);
4040
},
4141
500,
4242
);
@@ -90,7 +90,7 @@ function Mom() {
9090

9191
updateBlockFocus(index + 1);
9292

93-
socket.emit(SOCKET_MESSAGE.MOM.INSERT_BLOCK, blockId, remoteInsertion);
93+
socket.emit(MOM_EVENT.INSERT_BLOCK, blockId, remoteInsertion);
9494
return;
9595
}
9696

@@ -111,7 +111,7 @@ function Mom() {
111111
setBlockFocus();
112112
setCaretToEnd();
113113

114-
socket.emit(SOCKET_MESSAGE.MOM.DELETE_BLOCK, id, remoteDeletion);
114+
socket.emit(MOM_EVENT.DELETE_BLOCK, id, remoteDeletion);
115115
}
116116
};
117117

@@ -125,74 +125,74 @@ function Mom() {
125125
useEffect(() => {
126126
if (!selectedMom) return;
127127

128-
socket.emit(SOCKET_MESSAGE.MOM.INIT, selectedMom._id);
128+
socket.emit(MOM_EVENT.INIT, selectedMom._id);
129129

130-
socket.on(SOCKET_MESSAGE.MOM.INIT, (crdt) => {
130+
socket.on(MOM_EVENT.INIT, (crdt) => {
131131
syncCRDT(crdt);
132132
setBlocks(spreadCRDT());
133133
});
134134

135-
socket.on(SOCKET_MESSAGE.MOM.UPDATE_TITLE, (title) => {
135+
socket.on(MOM_EVENT.UPDATE_TITLE, (title) => {
136136
if (!titleRef.current) return;
137137

138138
titleRef.current.innerText = title;
139139
});
140140

141-
socket.on(SOCKET_MESSAGE.MOM.UPDATED, () => {
141+
socket.on(MOM_EVENT.UPDATED, () => {
142142
setBlocks(spreadCRDT());
143143
});
144144

145-
socket.on(SOCKET_MESSAGE.MOM.INSERT_BLOCK, (op) => {
145+
socket.on(MOM_EVENT.INSERT_BLOCK, (op) => {
146146
remoteInsertCRDT(op);
147147

148148
updateBlockFocus(undefined);
149149
setBlocks(spreadCRDT());
150150
});
151151

152-
socket.on(SOCKET_MESSAGE.MOM.DELETE_BLOCK, (op) => {
152+
socket.on(MOM_EVENT.DELETE_BLOCK, (op) => {
153153
remoteDeleteCRDT(op);
154154

155155
updateBlockFocus(undefined);
156156
setBlocks(spreadCRDT());
157157
});
158158

159-
socket.on(SOCKET_MESSAGE.BLOCK.INIT, (id, crdt) => {
160-
ee.emit(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, crdt);
159+
socket.on(BLOCK_EVENT.INIT, (id, crdt) => {
160+
ee.emit(`${BLOCK_EVENT.INIT}-${id}`, crdt);
161161
});
162162

163-
socket.on(SOCKET_MESSAGE.BLOCK.INSERT_TEXT, (id, op) => {
164-
ee.emit(`${SOCKET_MESSAGE.BLOCK.INSERT_TEXT}-${id}`, op);
163+
socket.on(BLOCK_EVENT.INSERT_TEXT, (id, op) => {
164+
ee.emit(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, op);
165165
});
166166

167-
socket.on(SOCKET_MESSAGE.BLOCK.DELETE_TEXT, (id, op) => {
168-
ee.emit(`${SOCKET_MESSAGE.BLOCK.DELETE_TEXT}-${id}`, op);
167+
socket.on(BLOCK_EVENT.DELETE_TEXT, (id, op) => {
168+
ee.emit(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, op);
169169
});
170170

171-
socket.on(SOCKET_MESSAGE.BLOCK.UPDATE_TEXT, (id, crdt) => {
172-
ee.emit(`${SOCKET_MESSAGE.BLOCK.UPDATE_TEXT}-${id}`, crdt);
171+
socket.on(BLOCK_EVENT.UPDATE_TEXT, (id, crdt) => {
172+
ee.emit(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, crdt);
173173
});
174174

175-
socket.on(SOCKET_MESSAGE.BLOCK.UPDATE_TYPE, (id, type) => {
176-
ee.emit(`${SOCKET_MESSAGE.BLOCK.UPDATE_TYPE}-${id}`, type);
175+
socket.on(BLOCK_EVENT.UPDATE_TYPE, (id, type) => {
176+
ee.emit(`${BLOCK_EVENT.UPDATE_TYPE}-${id}`, type);
177177
});
178178

179-
socket.on(SOCKET_MESSAGE.MOM.CREATE_VOTE, (options) => {
179+
socket.on(BLOCK_EVENT.CREATE_VOTE, (options) => {
180180
setVoteMode(VOTE_MODE.REGISTERED as VoteMode);
181181
setOptions(options);
182182
});
183183

184184
return () => {
185185
[
186-
SOCKET_MESSAGE.MOM.INIT,
187-
SOCKET_MESSAGE.MOM.UPDATE_TITLE,
188-
SOCKET_MESSAGE.MOM.UPDATED,
189-
SOCKET_MESSAGE.MOM.INSERT_BLOCK,
190-
SOCKET_MESSAGE.MOM.DELETE_BLOCK,
191-
SOCKET_MESSAGE.BLOCK.INIT,
192-
SOCKET_MESSAGE.BLOCK.INSERT_TEXT,
193-
SOCKET_MESSAGE.BLOCK.DELETE_TEXT,
194-
SOCKET_MESSAGE.BLOCK.UPDATE_TYPE,
195-
SOCKET_MESSAGE.MOM.CREATE_VOTE,
186+
MOM_EVENT.INIT,
187+
MOM_EVENT.UPDATE_TITLE,
188+
MOM_EVENT.UPDATED,
189+
MOM_EVENT.INSERT_BLOCK,
190+
MOM_EVENT.DELETE_BLOCK,
191+
BLOCK_EVENT.INIT,
192+
BLOCK_EVENT.INSERT_TEXT,
193+
BLOCK_EVENT.DELETE_TEXT,
194+
BLOCK_EVENT.UPDATE_TYPE,
195+
BLOCK_EVENT.CREATE_VOTE,
196196
].forEach((event) => socket.off(event));
197197
};
198198
}, [selectedMom]);

‎client/src/components/QuestionBlock/index.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BiCheckbox } from '@react-icons/all-files/bi/BiCheckbox';
22
import { BiCheckboxChecked } from '@react-icons/all-files/bi/BiCheckboxChecked';
3+
import { BLOCK_EVENT } from '@wabinar/constants/socket-message';
34
import classNames from 'classnames/bind';
45
import React, { useEffect, useState } from 'react';
56
import useSocketContext from 'src/hooks/useSocketContext';
@@ -27,27 +28,27 @@ function QuestionBlock() {
2728
isResolved: false,
2829
text: questionText,
2930
};
30-
socket.emit('question-block__add-question', question);
31+
socket.emit(BLOCK_EVENT.ADD_QUESTIONS, question);
3132
};
3233

3334
useEffect(() => {
34-
socket.on('question-block__questions-fetched', fetchedQuestions => {
35+
socket.on(BLOCK_EVENT.FETCH_QUESTIONS, (fetchedQuestions) => {
3536
setQuestions([...fetchedQuestions]);
3637
});
3738

38-
socket.on('question-block__question-added', (questionToAdd) => {
39-
setQuestions(prev => [...prev, questionToAdd]);
39+
socket.on(BLOCK_EVENT.ADD_QUESTIONS, (questionToAdd) => {
40+
setQuestions((prev) => [...prev, questionToAdd]);
4041
});
4142

42-
socket.emit('question-block__fetch-questions');
43+
socket.emit(BLOCK_EVENT.FETCH_QUESTIONS);
4344
}, []);
4445

4546
const onClick: React.MouseEventHandler<HTMLLIElement> = (e) => {
4647
const targetId = Number(e.currentTarget.id);
47-
const clickedQuestion = questions.filter(q => q.id === targetId)[0];
48+
const clickedQuestion = questions.filter((q) => q.id === targetId)[0];
4849
const toggledResolved = !clickedQuestion.isResolved;
4950

50-
socket.emit('question-block__toggle-resolved', targetId, toggledResolved);
51+
socket.emit(BLOCK_EVENT.RESOLVE_QUESTIONS, targetId, toggledResolved);
5152
};
5253

5354
const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
@@ -80,7 +81,9 @@ function QuestionBlock() {
8081
) : (
8182
<BiCheckbox className={style['check-box']} />
8283
)}
83-
<p className={cx(questionText, { check: isResolved })}>{questionText}</p>
84+
<p className={cx(questionText, { check: isResolved })}>
85+
{questionText}
86+
</p>
8487
</li>
8588
))}
8689
</ul>

‎client/src/components/Sidebar/MeetingButton.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { WORKSPACE_EVENT } from '@wabinar/constants/socket-message';
12
import { memo } from 'react';
2-
import SOCKET_MESSAGE from 'src/constants/socket-message';
33
import { useMeetingContext } from 'src/hooks/useMeetingContext';
44
import useSocketContext from 'src/hooks/useSocketContext';
55
import color from 'styles/color.module.scss';
@@ -15,9 +15,7 @@ function MeetingButton() {
1515
const onClick = () => {
1616
setIsOnGoing(!isOnGoing);
1717
socket.emit(
18-
isOnGoing
19-
? SOCKET_MESSAGE.WORKSPACE.END_MEETING
20-
: SOCKET_MESSAGE.WORKSPACE.START_MEETING,
18+
isOnGoing ? WORKSPACE_EVENT.END_MEETING : WORKSPACE_EVENT.START_MEETING,
2119
);
2220
};
2321

0 commit comments

Comments
 (0)