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

24 Nov 2023

javascript

네, Next.js를 사용하여 웹 소켓 서버를 구현할 수 있습니다. Next.js는 Express.js를 사용하여 서버 측 로직을 구현할 수 있으며, 이를 통해 웹 소켓 기능을 추가할 수 있습니다.

먼저, Next.js 프로젝트를 생성하고 의존성을 설치해야합니다. 터미널에서 다음 명령을 실행하여 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app my-app

그런 다음 websocket 패키지를 설치합니다. 터미널에서 다음 명령을 실행합니다.

npm install ws

웹 소켓 서버를 구현하기 위해선 api 디렉토리를 생성한 후 그 안에 websocket.js 파일을 만들어야합니다. websocket.js 파일은 Next.js의 API 엔드포인트로 사용됩니다.

웹 소켓 서버 코드를 작성하기 전에 websocket.js 파일의 내용을 다음과 같이 작성합니다.

import WebSocket from 'ws';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // 웹 소켓 연결을 처리하는 로직
    const wss = new WebSocket.Server({ noServer: true });

    wss.on('connection', (ws) => {
      // 클라이언트와의 연결이 성공적으로 이루어졌을 때 실행되는 로직
      ws.on('message', (message) => {
        // 클라이언트로부터 메시지를 받았을 때 실행되는 로직
        console.log('Received message:', message);
        // 클라이언트로 메시지를 전송하는 예시
        ws.send('Server received your message: ' + message);
      });

      ws.on('close', () => {
        // 클라이언트와의 연결이 종료되었을 때 실행되는 로직
        console.log('Client disconnected');
      });
    });

    // wss를 HTTP 서버와 연동시킵니다.
    res.socket.server.on('upgrade', (request, socket, head) => {
      wss.handleUpgrade(request, socket, head, (socket) => {
        wss.emit('connection', socket, request);
      });
    });
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end('Method Not Allowed');
  }
}

이제 웹 소켓 서버 코드를 작성했으므로, Next.js에서 제공하는 서버 기능을 활용하여 웹 소켓 서버를 실행할 수 있습니다. Next.js의 서버 기능을 사용하기 위해 next.config.js 파일을 생성하고 다음 내용을 추가합니다.

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/websocket',
        destination: '/api/websocket.js',
      },
    ];
  },
};

이제 웹 소켓 서버를 실행할 준비가 되었습니다. 터미널에서 다음 명령을 실행하여 Next.js 앱을 실행합니다.

npm run dev

웹 소켓을 사용하는 클라이언트 앱에서 Next.js의 /api/websocket 엔드포인트로 접속하면 웹 소켓 연결이 성립됩니다. 클라이언트로부터 받은 메시지를 서버에서 출력하고, 다시 클라이언트로 메시지를 전송하는 예시 코드입니다.

웹 소켓 클라이언트 측 예시 코드:

const socket = new WebSocket('ws://localhost:3000/api/websocket');

socket.onopen = () => {
  console.log('Connected to WebSocket server');
  socket.send('Hello server!');
};

socket.onmessage = (event) => {
  console.log('Received message from server:', event.data);
};

socket.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

이제 Next.js에서 웹 소켓 서버를 구현하는 방법을 알게되었습니다. Next.js를 사용하면 웹 소켓 서버 구현 및 관리가 훨씬 쉬워집니다.