Socket.io 기능 알아보기

🔎 Socket.io 란?

Socket.io 👉 Websocket 기반으로 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 해주는 Cross-platform WebSocket API

Socket.io는 WebSocket을 편리하게 쓸 수 있도록 하는 라이브러리입니다. 브라우저간의 호환성을 높이고 room이라는 기능을 이용해 일부 Client에만 데이터를 전송하는 브로드캐스팅이 가능합니다. 아래 구현 예시를 통해 더 자세히 알아보겠습니다.

서버 Socket 구현

Socket 패키지를 설치합니다

npm i socket.io

app서버 생성 후 소켓IO에 생성한 서버를 전달하고 동작시킨다

const app = require("express")()
const SocketIO = require("socket.io")

const server = app.listen(8005, () => {})
const io = SocketIO(server, { path: "/socket.io" })
// 서버 연결, path는 프론트와 일치시켜준다.
// path: 이 경로를 통해 통신을 수행하며, 생략시 디폴트 값은 /socket.io 로 지정된다.

소켓 연결에 성공하면 각 이벤트에 대한 코드를 작성합니다.

(addEventListener 방식을 사용)

// 웹소켓 연결 시
io.on('connection', (socket) => {
  // 연결 종료 Event
  socket.on('disconnect', () => {
    console.log('클라이언트 접속 해제', ip, socket.id);
  }

  // 에러 발생 Event
  socket.on('error', (error) => {
    console.error(error);
  });
}

클라이언트 Socket 구현

Socket 패키지를 설치합니다 (client버전)

npm i socket.io-client

Socket을 불러와서 Server로 데이터를 전송하는 코드를 작성합니다.

import { io } from "socket.io-client"
const socket = io("http://localhost:3000") // server url 전달

socket.on("connect", () => {
  displayMessage(`You connected with id : ${socket.id}`)
})

🔀 데이터 교환 방식 (emit & on)

데이터 전송 : emit

socket.emit("event-name", data)

데이터 수신 : on

socket.on("event-name", data => {
  console.log(data)
})

예시

Client에서 데이터를 전송한다.

const message = messageInput.value
socket.emit("send-message", message)

Server는 Client로부터 데이터를 받은 후 다시 Client에 전달한다.
- io.emit : Client가 가진 모든 소켓에 데이터 전송

io.on("connection", socket => {
  socket.on("send-message", message => {
    io.emit("receive-message", message)
  })
})

Client에서 데이터를 출력한다.

socket.on("receive-message", message => {
  displayMessage(message)
})

📝 그외 Socket.io 기능들

broadcast

socket.broadcast.emit : 데이터를 전송한 socket을 제외한 모든 socket에 데이터 전달
ex) A가 보낸 메세지는 A를 제외한 B,C에 전달됨

io.on("connection", socket => {
  socket.on("send-message", message => {
    socket.broadcast.emit("receive-message", message)
  })
})

room

socket.to(room).emit : 특정한 socket에만 데이터를 전송해야하는 경우 room을 생성하여 room에 속한 socket에만 데이터를 보낼 수 있는 기능입니다.

Client에서 room을 생성한 후 Server에 전달합니다.

joinRoomButton.addEventListener("click", () => {
  const room = roomInput.value
  socket.emit("join-room", room)
})

Client로부터 전달받은 room값을 Server에 저장합니다.

io.on("connection", socket => {
  socket.on("join-room", room => {
    socket.join(room)
  })
})

특정 room에 데이터를 보내는 경우, Client에서 데이터와 room 정보를 함께 전송합니다

const message = messageInput.value
const room = roomInput.value
socket.emit("send-message", message, room)

Server에서 특정 room으로 데이터를 전송합니다. socket.to(room)

io.on("connection", socket => {
  socket.on("send-message", (message, room) => {
    if (room) {
      socket.to(room).emit("receive-message", message)
      // to(room)은 broadcast 특징을 함께 가짐
    }
  })
})

REFERENCE
Learn Socket.io In 30 Minutes https://youtu.be/ZKEqqIO7n-k
Socket.io란 https://nesoy.github.io/articles/2017-04/Socket.io
Dev Scroll https://inpa.tistory.com/entry/SOCKET-📚-SocketIO-사용-해보기