Merge pull request #153 from boostcampwm-2022/fix/#152-C

Fix/#152: 배포 서버에서 소켓 연결이 안되는 문제 수정

Author: wcho21

client/src/components/Editor/index.tsx

@@ -79,6 +79,8 @@ function Editor() {
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
+    socket.emit('mom-initialization');
+    
     socket.on('mom-initialization', (crdt) => {
       syncCRDT(crdt);
 

client/src/config/index.ts

@@ -2,4 +2,5 @@ export default {
   GITHUB_CLIENT_ID: import.meta.env.VITE_GITHUB_CLIENT_ID,
   GITHUB_CLIENT_SECRET: import.meta.env.VITE_GITHUB_CLIENT_SECRET,
   SERVER_PATH: import.meta.env.VITE_SERVER_PATH,
+  SERVER_URL: import.meta.env.VITE_SERVER_URL,
 };

client/src/hooks/useSocket.ts

@@ -2,5 +2,8 @@ import { io } from 'socket.io-client';
 import env from 'src/config';
 
 export default function useSocket(namespace: string) {
-  return io(`${env.SERVER_PATH}${namespace}`);
+  // TODO: http://example.com/ 까지만 나타내는 환경변수로 SERVER_URL 사용.
+  // SERVER_PATH 환경변수(http://example.com/api)와 겹치는 부분이 있으므로 리팩토링 필요
+  // TODO: '/ws' 부분을 환경변수로 관리하기. 위 리팩토링 진행시 같이 진행 필요
+  return io(`${env.SERVER_URL}${namespace}`, { path: '/ws' });
 }

server/index.ts

@@ -29,11 +29,12 @@ const io = new Server({
   cors: {
     origin: env.CLIENT_PATH,
   },
+  path: '/ws', // TODO: '/ws' 환경 변수로 분리 필요
 });
 
 momSocketServer(io);
 signalingSocketServer(io);
 
 io.attach(server);
 
-server.listen(8080);
+server.listen(8080); // TODO: 서버 포트 환경 변수로 분리 필요

server/socket/mom.ts

@@ -9,7 +9,7 @@ async function momSocketServer(io: Server) {
 
   const crdt = new CRDT(1, -1, structure);
 
-  const workspace = io.of(/^\/api\/sc-workspace\/\d+$/);
+  const workspace = io.of(/^\/sc-workspace\/\d+$/);
 
   workspace.on('connection', async (socket) => {
     const name = socket.nsp.name;
@@ -70,7 +70,9 @@ async function momSocketServer(io: Server) {
     // 초기화에 필요한 정보 전달
     const { structure } = await getMom(momId);
 
-    socket.emit('mom-initialization', structure);
+    socket.on('mom-initialization', () => {
+      socket.emit('mom-initialization', structure);
+    });
   });
 }
 

server/socket/signaling.ts

@@ -1,7 +1,7 @@
 import { Server } from 'socket.io';
 
 function signalingSocketServer(io: Server) {
-  const signaling = io.of(/^\/api\/signaling\/\d+$/);
+  const signaling = io.of(/^\/signaling\/\d+$/);
 
   signaling.on('connection', (socket) => {
     socket.on('send_hello', () => {