Loading...
;
- }
+ stompClient.onConnect = (frame) => {
+ console.log('Connected: ' + frame);
- if (isError) {
- console.error('Error connecting to the chat room:', error);
- content =
Date: Mon, 29 Jan 2024 15:39:47 +0900
Subject: [PATCH 10/11] =?UTF-8?q?feat:=20SockJS=20=EC=82=AD=EC=A0=9C=20?=
=?UTF-8?q?=EB=B0=8F=20StompJS,=20Websocket=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/package.json | 2 -
frontend/pnpm-lock.yaml | 75 +----------------------
frontend/src/components/chat/ChatForm.tsx | 34 +++++++---
3 files changed, 29 insertions(+), 82 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index 62e359a..bd69395 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,12 +14,10 @@
"@stomp/stompjs": "^7.0.0",
"@tanstack/react-query": "^5.17.19",
"@tanstack/react-query-devtools": "^5.17.21",
- "@types/sockjs-client": "^1.5.4",
"axios": "^1.6.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
- "sockjs-client": "^1.6.1",
"zustand": "^4.5.0"
},
"devDependencies": {
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index ee99ff4..b9780b4 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -17,9 +17,6 @@ dependencies:
'@tanstack/react-query-devtools':
specifier: ^5.17.21
version: 5.17.21(@tanstack/react-query@5.17.19)(react@18.2.0)
- '@types/sockjs-client':
- specifier: ^1.5.4
- version: 1.5.4
axios:
specifier: ^1.6.6
version: 1.6.6
@@ -32,9 +29,6 @@ dependencies:
react-router-dom:
specifier: ^6.21.3
version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
- sockjs-client:
- specifier: ^1.6.1
- version: 1.6.1
zustand:
specifier: ^4.5.0
version: 4.5.0(@types/react@18.2.48)(react@18.2.0)
@@ -948,10 +942,6 @@ packages:
resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
dev: true
- /@types/sockjs-client@1.5.4:
- resolution: {integrity: sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==}
- dev: false
-
/@types/stompjs@2.3.9:
resolution: {integrity: sha512-fu/GgkRdxwyEJ+JeUsGhDxGwmZQi+xeNElradGQ4ehWiG2z/o89gsi5Y7Gv0KC6VK1v78Cjh8zj3VF+RvqCGSA==}
dependencies:
@@ -1443,6 +1433,7 @@ packages:
optional: true
dependencies:
ms: 2.1.3
+ dev: true
/debug@4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -2026,11 +2017,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
- /eventsource@2.0.2:
- resolution: {integrity: sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==}
- engines: {node: '>=12.0.0'}
- dev: false
-
/fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: true
@@ -2060,13 +2046,6 @@ packages:
reusify: 1.0.4
dev: true
- /faye-websocket@0.11.4:
- resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
- engines: {node: '>=0.8.0'}
- dependencies:
- websocket-driver: 0.7.4
- dev: false
-
/file-entry-cache@6.0.1:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
engines: {node: ^10.12.0 || >=12.0.0}
@@ -2302,10 +2281,6 @@ packages:
react-is: 16.13.1
dev: false
- /http-parser-js@0.5.8:
- resolution: {integrity: sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==}
- dev: false
-
/ignore@5.3.0:
resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
engines: {node: '>= 4'}
@@ -2332,6 +2307,7 @@ packages:
/inherits@2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+ dev: true
/internal-slot@1.0.6:
resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
@@ -2686,6 +2662,7 @@ packages:
/ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+ dev: true
/nanoid@3.3.7:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -2884,10 +2861,6 @@ packages:
engines: {node: '>=6'}
dev: true
- /querystringify@2.2.0:
- resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
- dev: false
-
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
@@ -2964,10 +2937,6 @@ packages:
set-function-name: 2.0.1
dev: true
- /requires-port@1.0.0:
- resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
- dev: false
-
/resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -3044,10 +3013,6 @@ packages:
isarray: 2.0.5
dev: true
- /safe-buffer@5.2.1:
- resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
- dev: false
-
/safe-regex-test@1.0.2:
resolution: {integrity: sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==}
engines: {node: '>= 0.4'}
@@ -3121,19 +3086,6 @@ packages:
engines: {node: '>=8'}
dev: true
- /sockjs-client@1.6.1:
- resolution: {integrity: sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==}
- engines: {node: '>=12'}
- dependencies:
- debug: 3.2.7
- eventsource: 2.0.2
- faye-websocket: 0.11.4
- inherits: 2.0.4
- url-parse: 1.5.10
- transitivePeerDependencies:
- - supports-color
- dev: false
-
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@@ -3340,13 +3292,6 @@ packages:
punycode: 2.3.1
dev: true
- /url-parse@1.5.10:
- resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
- dependencies:
- querystringify: 2.2.0
- requires-port: 1.0.0
- dev: false
-
/use-sync-external-store@1.2.0(react@18.2.0):
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
peerDependencies:
@@ -3390,20 +3335,6 @@ packages:
fsevents: 2.3.3
dev: true
- /websocket-driver@0.7.4:
- resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
- engines: {node: '>=0.8.0'}
- dependencies:
- http-parser-js: 0.5.8
- safe-buffer: 5.2.1
- websocket-extensions: 0.1.4
- dev: false
-
- /websocket-extensions@0.1.4:
- resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
- engines: {node: '>=0.8.0'}
- dev: false
-
/which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
dependencies:
diff --git a/frontend/src/components/chat/ChatForm.tsx b/frontend/src/components/chat/ChatForm.tsx
index 02ebfd1..dc91527 100644
--- a/frontend/src/components/chat/ChatForm.tsx
+++ b/frontend/src/components/chat/ChatForm.tsx
@@ -1,17 +1,16 @@
import { useEffect } from 'react';
-import SockJS from 'sockjs-client';
-import { Stomp, Client, Message } from '@stomp/stompjs';
+import { Client, Message } from '@stomp/stompjs';
import Chat from './Chat';
import ChatRecent from './ChatRecent';
import useChatStore from '../../stores/useChatStore';
-const ChatForm: React.FC = () => {
+const ChatForm = () => {
const { inputMessage, setInputMessage, handleSendMessage } = useChatStore();
- let stompClient: Client | null = null;
+ let stompClient: Client;
- useEffect(() => {
+ const connect = () => {
stompClient = new Client({
- webSocketFactory: () => new SockJS('http://localhost:8010/ws'),
+ webSocketFactory: () => new WebSocket('ws://localhost:8010/ws'),
debug: (str) => {
console.log(str);
},
@@ -24,8 +23,22 @@ const ChatForm: React.FC = () => {
console.log('Connected: ' + frame);
if (stompClient && stompClient.connected) {
- stompClient.subscribe('/topic/public', (message: Message) => {
- console.log('Received message:', message.body);
+ stompClient.subscribe('/topic/public/5', (message: Message) => {
+ const receivedMessage = JSON.parse(message.body);
+ console.log('Received message:', receivedMessage);
+
+ if (receivedMessage.type === 'JOIN') {
+ console.log(
+ `${receivedMessage.sender} 님이 채팅방에 참여하셨습니다.`,
+ );
+ } else {
+ console.log('Regular chat message:', receivedMessage.body);
+ }
+ });
+
+ stompClient.publish({
+ destination: '/app/chat/5/enter',
+ body: JSON.stringify({ type: 'JOIN', sender: 'username' }),
});
}
};
@@ -35,12 +48,17 @@ const ChatForm: React.FC = () => {
};
stompClient.activate();
+ };
+
+ useEffect(() => {
+ connect();
return () => {
stompClient?.deactivate();
};
}, []);
+
return (
<>
From 4da5bf35ba9ddbbe5913b46beac6215faa8b7e72 Mon Sep 17 00:00:00 2001
From: Quvid <48755156+KimKyuHoi@users.noreply.github.com>
Date: Mon, 29 Jan 2024 18:09:31 +0900
Subject: [PATCH 11/11] =?UTF-8?q?Feat:=20publish=20=EB=A9=94=EC=8B=9C?=
=?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/components/chat/ChatForm.tsx | 131 +++++++++++++---------
1 file changed, 76 insertions(+), 55 deletions(-)
diff --git a/frontend/src/components/chat/ChatForm.tsx b/frontend/src/components/chat/ChatForm.tsx
index dc91527..a7395aa 100644
--- a/frontend/src/components/chat/ChatForm.tsx
+++ b/frontend/src/components/chat/ChatForm.tsx
@@ -1,16 +1,32 @@
-import { useEffect } from 'react';
-import { Client, Message } from '@stomp/stompjs';
-import Chat from './Chat';
+import { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import * as StompJs from '@stomp/stompjs';
import ChatRecent from './ChatRecent';
-import useChatStore from '../../stores/useChatStore';
+
+interface ChatMessage {
+ applyId: string;
+ chat: string;
+}
const ChatForm = () => {
- const { inputMessage, setInputMessage, handleSendMessage } = useChatStore();
- let stompClient: Client;
+ const [chatList, setChatList] = useState
([]);
+ const [chat, setChat] = useState('');
+
+ const { apply_id } = useParams<{ apply_id: string }>();
+ const client = useRef(null);
+
+ const newChatMessage: ChatMessage = {
+ applyId: 'User',
+ chat,
+ };
const connect = () => {
- stompClient = new Client({
- webSocketFactory: () => new WebSocket('ws://localhost:8010/ws'),
+ client.current = new StompJs.Client({
+ brokerURL: 'ws://localhost:8010/ws',
+ onConnect: () => {
+ console.log('success');
+ subscribe();
+ },
debug: (str) => {
console.log(str);
},
@@ -18,68 +34,73 @@ const ChatForm = () => {
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000,
});
+ client.current.activate();
+ };
+
+ const publish = (chat: string) => {
+ if (!client.current || !client.current.connected) return;
+
+ client.current.publish({
+ destination: '/app/chat/5/send-message',
+ body: JSON.stringify({
+ applyId: apply_id,
+ chat: chat,
+ }),
+ });
+ setChatList((prevChatList) => [...prevChatList, newChatMessage]);
+ setChat('');
+ };
+
+ const subscribe = () => {
+ if (!client.current) return;
+
+ client.current.subscribe(`/topic/public/5`, (body) => {
+ console.log('Received message:', body);
+ });
+ };
+
+ const disconnect = () => {
+ if (!client.current) return;
+
+ client.current.deactivate();
+ };
- stompClient.onConnect = (frame) => {
- console.log('Connected: ' + frame);
-
- if (stompClient && stompClient.connected) {
- stompClient.subscribe('/topic/public/5', (message: Message) => {
- const receivedMessage = JSON.parse(message.body);
- console.log('Received message:', receivedMessage);
-
- if (receivedMessage.type === 'JOIN') {
- console.log(
- `${receivedMessage.sender} 님이 채팅방에 참여하셨습니다.`,
- );
- } else {
- console.log('Regular chat message:', receivedMessage.body);
- }
- });
-
- stompClient.publish({
- destination: '/app/chat/5/enter',
- body: JSON.stringify({ type: 'JOIN', sender: 'username' }),
- });
- }
- };
-
- stompClient.onStompError = (frame) => {
- console.error('Error connecting to WebSocket:', frame);
- };
-
- stompClient.activate();
+ const handleChange = (event: React.ChangeEvent) => {
+ setChat(event.target.value);
+ };
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ publish(chat);
+ }
};
useEffect(() => {
connect();
- return () => {
- stompClient?.deactivate();
- };
+ return () => disconnect();
}, []);
-
return (
- <>
+
-
-
+
+ {chatList.map((chatMessage, index) => (
+
{`${chatMessage.applyId}: ${chatMessage.chat}`}
+ ))}
+
) =>
- setInputMessage(e.target.value)
- }
- onKeyDown={(e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
- handleSendMessage();
- }
- }}
+ type={'text'}
+ name={'chatInput'}
+ onChange={handleChange}
+ value={chat}
placeholder="채팅을 입력해주세요"
+ onKeyDown={handleKeyDown}
/>
- >
+
);
};