Socket.IO 모듈 사용하기

게시 2025/04/26 업데이트 2025/05/18

By 개발구리🐸 4 분읽는 시간

Socket.IO 모듈

개발자가 웹소켓을 보다 간편하게 사용할 수 있는 모듈입니다.
ws 보다 편의성이 대폭 개선되었기에 개발이 수월합니다.

설치

npm i socket.io

사용 방법

기존의 ws 를 사용할 때 설정했던 socket.js 파일의 내용을 수정해야합니다.

  
const SocketIO = require('socket.io');

module.exports = (server)=>{
    const io = SocketIO(server,{path: '/socket.io'});

    io.on('connection',(socket)=>{
        const req = socket.request;
        const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
        console.log('새로운 클라이언트 접속',ip, socket.id);

        socket.on('reply',(data)=>{
            console.log(data);
        })

        socket.on('error',console.error);

        socket.on('disconnect',()=>{
            console.log('클라이언트 접속 해제',ip, socket.id); 
            clearInterval(socket.interval);
        });

        socket.interval = setInterval(()=>{
            socket.emit('news','Hello Socket.IO')
        },3000)
    })
}

여기서 ws 와 달라진 부분을 찝어보자면

socket.io 의 connection 이벤트가 2개의 콜백 파라미터를 받지 않고 하나의 콜백 파라미터만을 받는 다
사용자의 요청(req) 를 파라미터에서 찾아서 사용한다
ws 에서는 send() 와 on() 을 통해 메시지를 주고 받았지만 socket.io 에서는 emit() 과 on() 을 사용한다.
on() 에서는 정해진 이벤트의 유형을 사용하는 것이 아닌 개발자가 이벤트의 키를 지정하여 사용한다
send() 에 대응되는 emit() 은 이벤트의 키-값 형태로 메시지를 보낸다
메시지를 보낼 때 연결 상태를 확인하지 않아도 socket.io 가 연결상태를 확인 후 전달한다

브라우저에서 Socket.io 사용하기

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GIF 채팅방</title>
</head>
<body>
    <div>F12를 눌러 console 탭과 network 탭을 확인하세요</div>
    <!--io 를 사용하기 위한 스크립트-->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io.connect('ws://localhost:8005',{
            path:'/socket.io'
        });
        
        socket.on('news',(data)=>{
            console.log(data);
            socket.emit('reply','Hello NodeJS');
        })

    </script>
    </body>
</html>

여기서도 몇가지 ws 와 달라진 점이 있습니다.

ws 와 달라진 부분은 연결할 때 path 속성이 필요해짐
on() 이벤트를 통해 메시지를 받을 때 이벤트의 키를 지정함
emit() 할 때 키-값 형태로 메시지를 전달함

ws 와 socket.io 비교

👍폴링 지원 여부의 확인은 개발자 도구에서 아래와 같이 확인이 가능합니다.
가장 마지막 연결은 ws 프로토콜을 사용했지만 위 3회의 시도는 http 프로토콜을 사용한 폴링 연결을 시도한 흔적입니다.

Node.js

Socket.IO 모듈

설치

사용 방법

브라우저에서 Socket.io 사용하기

ws 와 socket.io 비교

인기 태그