fix: 웹소켓에 path 추가

배포 서버에서 ws 경로로 웹소켓 request 하도록 바꿈

Author: wcho21

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;

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', () => {