웹 소켓과 Socket.io

프로젝트를 진행하면서 Socket.io를 사용해볼 기회가 생겼다. 생소한 라이브러리였고, 웹 소켓에 대한 이해가 부족했기 때문에 많은 어려움이 있었다.

그동안(지금도) 어려움을 주었던 웹 소켓과 Socket.io에 대해 정리해보자.

 

 

---

 

웹 소켓이란?

 

웹 소켓은 사용자의 브라우저와 서버 사이의 인터랙티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고, 서버의 응답을 위해 서버를 폴링(polling) 없이도 이벤트 중심 응답을 받을 수 있습니다. — MDN 문서

 

예시를 들어 더 자세히 살펴보자.

 

 

REST API와의 차이점

REST API는 요청 → 응답 방식으로 동작한다. 클라이언트가 서버에 요청을 보내면 서버가 응답을 반환하는 구조로, 단방향 통신이다.

이 구조는 폴링(polling)이나 지연 문제가 발생할 수 있다.

Polling
Polling은 클라이언트가 주기적으로 서버에 요청을 보내 데이터 상태를 확인하는 방식

 

채팅 기능 예시

채팅기능을 REST API로 구현한다고 가정해보자.

상대의 답장을 받기 위해 주기적으로 서버에 데이터를 요청해야 한다. 이 방식은 요청이 많아질수록 서버에 부담을 주고, 실시간성이 저하될 수 있다.

 

 

웹 소켓

웹 소켓은 양방향 통신을 지원하는 프로토콜로 연결이 한번 설정되면, 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있다.

주요 특징

• 지속적인 연결 : 한 번 연결되면 끊어지지 않고 유지된다.
• 양방향 통신 : 클라이언트와 서버가 서로 데이터를 주고받을 수 있다.
• 낮은 오버헤드 : HTTP 요청/응답을 반복하지 않아 네트워크 오버헤드가 적다.

 

 

Socket.io

Socket.io는 웹 소켓을 기반으로 구축된 자바스크립트 라이브러리로, 실시간 통신을 쉽게 구현할 수 있도록 도와준다.

단순히 웹 소켓을 쉽게 구현하기 위한 라이브러리라고 생각할 수 있지만, Socket.io는 웹 소켓 외에도 다양한 프로토콜을 포함하고 있다.

Socket.io가 사용하는 프로토콜 중 하나가 웹 소켓이라고 생각하면 된다.

주요 기능

• 자동 재연결 : 연결이 끊어지면 자동으로 재연결을 시도한다.
• 브로드캐스팅 : 하나의 메세지를 여러 클라이언트에 동시에 전송한다
• 폴백 지원 : 웹 소켓이 지원되지 않을 경우, HTTP Long Polling으로 전환한다.

HTTP Long Polling
롱 폴링은 클라이언트가 요청을 보내면, 서버는 새로운 데이터가 있을 때까지 응답을 지연시킨다. 데이터가 도착하면 응답을 보내고, 클라이언트는 바로 다음 요청을 보낸다.
롱 폴링은 지속적인 연결을 유지하기 때문에 서버 부하가 발생할 수 있다.

 

 

사용 사례

• WebSocket : 실시간 채팅, 게임, 주식 데이터 업데이트
• HTTP Polling : 간단한 상태 체크
• Long Polling : 대기 시간이 길고 간헐적인 업데이트

 

 

---

Socket.io 활용

Socket.io는 이벤트 기반으로 작동한다.

서버나 클라이언트에서 특정 이벤트를 발생(emit) 시키고, 이를 수신(on)해 처리할 수 있다.

 

채팅 기능 예시

 

1.socket 인스턴스를 생성

import { io } from "socket.io-client"; 
const socket = io("URL");

 

2.이벤트를 정의, 발생(emit)

socket.emit("채팅","안녕하세요!") // "채팅"이라는 이벤트 정의, emit으로 이벤트 발생

 

3.서버로부터 이벤트 수신(on)

socket.on("채팅", (data) => { 
	console.log('서버로부터 수신된 메시지:', data); 
});

 

4.연결 해제(off)

socket.off('채팅');

 

 

 

---

마무리

이번 프로젝트에서 Socket.io를 사용하며 실시간 통신에 대해 이해할 수 있었다. 아직 부족한 부분이 많지만, 앞으로의 프로젝트에서 유용하게 활용할 수 있을 것 같다.

 

 

참고 자료

https://velog.io/@eunddodi/채팅-개발을-위한-Socket.IO-이해하기

https://socket.io/docs/v4/#what-socketio-is

https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API

https://blog.stackademic.com/20-concepts-about-socket-io-every-developer-should-master-902ffcb19e63