Socket.io 사용법

Socket.io란?

Socket.io는 실시간 웹 어플리케이션을 개발하기 위한 JavaScript 라이브러리로, 웹 소켓(WebSocket) 프로토콜을 기반으로 동작
Socket.IO는 클라이언트와 서버 간의 실시간 통신을 위한 사용하기 쉬운 인터페이스를 제공
이벤트 기반으로 동작

 

통신 종류(채널 설정)

private

private은 1:1 통신을 말한다. 메신저를 예로 들면 1:1 채팅 같은 개념이다.

io.to(소켓 id).emit();

 

public

전송자를 포함한 모두에게 메세지를 전송한다.

io.emit();

 

broadcast

전송자를 제외한 모든 사용자에게 메세지를 전송한다.

socket.broadcast.emit();

 

연결과 해제

server

const { createServer } = require('http');
const express = require('express');
const { Server } = require('socket.io');

const app = express();
const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: 'http://localhost:3000',
  },
});

io.on('connection', (socket) => {
  console.log('connection', socket.id); // 클라이언트가 서버에 연결되었을 때 발생

  socket.on('disconnect', () => {
    console.log('연결 끊김'); // 클라이언트에서 소켓 연결 해제시 발생
  });
});

httpServer.listen(8000, () => {
  console.log('server running at http://localhost:8000');
});

 

clinet

import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

export default function ConnectionPage() {
  const [socket, setSocket] = useState();

  useEffect(() => {
    const newSocket = io('http://localhost:8000');
    setSocket(newSocket);

    return () => {
      newSocket.disconnect();
    };
  }, []);

  useEffect(() => {
    if (!socket) return;
    socket.on('connect', () => {
      // 소켓 연결되었을 때 발생
      console.log('소켓 연결 완료');
    });
    socket.on('disconnect', () => {
      // 소켓 연결이 끊겼을 때 발생
      console.log('소켓 연결 끊김');
    });
  }, [socket]);

  return <div>ConnectionPage</div>;
}

 

예약이 되어 있는 이벤트 모음

server

• connection : 클라이언트가 서버에 연결되었을 때 발생
• disconnecting : 클라이언트가 연결을 해제하려는 경우에 발생
• disconnect : 클라이언트가 연결을 해제했을 때 발생
• error : 연결중에 오류가 발생했을 때 발생

client

• connect : 서버와 소켓이 연결 되었을 때 발생
• disconnect : 서버와 소켓이 해제되었을 때 발생

 

소켓 함수 모음

// 클라이언트를 "roomA" 방으로 추가
socket.join("roomA");

// 클라이언트를 "roomA" 방에서 제거
socket.leave("roomA");

// 특정 방에 속한 모든 클라이언트에게 특정 이벤트와 데이터를 발송
io.to("roomA").emit("message", "Hello, Room A");

// 송신자를 제외한 특정 방에 속한 클라이언트에게 특정 이벤트와 데이터를 발송
socket.to("roomA").emit("message", "Hello, Room A");
socket.broadcast.to("roomA").emit("message", "Hello, Room A");

// 송신자를 제외한 서버에 연결된 모든 클라이언트에게 이벤트와 데이터를 발송
socket.broadcast.emit("message", "Hello, Room A");

// 송신자를 포함하여 모든 클라이언트에게 이벤트와 데이터를 전송
io.sockets.emit("message", "Hello, Room A");

// 특정 방에 속한 클라이언트들의 정보를 확인
const roomInfo = io.sockets.adapter.rooms.get(room);
console.log(roomInfo); // 방에 속한 클라이언트 id정보가 출력