[Next.js] node.js와 socket.io를 이용한 websocket

클라이언트 버전 정보

Next.js : 13.4.9
socket.io : 4.7.1
socket.io-client: 4.7.1

서버 버전 정보

node.js : 18.12.0
express : 4.18.2
socket.io : 4.7.1

 

Next.js로 여러 웹 프로젝트를 개발하던 중 이번엔 websocket을 사용해보기로 했다.

먼저 websocket이 무엇인지부터 알고 넘어가는 것이 중요하다.

 

기존 웹은 단방향 통신이며 필요시에 데이터를 송/수신 할 수 있다.

그에 비해 websocket은 서버와 클라이언트간에 실시간으로 양방향 통신을 하게 해주는 녀석이다.

간단히만 말하자면 이런 것이고, 자세한 개념은 구글에 셀 수도 없이 널렸으니 개념이 이해될 때까지 찾아보기를 바란다.

 

socket 통신을 위해 어떤 라이브러리를 사용할지 찾아본 결과 가장 많이 사용되는 socket.io를 사용하기로 했다.

먼저 Next.js의 API Route를 사용하여 API를 작성하려고 했다.

그런데 app/api와 같은 경로를 사용할 경우 에러가 발생한다.

이에 대해 검색을 해보니 Next.js 버전이 13.2.5 이후 버전인 경우에 동작을 하지 않는다는 stackoverflow의 답변이 있다.

또는 사용을 하려면 pages/api 경로를 사용해야 한다는 github의 답변도 있다.

필자는 이 app/api 구조를 바꾸고 싶지 않았기도 했고, 궁극적으로 API동작을 분리시켜서 관리하는 것이 더 바람직한 방향이라고 판단하여 node.js와 express를 사용하여 API를 구현하기로 했다.

 

먼저 서버쪽 작업을 히기로 했다.

새로운 폴더를 생성하고 npm init 명령어를 입력해 초기셋팅을 했다.

npm init

 

그 후, 구현에 필요한 라이브러리들을 설치했다.

npm i express socket.io

 

서버 측에서 동작할 코드는 아래와 같다.

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const socketIO = require('socket.io')(server);

const port = process.env.PORT || 5000;

server.listen(port, () => {
    console.log('Socket IO server listening on port' + port);
})

// socket이 연결되었을 때
socketIO.on('connection', (socket) => {

	// success라는 이벤트가 발생했을 때
    socketIO.emit('useSuccess', '정상적으로 처리되었습니다.');
});

 

클라이언트측에서 socket.io와 통신하기 위해 socket.io-client 라이브러리를 설치했다.

npm i socket.io-client

단순 기능 구현만 하기 위해 만든 Next.js의 코드는 아래와 같다.

'use client'

import { useToast } from "@chakra-ui/react";
import { useEffect } from "react";
import SocketIOClient from "socket.io-client";

export default function Home() {
  const toast = useToast();

  useEffect(() => {
    const socket = SocketIOClient("http://localhost:5000");

    socket.on("connect", () => {
      socket.on('useSuccess', () => {
      	// chakra-ui의 Toast component
        toast({
          title: 'succeed!',
          status: 'success',
          duration: 3000
        });
      })
    });
  }, []);
  
  return (
    <main></main>
  )
}

 

그런데 위 Next.js 코드를 실행시켜보면 브라우저의 콘솔 창에서 CORS 에러가 발생했음을 확인할 수 있다.

이에 따라 서버측 코드에 cors라이브러리를 설치하여 추가해주었다.

npm i cors

 

서버 측 코드를 아래와 같이 수정했다.

const cors = require('cors');
...
const socketIO = require('socket.io')(server, { cors: { origin: "*" } });

app.use(cors())
...

 

이제 실행해보면 문제 없이 websocket이 잘 동작하는 것을 확인할 수 있다.