[javascript] Next.js와 WebSocket을 함께 사용할 수 있나요?

24 Nov 2023

javascript

다음은 Next.js와 WebSocket을 함께 사용하는 예시 코드입니다:

// pages/index.js

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

export default function Home() {
  useEffect(() => {
    const socket = io(); // WebSocket 연결
    socket.on('message', (data) => {
      console.log(data); // 메시지 수신 시 동작할 코드
    });

    return () => {
      socket.disconnect(); // 컴포넌트 언마운트 시 연결 종료
    };
  }, []);

  return (
    <div>
      <h1>WebSocket 예시</h1>
    </div>
  );
}

위 코드에서는 socket.io-client 라이브러리를 사용하여 WebSocket 연결을 구현합니다. useEffect 훅을 사용하여 컴포넌트가 마운트되면 WebSocket을 연결하고, 메시지를 수신할 때마다 콘솔에 로그를 출력하도록 설정합니다. 컴포넌트가 언마운트되면 WebSocket 연결을 종료합니다.

이 예시 코드는 Next.js 프로젝트의 pages/index.js 파일에 작성됩니다. WebSocket에서 전달 받은 데이터를 화면에 렌더링하려면 해당 코드를 수정하면 됩니다.

참고 자료:

Next.js 공식 문서: https://nextjs.org/
socket.io 공식 문서: https://socket.io/
MDN 웹 문서(WebSocket): https://developer.mozilla.org/en-US/docs/Web/API/WebSocket