🧪 웹소켓 sockJs 사용 테스트

BookwooriAlpineClub · Dec 1, 2024 · 4fcac9a · 4fcac9a
1 parent d02b85e
commit 4fcac9a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
+    "@types/sockjs-client": "^1.5.4",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.11.0",
     "@typescript-eslint/parser": "^8.11.0",

diff --git a/src/apis/chat.ts b/src/apis/chat.ts
@@ -1,7 +1,8 @@
 import { ChatEvent } from '@src/types/domain/dm';
 import { Client, Frame, IMessage } from '@stomp/stompjs';
+import SockJS from 'sockjs-client';
 
-const WEBSOCKET_URL = process.env.REACT_APP_WEBSOCKET_URL!;
+const WEBSOCKET_URL = process.env.REACT_APP_WEBSOCKET_URL_SECURE!;
 
 let stompClient: Client | null = null;
 type MessageHandler<T extends ChatEvent | MessageRequest> = (
@@ -16,13 +17,14 @@ export const connectHandler = <T extends ChatEvent | MessageRequest>(
   const accessToken = localStorage.getItem('accessToken');
 
   stompClient = new Client({
-    brokerURL: WEBSOCKET_URL,
+    // brokerURL: WEBSOCKET_URL,
     connectHeaders: {
       Authorization: `${accessToken}`.trim(),
     },
     forceBinaryWSFrames: true,
     webSocketFactory: () => {
-      const ws = new WebSocket(WEBSOCKET_URL);
+      // const ws = new WebSocket(WEBSOCKET_URL);
+      const ws = new SockJS(WEBSOCKET_URL);
 
       ws.onopen = () => {
         console.log('[WebSocket Open]: Connection established');