[FE] feat: 소켓 연결방식 변경

frontEnd/src/apis/getSocketURL.ts

@@ -1,8 +1,15 @@
 import axios from 'axios';
 import { VITE_SOCKET_URL } from '@/constants/env';
 
-export default async function getSocketURL(roomName: string) {
-  const result = await axios.post(VITE_SOCKET_URL, { roomName });
+type SocketType = 'signalling' | 'chatting';
+
+export const SOCKET_TYPE: Record<string, SocketType> = {
+  SIGNAL: 'signalling',
+  CHAT: 'chatting',
+};
+
+export default async function getSocketURL(type: SocketType, roomName: string) {
+  const result = await axios.post(`${VITE_SOCKET_URL}/${type}`, { roomName });
 
   return result.data.result.url;
 }

frontEnd/src/components/room/ChattingSection.tsx

@@ -1,7 +1,6 @@
 import { useParams } from 'react-router-dom';
 import { memo, useEffect, useState } from 'react';
-import { Socket, io } from 'socket.io-client/debug';
-import { VITE_CHAT_URL } from '@/constants/env';
+import { Socket } from 'socket.io-client/debug';
 import { ErrorData, ErrorResponse, MessageData } from '@/types/chatting';
 import ChattingMessage from './chatting/ChattingMessage';
 import useLastMessageViewingState from '@/hooks/useLastMessageViewingState';
@@ -12,6 +11,8 @@ import Section from '../common/SectionWrapper';
 import { CHATTING_ERROR_STATUS_CODE, CHATTING_ERROR_TEXT } from '@/constants/chattingErrorResponse';
 import ChattingErrorToast from '../common/ChattingErrorToast';
 import useScroll from '@/hooks/useScroll';
+import getSocketURL, { SOCKET_TYPE } from '@/apis/getSocketURL';
+import createSocket from '@/utils/createSocket';
 
 function ChattingSection() {
   const [socket, setSocket] = useState<Socket | null>(null);
@@ -51,20 +52,23 @@ function ChattingSection() {
     if (statusCode === AI_ERROR_CODE) setErrorData(AI_ERROR_TEXT);
   };
 
-  useEffect(() => {
-    setSocket(() => {
-      const newSocket = io(VITE_CHAT_URL, {
-        transports: ['websocket'],
-      });
+  const socketConnect = async () => {
+    const socketURL = await getSocketURL(SOCKET_TYPE.CHAT, roomId as string);
+    const socketCallbacks = {
+      [CHATTING_SOCKET_RECIEVE_EVNET.NEW_MESSAGE]: handleRecieveMessage,
+      exception: handleChattingSocketError,
+    };
+
+    const newSocket = createSocket(socketURL, socketCallbacks);
 
-      newSocket.on(CHATTING_SOCKET_RECIEVE_EVNET.NEW_MESSAGE, handleRecieveMessage);
-      newSocket.on('exception', handleChattingSocketError);
-      newSocket.connect();
+    newSocket.connect();
+    newSocket.emit(CHATTING_SOCKET_EMIT_EVNET.JOIN_ROOM, { room: roomId });
 
-      newSocket.emit(CHATTING_SOCKET_EMIT_EVNET.JOIN_ROOM, { room: roomId });
+    setSocket(newSocket);
+  };
 
-      return newSocket;
-    });
+  useEffect(() => {
+    socketConnect();
   }, []);
 
   useEffect(() => {

frontEnd/src/hooks/useRTCConnection.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useState, useEffect } from 'react';
-import { Socket, io } from 'socket.io-client/debug';
+import { Socket } from 'socket.io-client/debug';
+import createSocket from '@utils/createSocket';
 import { RTC_SOCKET_EMIT_EVENT, RTC_SOCKET_RECEIVE_EVENT } from '@/constants/rtcSocketEvents';
 import { VITE_STUN_URL, VITE_TURN_CREDENTIAL, VITE_TURN_URL, VITE_TURN_USERNAME } from '@/constants/env';
-import getSocketURL from '@/apis/getSocketURL';
+import getSocketURL, { SOCKET_TYPE } from '@/apis/getSocketURL';
 import useDataChannels from '@/stores/useDataChannels';
 import useRoomConfigData from '@/stores/useRoomConfigData';
 
@@ -22,17 +23,19 @@ const useRTCConnection = (roomId: string, localStream: MediaStream) => {
   const { addCodeDataChannel, removeCodeDataChannel, addLanguageChannel, removeLanguageChannel } = useDataChannels();
 
   const socketConnect = async () => {
-    const socketURL = await getSocketURL(roomId);
-
-    socket = io(socketURL);
-    socket.on(RTC_SOCKET_RECEIVE_EVENT.ALL_USERS, onAllUser);
-    socket.on(RTC_SOCKET_RECEIVE_EVENT.OFFER, onOffer);
-    socket.on(RTC_SOCKET_RECEIVE_EVENT.ANSWER, onAnswer);
-    socket.on(RTC_SOCKET_RECEIVE_EVENT.CANDIDATE, onCandidate);
-    socket.on(RTC_SOCKET_RECEIVE_EVENT.USER_EXIT, onUserExit);
-
-    socket.on('exception', throwConnectionError);
-    socket.on('error', throwSignalError);
+    const socketURL = await getSocketURL(SOCKET_TYPE.SIGNAL, roomId);
+
+    const socketCallbacks = {
+      [RTC_SOCKET_RECEIVE_EVENT.ALL_USERS]: onAllUser,
+      [RTC_SOCKET_RECEIVE_EVENT.OFFER]: onOffer,
+      [RTC_SOCKET_RECEIVE_EVENT.ANSWER]: onAnswer,
+      [RTC_SOCKET_RECEIVE_EVENT.CANDIDATE]: onCandidate,
+      [RTC_SOCKET_RECEIVE_EVENT.USER_EXIT]: onUserExit,
+      exception: throwConnectionError,
+      error: throwSignalError,
+    };
+
+    socket = createSocket(socketURL, socketCallbacks);
 
     socket.connect();
 

frontEnd/src/utils/createSocket.ts

@@ -0,0 +1,12 @@
+import { io } from 'socket.io-client/debug';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SocketCallback = Record<string, any>;
+
+export default function createSocket(socketURL: string, socketCallback: SocketCallback) {
+  const socket = io(socketURL, { transports: ['websocket'] });
+  Object.entries(socketCallback).forEach(([event, callback]) => {
+    socket.on(event, callback);
+  });
+
+  return socket;
+}