[Node.js] Socket.IO 사용법

Socket.IO 란?

Node.js 기반으로 브라우저와 서버 간의 실시간 양방향 이벤트 기반 통신을 가능하게 하는 라이브러리이다. WebSocket을 지원하지 않는 브라우저도 지원하며 멀티 디바이스(web, android, ios, windows)를 지원하는 특징이 있다. 즉, 브라우저가 WebSocket을 지원하면 일반 WebScoket 방식으로 동작하고 간단하게 사용할 수 있도록 도와주며, 지원하지 않는 브라우저면 HTTP 롱 폴링 방식으로 대체한다.

롱 폴링(Long polling)

주기적으로 무한히 물어보는 polling 방식과는 달리 long polling은 Request를 보내고 Time out 될 때까지 무한정 기다린다. Time out이 되어 서버가 끊을 때 Client는 재연결한다. 서버로부터 변경된 데이터가 있어 Response가 온다면 바로 client에게 전달하고 연결이 종료된다. Client는 정보를 받는 즉시 다시 Request를 보내는 식으로 하여 연결은 무한히 지속되며 Client는 실시간으로 데이터를 받는 것처럼 보인다.

다만 다수의 클라이언트에게 동시에 이벤트가 발생되는 경우 서버의 부담이 급증하여 다수의 사용자가 동시에 사용하는 경우에는 적합하지 않다. 또한 요청 간격이 줄어드면 polling 방식보다 더 많은 데이터를 보내게 된다.

WebSocket

웹 브라우저는 http 프로토콜을 기반으로 Request/Response로 동작하는데 실시간 통신은 불가능하다. Websocket은 웹 서버와 웹 브라우저 간 실시간 양방향 통신 환경을 제공해주는 실시간 통신 기술이다. WebSocket은 웹 브라우저만 지원하기 때문에 Socket.io 를 사용하여 웹 브라우저 지원 여부에 따라 webSocket을 사용/long polling 사용 모두 지원할 수 있다.

TCP Socket과 다른 점은 처음 접속이 http request의 handshaking 과정을 통해 이루어진다는 점이다. http request를 그대로 사용하여 기존의 80, 443 포트로 접속한다.

Socket.IO Function

socket.emit(eventName[, ...args][, ack])

• eventName의 이벤트를 발생시킨다. args에 전달하고자 하는 데이터를 포함한다.

socket.emit("ferret", "tobi", (data) => {
  console.log(data); // data will be "woot"
});

// server:
//  io.on("connection", (socket) => {
//    socket.on("ferret", (name, fn) => {
//      fn("woot");
//    });
//  });

socket.send([...args][, ack])

• emit과의 차이점은 eventName이 없다는 것이다. eventName은 message로 고정되어 `emit(“message”,[..args])와 같은 역할을 한다.

socket.on(eventName, callback)

• emit으로 발생시킨 eventName의 이벤트 핸들러를 등록한다.

socket.on("news", (data) => {
  console.log(data);
});

// with multiple arguments
socket.on("news", (arg1, arg2, arg3, arg4) => {
  // ...
});
// with callback
socket.on("news", (cb) => {
  cb(0);
});

socket.once(eventName, callback)

• eventName의 일회성 이벤트 핸들러이다. 다음에 한번 더 eventName 이벤트가 트리거되면 이 리스너가 제거된 다음 호출된다.

  socket.once("my-event", () => {
  // ...
  });
  

socket.onAny(callback)

• eventName과 상관없이 포괄적으로 이벤트를 수신한다. 모든 이벤트가 수신될 때마다 작동한다. 아래 코드와 같이 event에 수신한 이벤트의 eventName이 할당되고, args에 수신한 이벤트의 데이터가 할당된다. webSocket의 onMessage와 같은 역할을 한다.

  socket.onAny((event, ...args) => {
  console.log(`got ${event}`);
  });
  

Socket.IO 사용법

간단한 Client, Server 예제로 요청/응답을 주고받는 코드이다.

Client 측

1. socket.io 객체 생성

const io = require("socket.io-client");

const socketClient = io("http://127.0.0.1:20111");

객체를 생성하고 연결할 서버를 설정한다.

2. 연결 이벤트 처리

socketClient.on("connect",()=>{
    console.log("Connect server by Socket.io");
});

연결 이벤트가 발생했을 때 위와 같은 문구를 콘솔 창에 출력한다. 다음과 같은 이벤트를 처리할 수 있다.

• connect: 연결 성공
• disconnect: 연결 종료
• error: 에러 발생
• 사용자 정의 이벤트

3. 이벤트 발생

socketClient.emit("request",{data:"Send Request"});

emit 함수를 이용하여 request 이름과 Send Request 내용을 담은 이벤트를 발생시킨다.

4. response 이벤트 처리

socketClient.on("response",req =>{
    console.log(req);
});

response라는 이름의 이벤트를 받았을 때 해당 이벤트의 내용을 req로 받아서 콘솔 창에 출력한다.

OUTPUT

Connect server by Socket.io
{ data: 'Recieve Respond' }

Server 코드가 실행되면 위와 같이 서버 측에서 보낸 응답이 출력된다.

Server 측

1. http 서버, socket.io 객체 생성

const http = require('http');
const io = require("socket.io");

const httpServer = new http.Server();
const socketServer = io(httpServer);

socket.io 객체에 연결할 http 서버를 설정한다.

2. http 서버 구동

httpServer.listen(20111, '127.0.0.1', () => {
    console.log('socket server listend: ', `http://127.0.0.1:20111`);
});

client에서 설정한 동일한 포트 번호와 경로를 설정해 socket 연결을 기다린다.

3. 이벤트 처리

socketServer.on('connection', socket => {
    console.log("Connect client by Socket.io");
    
    socket.on("request", req => {
        console.log(req);
        socket.emit("response", { data: "Send Respond" });
    });
});

client와 연결되면 Connect client by Socket.io를 콘솔창에 출력한다. request 이벤트를 받으면 해당 내용을 콘솔 창에 출력하고 잘받았다는 이벤트인 response를 발생시킨다.

OUTPUT

socket server listend:  http://127.0.0.1:20111

server 코드를 실행하면 아직 client 코드를 실행하지 않았으므로 위와 같이 listen을 실행한 코드만 출력된다.

Connect client by Socket.io
{ data: 'Send Request' }

client코드를 실행하면 위와 같이 수신한 이벤트를 처리한 코드가 출력된다.

client.js 전체 코드

const io = require("socket.io-client");

const socketClient = io("http://127.0.0.1:20111");

socketClient.on("connect",()=>{
    console.log("Connect server by Socket.io");
});

socketClient.emit("request",{data:"Send Request"});

socketClient.on("response",req =>{
    console.log(req);
});

server.js 전체 코드

const http = require('http');
const io = require("socket.io");

const httpServer = new http.Server();
const socketServer = io(httpServer);

httpServer.listen(20111, '127.0.0.1', () => {
    console.log('socket server listend: ', `http://127.0.0.1:20111`);
});

socketServer.on('connection', socket => {
    console.log("Connect client by Socket.io");
    
    socket.on("request", req => {
        console.log(req);
        socket.emit("response", { data: "Recieve Respond" });
    });
});

Reference

• https://socket.io/docs/v4/
• https://www.pubnub.com/blog/http-long-polling/
• https://brunch.co.kr/@adrenalinee31/2