socket.io

socket.io

socket.io 란 서버와 클라이언트가 상호작용하는 웹 서비스 통신 기술인 WebSocket을 간단하게 사용할 수 있도록 도와주는 모듈이다. 서버와 클라이언트는 아래 코드와 같이 연결하여 서로 통신할 수 있도록 만들 수 있다.

(아래 서버 코드 예시는 Node.js에서 쉽게 서버를 구성할 수 있게 해주는 express를 사용했다.)

// server
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server, { cors: { origin: '*' } });

io.sockets.on('connection', (socket) => {
  console.log('connected');

  socket.on('disconnect', () => {
    console.log('disconnected');
  });
  
  ... // socket codes (emit, on)
  
});

server.listend(socketPort, () => console.log('socket io server listening'));

// client
const socket = io.connect(`http://${hostName}:${socketPort}`);

... // socket codes (emit, on)

위 예시에서 hostName 과 socketPort 변수는 적절하게 입력해주어야 한다. 위 코드와 같은 경우, eventEmitter와 비슷한 형식인 emit 과 on 메소드로 서버와 클라이언트가 양방향 통신을 할 수 있게 된다.

namespace, room

채팅 기능을 생각하면 서버와 클라이언트가 통신할 때, 어느 한 클라이언트가 emit한 메시지를 다른 모든 클라이언트가 받게되면 안된다. 특정 채팅방 안에 속해있는 클라이언트들만 해당 메시지를 받아야 한다. socket.io의 namespace와 room은 이러한 기능을 구현할 수 있도록 도와준다.

namespace는 기본적으로 전체 클라이언트가 속해있도록 설정되어있다. 이 설정을 변경하기 위해서는 서버와 클라이언트가 아래와 같이 연결하고 이벤트를 emit하여야 한다.

// server (of 메소드 사용)
const chat = io.of('/chat');
chat.on('connection, (socket) => {
  ... // socket 연결 후 코드
});

// client (socket 연결 시 주소 변경)
io.connect(`http://${hostName}:${socketPort}/chat`, options);

// event emit
io.of('/chat').emit('event name', chatData);

위의 경우 namespace가 /chat에 속해있는 클라이언트만 통신하게 된다.

room의 경우에는 namespace안에 특정 그룹들을 만드는 개념이다. 아래와 같이 room에 들어가고 나가게 만들 수 있으며, 해당 room에게만 이벤트를 emit하는 방식으로 채팅방과 같은 기능을 구현할 수 있다.

socket.join('chat room'); // 채팅방 입장
socket.leave('chat room'); // 채팅방 퇴장

io.to('chat room').emit('event name', chatData); // 채팅방 내 모두에게 이벤트 발송

broadcast, to

socket.io에서 namespace, room을 사용하지 않는 경우에도 특정 클라이언트에게만 이벤트를 emit할 수 있는 방법이 크게 세 가지가 있다.

첫 번째는 나를 포함한 전체이다.

io.emit('event name', data);

두 번째는 나를 제외한 전체이다. (broadcast 객체 사용)

socket.broadcast.emit('event name', data);

세 번재는 특정한 하나의 클라이언트이다. (to 사용)

io.to(socketId).emit('event name', data);

참고 자료

ZeroCho님 socket.io 정리 자료