Socket.IO에 대해서

공식 웹사이트 : https://socket.io/

 

Socket.IO는 서버와 클라이언트(브라우저)가 실시간으로 데이터를 주고받을 수 있게 해주는 통신 라이브러리이다. 

보통 Http요청은 한번 보내면 끝이지만, socket.io는 연결을 계속 유지해서 서버가 먼저 말을 걸 수도 있다. 이 연결을 소켓(Socket)이라 부르고, 이 소켓이 연결되고 끊기고 메시지를 받을 때 마다 이벤트(event)가 발생된다.

 

Http는 질문-답변의 구조,
Socket은 계속 대화하는 **채팅방**의 구조

 

1. Socket.IO란

웹 클라이언트와 서버 간에 실시간(Real-time), 양방향(Bidirectional), 이벤트 기반(Event-based) 통신을 가능하게 해주는 라이브러리이다.

웹에서 채팅, 알림, 실시간 협업 문서 등 데이터가 끊임없이 주고받아져야 하는 서비스를 만들 때 가장 널리 사용되는 도구 중 하나이다.

 

2. Socket.IO의 특징

socket.io는 웹소켓(WebSocket)이라는 통신 프로토콜을 더 쉽게 사용할 수 있도록 '사용하기 편한 인터페이스'와 '연결의 안정성을 높이는 부가 기능들'을 추가한 라이브러리라고 한다.

• 실시간 양방향 통신 : 클라이언트(브라우저) - 서버가 언제든지 서로에게 데이터를 보낼 수 있다.
• 자동 재연결 및 폴백(Fallback) : 통신이 끊어져도 자동으로 재연결을 시도하며, 사용하는 브라우저나 네트워크 환경이 웹소켓을 지원하지 않을 때 자동으로 다른 통신 기술로 전환한다(Fallback). 이 덕에 어떤 환경에서든 실시간 통신을 보장한다. 아래와 같은 여러 기술을 사용한다.
  • HTTP long-polling
  • WebSocket
  • WebTransport
• 이벤트 기반 : 데이터는 특정 이벤트 이름과 함께 주고받아지는데, 예를 들어 socket.emit('chat message', '안녕')처럼 이벤트를 전송하고, socket.on('chat message', ()=>{})로 해당 이벤트를 수신한다.

3. Socket.IO의 구성 요소

Socket.IO는 클라이언트와 서버, 두 부분으로 구성된다.

1️⃣ 클라이언트(Client-side)

주로 웹 브라우저에서 사용되며 JavaScript의 라이브러리인 socket.io-client를 사용한다.

서버에 연결하고, 이벤트를 보내거나 서버로부터 이벤트를 받는다.

 

Socket.IO - client의 기본 구조

import { io } from 'socket.io-client'

// 1. 서버 연결(주소는 서버의 socket.io 주소)
const socket = io('https://example.com', {
  path: '/gateway', // 서버 소켓 경로
  auth: { userId: 'user01' }, // 서버로 보낼 인증 정보
  transports: ['websocket'], // WebSocket만 사용
})

// 2. 서버와 연결되었을 때 실행
socket.on('connect', () => {
  console.log('✅ 연결 성공:', socket.id)
})

// 3. 서버가 보낸 메시지를 받을 때(메시지를 수신했을 때) 실행
socket.on('message', (msg) => {
  console.log('📩 서버로부터 수신:', msg)
})

// 4. 연결이 끊어졌을 때 실행
socket.on('disconnect', () => {
  console.log('🔌 연결 끊김')
})

// 5. 연결 중 오류가 발생했을 때 실행
socket.on('connect_error', (err) => {
  console.log('❌ 연결 오류:', err.message)
})

// 6. 메시지 전송
socket.emit('message', { text: '안녕 서버!' })

• io()로 연결
• on('eventName', callback)으로 이벤트 듣고
• emit('eventName', date)로 메시지를 보낸다. 

2️⃣ 서버(Server-side)

주로 Node.js 환경에서 사용되며 서버 라이브러리인 socket.io를 설치하여 사용한다.

클라이언트의 연결을 관리하고, 이벤트를 수신하며 클라이언트에게 데이터를 broadcast(동시에 여러 클라이언트에게 전송(하거나 특정 클라이언트에게만 보낸다.

 

Socket.IO - server의 기본 구조

import { Server } from 'socket.io'

// 1. 서버 생성(포트 3000에서 WebSocket 서버 시작)
const io = new Server(3000, {
  path: '/gateway', // 클라이언트가 연결할 경로
})

// 2. 클라이언트가 연결되면 발생하는 이벤트
io.on('connection', (socket) => {
  console.log(`✅ 클라이언트 연결됨: ${socket.id}`)
  
  // 2 - 1. 클라이언트가 보낸 메시지 수신
  socket.on('message', (msg) => {
    console.log('📩 클라이언트로부터 메시지 수신:', msg)
  })
  
  // 2 - 2. 클라이언트에게 다시 메시지 전송
  socket.emit('message', `서버가 응답함 : ${msg.text}`)
  
  
  // 2 - 3. 연결 끊김 처리
  socket.on('disconnect', () => {
    console.log(`🔌 클라이언트 연결 종료: ${socket.id}`)
  })
  
  // 2 - 4. 연결 중 오류 처리
  socket.on('error', (err) => {
    console.log('❌ 소켓 오류:', err)
  })
})

• new Server()로 WebSocket 서버를 열고 클라이언트를 기다린다
• io.on()으로 클라이언트가 연결되면 자동으로 호출한다
• socket.on()으로 클라이언트가 보낸 다양한 이벤트를 처리한다. socket객체는 연결된 클라이언트를 대표함
• socket.emit()으로 클라이언트에게 데이터를 전송한다. 

4. 전체 흐름

1. 클라이언트가 io(url)로 연결 요청
2. 서버 io.on('connection')에서 연결 수락 - socket.id 부여
3. 클라이언트 → 서버: emit('message', data)
4. 서버 →  클라이언트 : socket.emit('message', data) 또는 broadcast.emit
5. 연결 끊김 → disconnect 이벤트 발생
6. 오류 발생 → error 이벤트 발생

[참고 자료]

https://socket.io/

Socket.IO

https://share.google/1ZPNeuBDlSpa3Z24c

Socket.IO의 정체: Socket.IO와 웹소켓은 동일한 개념일까?