[NestJS] Websocket을 활용한 실시간 채팅 구현 #2 - 클라이언트 기본 설정

 

지난 포스팅에서는 Websocket 통신을 위해 기본적은 서버 세팅을 마쳤다.

 

다음으로는 간단한 테스트를 위해 클라이언트를 간단하게 구성해보자

 

라이브러리 설치

npm install socket.io-client

 

Websocket 서버와의 통신을 위해 socket.io-client 라이브러리를 프로젝트에 추가한다

 

컴포넌트 구성

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const SERVER_URL = 'http://localhost:8080'; // NestJS 서버의 URL과 포트

function ChatClient() {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  // 소켓 연결 설정
  useEffect(() => {
    const newSocket = io(SERVER_URL, { transports : ['websocket'] });
    setSocket(newSocket);

    return () => newSocket.close();
  }, [setSocket]);

  // 메시지 수신 리스너 설정
  useEffect(() => {
    if (!socket) return;

    socket.on('chat', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
  }, [socket]);

  // 메시지 전송 핸들러
  const sendMessage = () => {
    if (socket) {
      socket.emit('chat', { author: 'User', body: input });
      setInput('');
    }
  };

  return (
    <div>
      <div>
        {messages.map((message, index) => (
          <p key={index}>
            {message.author}: {message.body}
          </p>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        type="text"
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default ChatClient;

 

설치가 완료되면 테스트 해볼 수 있도록 리액트 컴포넌트를 만들어보자.

사용자로부터 메시지를 입력받아 서버로 전송하고, 서버로부터 메시지를 수신해서 화면에 표시하는 예시이다.

 

import React from "react";
import ChatClient from "./ChatClient"; // ChatClient 컴포넌트를 import

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Chat Application</p>
      </header>
      <ChatClient /> {/* ChatClient 컴포넌트를 사용 */}
    </div>
  );
}

export default App;

 

APP.js에서 ChatClient를 사용할 수 있도록 import 해준다.

ChatClient에서 8080 포트로 수신 대기 하기 때문에 백엔드에서도 아래와 같이 포트 대기를 해준다

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(8080);
}
bootstrap();

 

테스트 화면

 

 

react / nestjs를 사용하여 브라우저에서 메시지를 전송하는 것을 확인했다.

다음엔 채팅방을 구성해보자.