Socket.io 소켓 IO 란?

Socket.io 란?

소켓통신을 잘 모른다면 이 게시글을 먼저 읽고 오자.

실시간 양방향 통신을 구현하기 위해 가장 많이 사용되는 라이브러리이다. 다양한 언어로 구현되어 있는 구현체가 있으며, 이름처럼 주로 웹소켓을 이용한 소켓 통신을 하지만, 웹브라우저 지원이 되지 않거나 다양한 네트워크 문제가 존재하는 경우 폴링 방식으로 통신하기도 한다.

공식문서 본문 중...

Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.

Diagram of a communication between a server and a client.

It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.

Socket.io 사용 전 알아야 할 사실

순수한 WebSocket 서버와의 연결은 어렵다.

Socket.io 는 순수한 WebSocket 서버에는 접속할 수 없다. 그 이유는 Socket.io 가 '가능할 때'만 웹소켓 서버를 이용하기 때문이다.

모바일 앱의 백그라운드에서 돌도록 만들어진 앱이 아니다.

Socket.io 라이브러리는 TCP 연결을 열어놓기 때문에, 모바일 기기에서 높은 배터리 사용량을 가져갈 수 있다. 메세지 앱을 구현한다면, FCM (Firebase Cloud Messaging) 과 같은 것을 활용하는 것이 좋다.

Socket.io 의 장점

• HTTP long-polling fallback
  • 웹소켓이 사용 불가능한 경우 폴링으로 연결방식이 자동 대체된다.
• Automatic reconnection
  • 클라이언트와 연결이 끊긴 경우 자동으로 일정 딜레이를 두며 재연결을 시도한다.
• Packet Buffering
  • 클라이언트 연결이 끊긴 경우 패킷이 자동으로 버퍼되고, 다시 연결된 후에 전송된다.
• Broadcasting
  • 연결된 모든 클라이언트에게 메세지 보내기 등이 가능하다.
• Multiplexing
  • 사용자가 특정 그룹에 참여하게 만들어, 특정 그룹에게만 메세지 보내는 것이 가능하다.

기본 소스코드로 통신해보기

아래의 소스코드는 군더더기 없는 기본 소스코드이다. emit 으로 보내고 on 으로 받는다는 것만 알면 거의 다 아는 것이라 생각한다.

server.js

import { Server } from "socket.io";

const io = new Server(3000);

io.on("connection", (socket) => {
  // 클라이언트로 메세지 보내기
  socket.emit("hello from server", 1, "2", { 3: Buffer.from([4]) });

  // 클라이언트로부터 메세지 받기
  socket.on("hello from client", (...args) => {
    console.log("클라이언트로부터 메세지 받음", args);
  });
});

client.js

import { io } from "socket.io-client";

const socket = io("ws://localhost:3000");

// 서버로 메세지 보내기
socket.emit("hello from client", 5, "6", { 7: Uint8Array.from([8]) });

// 서버로부터 메세지 받기
socket.on("hello from server", (...args) => {
  console.log("서버로부터 메세지 받음", args);
});

레퍼런스

Socket.io 공식문서

기타 세부적인 이용법은 위의 공식문서를 참고하자.