feat: client -> server 메세지 이벤트 설정

boostcampwm2023 · Nov 16, 2023 · dfb5b9f · dfb5b9f
1 parent acde30c
commit dfb5b9f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/backend/src/events/events.gateway.ts b/backend/src/events/events.gateway.ts
@@ -22,8 +22,9 @@ export class EventsGateway
 
   private readonly logger: Logger = new Logger('EventsGateway');
 
-  @SubscribeMessage('events')
+  @SubscribeMessage('message')
   handleEvent(@MessageBody() data: string): string {
+    this.logger.log(`Client Message : ${data}`);
     return data;
   }
 
@@ -42,11 +43,11 @@ export class EventsGateway
       client.emit('message', message);
     };
 
-    const greetingMessage =
+    const welcomeMessage =
       '안녕, 나는 어떤 고민이든지 들어주는 마법의 소라고둥이야!\n고민이 있으면 말해줘!';
 
     setTimeout(() => {
-      sendMessage(greetingMessage);
+      sendMessage(welcomeMessage);
     }, 1000);
   }
 }
diff --git a/frontend/src/business/services/socket.ts b/frontend/src/business/services/socket.ts
@@ -18,3 +18,7 @@ export function getSocket() {
 export function setMessageEventListener(listener: (message: string) => void) {
   socket.on('message', listener);
 }
+
+export function sendMessage(message: string) {
+  socket.emit('message', message);
+}
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import { connect } from '@business/services/socket';
+import { connect, sendMessage, setMessageEventListener } from '@business/services/socket';
 import { useNavigate } from 'react-router-dom';
 
 import CustomButton from '@components/CustomButton';
@@ -8,6 +8,13 @@ const HomePage = () => {
 
   const moveAiChat = () => {
     connect();
+
+    // 테스트를 위한 부분
+    setMessageEventListener(message => alert(message));
+    setTimeout(() => {
+      sendMessage('안녕, 곧 수능인데 내가 수능을 잘 볼 수 있을까?');
+    }, 3000);
+
     navigate('/chat/ai');
   };