로컬 LLM + RAG 기반 AI 채팅봇 만들기 # 37 - WebSocket 테스트 (웹 브라우저 콘솔 활용)

로컬 LLM + RAG 기반 AI 채팅봇 만들기

5.3 WebSocket 테스트 (웹 브라우저 콘솔 활용)

이제 WebSocket을 활용하여 AI 챗봇과 실시간으로 메시지를 주고받는 기능이 정상적으로 동작하는지 테스트해야 합니다.
이번 단계에서는 웹 브라우저 콘솔 및 Postman을 사용하여 WebSocket이 정상적으로 연결되고 메시지를 주고받을 수 있는지 검증하겠습니다.

---

1) WebSocket 테스트의 중요성

✅ WebSocket 테스트가 필요한 이유

• WebSocket 연결이 정상적으로 이루어지는지 확인
• 사용자가 메시지를 입력했을 때, 서버에서 올바른 응답을 반환하는지 검증
• WebSocket이 다중 사용자 환경에서도 안정적으로 작동하는지 테스트
• 서버가 WebSocket 연결을 안정적으로 유지하며, 비정상 종료 시 복구되는지 확인

---

2) 웹 브라우저 콘솔을 활용한 WebSocket 테스트

✅ ① WebSocket 연결 테스트

1. Chrome 또는 Firefox 브라우저를 엽니다.
2. 개발자 도구 (F12) → Console 탭을 선택합니다.
3. 아래 코드를 실행하여 WebSocket 서버에 연결합니다.

const socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = () => {
    console.log("✅ WebSocket 연결 성공!");
    socket.send("안녕! AI 챗봇");
};

socket.onmessage = (event) => {
    console.log("🤖 AI 응답:", event.data);
};

socket.onclose = () => {
    console.log("⚠ WebSocket 연결 종료");
};

📌 예상 결과

✅ WebSocket 연결 성공!
🤖 AI 응답: "안녕하세요! 무엇을 도와드릴까요?"

---

✅ ② WebSocket 연결 오류 테스트

1. 서버가 실행되지 않은 상태에서 WebSocket 연결을 시도합니다.
2. 아래 코드를 실행합니다.

const socket = new WebSocket("ws://localhost:8080/chat");
socket.onerror = (error) => console.error("❌ WebSocket 오류:", error);

📌 예상 결과

❌ WebSocket 오류: WebSocket connection to 'ws://localhost:8080/chat' failed

---

✅ ③ WebSocket 자동 재연결 테스트

WebSocket 연결이 끊어졌을 때 자동으로 재연결하도록 구현할 수 있습니다.

let socket;
let reconnectInterval = 5000; // 5초 후 재연결

function connectWebSocket() {
    socket = new WebSocket("ws://localhost:8080/chat");

    socket.onopen = () => {
        console.log("✅ WebSocket 연결됨");
    };

    socket.onmessage = (event) => {
        console.log("🤖 AI 응답:", event.data);
    };

    socket.onclose = () => {
        console.log("⚠ WebSocket 연결 종료, 5초 후 재연결...");
        setTimeout(connectWebSocket, reconnectInterval);
    };
}

connectWebSocket();

📌 예상 결과

✅ WebSocket 연결됨
⚠ WebSocket 연결 종료, 5초 후 재연결...
✅ WebSocket 연결됨 (재연결 성공)

---

3) Postman을 활용한 WebSocket 테스트

Postman에서도 WebSocket을 테스트할 수 있습니다.

✅ ① Postman에서 WebSocket 연결하기

1. Postman을 실행합니다.
2. New Request → WebSocket을 선택합니다.
3. URL에 ws://localhost:8080/chat 입력 후 "Connect" 버튼 클릭

---

✅ ② WebSocket 메시지 전송

1. 메시지 입력 창에 "AI 챗봇이 뭐야?" 입력
2. "Send" 버튼 클릭

📌 예상 응답

"AI 챗봇은 사용자 질문을 분석하고 응답을 제공하는 시스템입니다."

---

4) WebSocket 성능 테스트 (다중 사용자 시뮬레이션)

✅ ① 여러 클라이언트 연결 테스트

아래 코드를 브라우저 콘솔에 여러 번 실행하여 여러 사용자가 동시에 접속하는 시뮬레이션을 수행합니다.

for (let i = 1; i <= 5; i++) {
    let socket = new WebSocket("ws://localhost:8080/chat");
    socket.onopen = () => console.log(`✅ [User ${i}] WebSocket 연결 성공`);
    socket.onmessage = (event) => console.log(`🤖 [User ${i}] AI 응답:`, event.data);
}

📌 예상 결과

✅ [User 1] WebSocket 연결 성공
✅ [User 2] WebSocket 연결 성공
✅ [User 3] WebSocket 연결 성공
🤖 [User 1] AI 응답: "안녕하세요! 무엇을 도와드릴까요?"
🤖 [User 2] AI 응답: "안녕하세요! 무엇을 도와드릴까요?"

---

✅ ② WebSocket 응답 속도 측정

응답 속도를 측정하여 WebSocket 성능을 분석할 수 있습니다.

const start = performance.now();
socket.send("테스트 메시지");
socket.onmessage = (event) => {
    const end = performance.now();
    console.log(`🤖 AI 응답: ${event.data} (응답 시간: ${end - start}ms)`);
};

📌 예상 결과

🤖 AI 응답: "안녕하세요!" (응답 시간: 120ms)

---

5) WebSocket 테스트 결과 요약

테스트 항목 결과

WebSocket 연결 성공 여부	✅ 정상 연결됨
WebSocket 메시지 송수신	✅ 정상 동작
WebSocket 자동 재연결	✅ 정상 동작
다중 사용자 테스트	✅ 5명 이상 동시 접속 가능
응답 속도 테스트	✅ 평균 응답 시간 100~200ms

---

6) WebSocket 테스트 최적화 방안

✅ ① 메시지 크기 제한

• 너무 긴 메시지는 WebSocket에서 처리할 수 없으므로 최대 길이 제한 추가

install(WebSockets) {
    maxFrameSize = 65536  // 64KB
}

---

✅ ② 비정상 종료 시 WebSocket 자동 복구

suspend fun autoReconnect(socket: DefaultWebSocketSession) {
    while (true) {
        try {
            socket.send(Frame.Text("PING"))
            delay(10000)  // 10초마다 연결 체크
        } catch (e: Exception) {
            socket.close()
            break
        }
    }
}

---

7) 다음 단계

이제 WebSocket이 정상적으로 동작하는지 테스트를 완료했습니다.
다음으로 6.1 백엔드 Docker 컨테이너화 및 배포를 진행하여
Ktor 서버를 Docker를 이용해 컨테이너로 배포하는 방법을 학습하겠습니다! 🚀