From 61a4389be1827e9408af669c99b03374f6fc8e90 Mon Sep 17 00:00:00 2001 From: San Kim Date: Mon, 13 Jan 2025 00:52:56 +0900 Subject: [PATCH] =?UTF-8?q?feat(chat):=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8E=B8=EC=9D=98=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/static/websocket-test.html | 498 +++++++++++++++--- 1 file changed, 421 insertions(+), 77 deletions(-) diff --git a/bootstrap/api/src/main/resources/static/websocket-test.html b/bootstrap/api/src/main/resources/static/websocket-test.html index 3459052..53b561f 100644 --- a/bootstrap/api/src/main/resources/static/websocket-test.html +++ b/bootstrap/api/src/main/resources/static/websocket-test.html @@ -1,95 +1,405 @@ - WebSocket Test + + WebSocket Chat Test +
-

WebSocket Chat Test

+
+
+

WebSocket Chat Test Page

+
-
- - - -
+
+

1. 인증

+
+
+ + 인증 방법 +
+
+

사용자 인증 방법

+ 1. 테스트용 사용자 계정:
+   • 전화번호: 01000000001
+   • 전화번호: 01000000002
+ 2. POST /auth/codes로 사용자 인증을 진행한 후 토큰을 발급받으세요.
+ 3. 발급받은 토큰으로 WebSocket에 연결합니다.
+
+

WebSocket 연결 설정

+ 1. SockJS와 STOMP 클라이언트 라이브러리를 사용합니다.
+ 2. WebSocket 핸드쉐이크: /ws 엔드포인트로 연결
+ 3. STOMP 연결 설정:
+   • 연결 헤더: { "Authorization": "Bearer {발급받은 토큰}" }
+   • 자동 재연결: 15초 간격
+
+
+ + + +
+
+
-
- - -
+
+

2. 채널 구독

+
+
+ + 채널 구독 방법 +
+
+

채널 구독 방법

+ 1. 구독할 채널 ID를 입력하세요.
+ 2. Subscribe를 통해 해당 채널의 메시지를 수신합니다.
+
+
+

채널 구독 프로토콜

+ - STOMP subscribe 명령어 사용
+ - 구독 Destination: /channel/{channelId}
+ - channelId 형식: UUID (예: 33333333-3333-3333-3333-333333333333)
+
+

수신 메시지 스키마

+ 
{
+  "id": "UUID",            // 메시지 고유 ID
+  "channelId": "UUID",     // 채널 ID
+  "senderUserId": "UUID",  // 발신자 ID
+  "contentType": "TEXT" | "CARD",  // 메시지 타입
+  "contentText": "string", // 메시지 내용
+  "contentCardColor": "BLUE" | "PINK" | null,  // CARD 타입일 경우 색상
+  "createdAt": "2025-01-13T00:39:24"  // ISO-8601 형식
+}
+
+
+ + +
+
+
+

활성 구독 목록

+
0
+
+
+
+
+
-

Active Subscriptions

-
- -

Send Message

-
- -
- -
- - +
+

3. 메시지 전송

+
+
+ + 메시지 전송 방법 +
+
+

메시지 전송 방법

+ 1. 메시지를 전송할 채널 경로를 입력하세요.
+ 2. 메시지 내용과 타입을 선택하세요.
+ 3. Send 버튼을 클릭하면 메시지가 전송됩니다.
+
+

메시지 전송 프로토콜

+ - STOMP send 명령어 사용
+ - 전송 Destination: /app/channel/{channelId}
+ - channelId 형식: UUID
+
+

전송 메시지 스키마

+ 
{
+  "senderUserId": "UUID",     // 발신자 ID (자동 설정)
+  "messageContent": "string",  // 메시지 내용
+  "messageType": "TEXT" | "CARD"  // 메시지 타입
+}
+
+

메시지 타입 상세

+ - TEXT: 일반 텍스트 메시지
+ - CARD: 색상이 있는 카드 형태 메시지 (BLUE 또는 PINK)
+
+
+ +
+
+ + + +
+
+
-
- +
+
+

4. 메시지 로그

+
+
+ + 메시지 로그 설명 +
+
+

메시지 로그 설명

+ - 파란색: 전송한 메시지
+ - 초록색: 수신한 메시지
+ - 빨간색: 오류 메시지
+ - 연두색: 시스템 알림
+
+

메시지 상태 코드

+ - 200: 메시지 전송 성공
+ - 401: 인증 실패
+ - 404: 채널 없음
+
+
+
+
- -

Messages

-