Socket.io

Socket.io

- 웹소켓에 기반하여 서버와 브라우저 간의 양방향 통신을 돕는 JavaScript 라이브러리

- 하나의 소켓 연결은 하나의 namespace를 가지며, 하나의 namespace 안에는 여러 개의 room을 생성할 수 있음

- 하나의 room 안에 특정 클라이언트들을 입장시키거나(join) 퇴장시킬(leave) 수 있음

기본 세팅

const express = require("express");
const app = express();
const http = require("http");
const { Server } = require("socket.io");

const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*", // 접근을 허용할 클라이언트 주소
    methods: ["GET", "POST"], // 허용할 methods 종류
  },
});

// 소켓 연결
io.on('connection', (socket) => {

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

  // 클라이언트로부터 메시지 수신
  // reply라는 이벤트로 송신오면 클라이언트에서 보낸 JSON 객체가 data 인수에 담김
  socket.on('reply', (data) => { 
     console.log(data);
  });

  // 클라이언트로 메세지 송신(전체)
  socket.emit('news', 'Hello Socket.IO'); // news라는 이벤트로 문자열을 포함하여 송신
  
  // 특정 클라이언트로 메세지 송신
  socket.to("방 번호").emit('news', 'Hello Socket.IO'); // news라는 이벤트로 문자열을 포함하여 송신
});

동작 원리

- io.on("connection", (socket) => {}) = 소켓 연결

- socket.on("이벤트명", (data) => {}) = 클라이언트에서 지정한 보낸 이벤트를 받고 콜백함수를 실행 (파라미터로 입력하는 이벤트명이 클라이언트가 설정한 이벤트명과 일치해야 함)

- socket.emit("이벤트명", room) = 서버에서 클라이언트로 이벤트를 지정한 데이터와 함께 전달

- io.to() =  특정 클라이언트 지정

- socket.to() = 특정 room 지정

- socket.join(방 번호) = 지정한 room에 입장

- socket.leave(방 번호) = 지정한 room에서 퇴장

 

웹소켓(ws)와의 차이점

Socket.io

- JavaScript 라이브러리

- room이 존재

- 모든 타입의 데이터 전송 가능

ws

- 프로토콜

- room이 존재하지 X

- string 데이터만 전송 가능 

- url 설정 시 => ws://로 시작