Socket.io

Socket.io

1. Socket.io개요

Socket.io란?

Socket.io는 클라이언트와 서버 간의 실시간 양방향 및 이벤트 기반 통신을 가능하게 하는 라이브러리이다.

이 라이브러리는 WebSocket 프로토콜 위에서 동작하며, 통신 과정을 단순화하고 성능을 개선하기 위한 다양한 기능을 추가로 제공한다.

Socket.io는 다양한 네트워크 환경에서도 안정적인 연결을 보장하며, 브라우저 및 Node.js와 함께 사용할 수 있다.

---

Socket.io의 주요 특징

1. 이벤트 기반 통신
   • Socket.io는 데이터를 송수신할 때 각각의 작업을 이벤트로 정의하고 처리할 수 있는 구조를 제공한다.
   • 예를 들어, message 이벤트를 사용하여 특정 메시지를 전송하거나, join 이벤트를 사용하여 사용자를 특정 채팅방에 추가할 수 있다.
2. 자동 재연결
   • 네트워크 상태가 불안정하여 연결이 끊어졌을 경우, Socket.io는 자동으로 재연결을 시도한다.
   • 재연결은 사용자가 별도로 처리하지 않아도 내부적으로 처리되며, 성공하면 기존 연결 상태를 복원한다.
3. 다양한 전송 프로토콜 지원
   • Socket.io는 WebSocket을 기본으로 사용하지만, 네트워크 환경에 따라 HTTP Long Polling 등 다른 전송 프로토콜로 자동 전환하여 통신을 유지한다.
4. Cross-Origin 지원
   • 다른 도메인 간의 통신이 필요한 경우 CORS(Cross-Origin Resource Sharing)를 지원하여 설정을 간단하게 처리할 수 있다.
5. 확장성
   • Socket.io는 대규모 애플리케이션에서도 사용 가능하며, 수천 개의 클라이언트와의 동시 연결을 처리할 수 있다.

---

2. Socket.io주요 이벤트

Socket.io는 다양한 이벤트를 사용하여 클라이언트와 서버 간 통신을 처리한다.

아래는 기본적으로 제공되는 주요 이벤트에 대한 설명이다.

1. 기본 이벤트

1. connection 이벤트
   • 클라이언트가 서버에 성공적으로 연결되었을 때 발생하는 이벤트이다.
   • 이 이벤트는 클라이언트와의 상호작용 초기화를 위한 준비 단계로 사용된다.
   • 예: 연결된 클라이언트에게 초기 데이터를 전송하거나, 사용자를 특정 채팅방에 추가한다.
2. disconnect 이벤트
   • 클라이언트가 연결을 해제했을 때 발생하는 이벤트이다.
   • 클라이언트의 연결 상태를 추적하거나, 연결 종료에 따른 정리 작업을 수행하는 데 유용하다.
3. disconnecting 이벤트
   • 클라이언트가 연결을 끊으려는 과정에서 발생하는 이벤트이다.
   • 연결이 해제되기 전에 필요한 작업(예: 데이터 저장 또는 상태 업데이트)을 수행할 수 있다.
4. error 이벤트
   • 통신 중 오류가 발생했을 때 발생하는 이벤트이다.
   • 네트워크 문제나 잘못된 요청으로 인해 연결이 실패하거나 통신 오류가 발생한 경우에 유용하다.

---

2. 사용자 지정 이벤트

Socket.io는 기본 이벤트 외에도 개발자가 사용자 지정 이벤트를 정의하여 사용할 수 있다.

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

이벤트를 보내는 쪽 :

socket.emit("hello", "world", (response) => {
	console.log(response); // "got it"
});

이벤트를 받는 쪽 :

socket.on("hello", (arg, callback) => {
	console.log(arg); // "world"
	callback("got it");
});

• 이벤트 생성 방식
  • 서버에서 emit() 메서드를 사용하여 이벤트와 데이터를 보낼 수 있다.
  • 클라이언트에서는 해당 이벤트를 on() 메서드로 수신한다.
• 예시:
  • 서버에서 chat message 이벤트를 생성하여 클라이언트에게 메시지를 전송한다.
  • 클라이언트는 chat message 이벤트를 수신하여 해당 메시지를 화면에 표시한다.

---

3. Socket.io의 주요 구성

1. 서버 측 Socket.io 설정

Socket.io는 Node.js 환경에서 사용되며, 다음과 같은 과정으로 설정된다.

1. Socket.io 모듈 불러오기
   • const io = require('socket.io')(server);로 모듈을 로드하고, 서버와 연동한다.
2. connection 이벤트 처리
   • io.on('connection', (socket) => { ... })를 통해 클라이언트 연결을 처리한다.
   • 이 블록 안에서 클라이언트와의 상호작용을 정의할 수 있다.

---

2. 클라이언트 측 Socket.io설정

클라이언트는 브라우저에서 io() 메서드를 호출하여 서버와의 연결을 설정한다.

1. Socket.io 파일 로드
   • 클라이언트는 Socket.io 라이브러리 파일을 불러와야 한다.
   • 예: <script src="/socket.io/socket.io.js"></script>.
2. 연결 생성
   • const socket = io();를 통해 소켓 객체를 생성하고 서버와 연결한다.
3. 이벤트 처리
   • socket.on('eventName', callback)을 사용하여 서버에서 전송된 이벤트를 처리한다.

---

4. Socket.io와 WebSocket의 차이점

1. WebSocket
   • WebSocket은 클라이언트와 서버 간의 양방향 통신을 지원하는 프로토콜이다.
   • 기본적인 실시간 통신 기능만 제공하며, 개발자가 직접 관리해야 하는 부분이 많다.
2. Socket.io
   • Socket.io는 WebSocket 위에서 동작하며, WebSocket의 기능을 확장하고 사용성을 개선한 라이브러리이다.
   • 자동 재연결, 이벤트 기반 구조, 추가 프로토콜 지원 등의 부가 기능을 제공한다.
   • 네트워크 환경에 따라 WebSocket 외에도 다른 전송 방식으로 자동 전환된다.

---

5. Socket.io의 룸(Room) 기능

룸(Room)이란?

룸은 Socket.io에서 제공하는 기능으로, 클라이언트를 그룹화하여 특정 그룹에만 데이터를 송수신할 수 있도록 한다.

1. 룸 생성 및 참여
   • 클라이언트는 socket.join('roomName') 메서드를 사용하여 특정 룸에 참여할 수 있다.
2. 룸 내 메시지 전송
   • 서버는 io.to('roomName').emit('eventName', data) 메서드를 사용하여 특정 룸에 있는 모든 클라이언트에게 메시지를 보낼 수 있다.
3. 룸 나가기
   • 클라이언트는 socket.leave('roomName') 메서드를 사용하여 특정 룸에서 나갈 수 있다.