[javascript] Next.js를 사용하여 웹소켓 통신을 구현할 수 있나요?

24 Nov 2023

javascript

웹소켓 통신을 구현하기 위해 Next.js에서는 ws 라이브러리를 사용할 수 있습니다. ws 모듈은 Node.js에서 사용할 수 있는 WebSocket의 구현체입니다.

우선 Next.js 프로젝트를 생성하고, ws 모듈을 설치해야 합니다. 다음 명령어를 사용하여 ws 모듈을 설치합니다.

npm install ws

웹소켓을 사용하는 페이지를 작성하기 위해 pages 디렉토리에 파일을 생성합니다. 예를 들어, websocket.js 파일을 생성합니다.

import { useRef, useEffect } from 'react';
import WebSocket from 'ws';

export default function WebSocketPage() {
  const ws = useRef(null);

  useEffect(() => {
    // 웹소켓 연결
    ws.current = new WebSocket('ws://localhost:8080');

    // 연결 성공 시 이벤트 핸들러
    ws.current.onopen = () => {
      console.log('웹소켓 연결 성공');
    };

    // 메시지 수신 시 이벤트 핸들러
    ws.current.onmessage = (event) => {
      console.log('수신 메시지:', event.data);
    };

    // 연결 종료 시 이벤트 핸들러
    ws.current.onclose = () => {
      console.log('웹소켓 연결 종료');
    };

    return () => {
      // 컴포넌트 언마운트 시 웹소켓 연결 종료
      ws.current.close();
    };
  }, []);

  const sendMessage = () => {
    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
      ws.current.send('Hello, WebSocket!');
    }
  };

  return (
    <div>
      <button onClick={sendMessage}>메시지 전송</button>
    </div>
  );
}

위 코드에서는 useRef를 사용하여 웹소켓 객체를 유지하고, useEffect를 사용하여 페이지가 렌더링될 때 웹소켓을 연결하고, 언마운트될 때 연결을 종료합니다. 웹소켓 연결 성공, 메시지 수신, 연결 종료 시에는 해당 이벤트 핸들러를 설정할 수 있습니다.

sendMessage 함수는 클릭 이벤트 발생 시 웹소켓 연결이 열려있을 경우 메시지를 전송합니다.

위와 같이 Next.js와 ws 라이브러리를 함께 사용하면 웹소켓 통신을 구현할 수 있습니다. 구체적인 서버사이드 로직은 실제 서비스와 연동되는 부분으로, 해당 부분은 개별적으로 구현하셔야 합니다.