풀스택 웹개발 부트캠프 9주차 (3)

Socket.io

• 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리
• WebSocket 프로토콜 위에서 구축됨
• 통신 과정을 단순화하고 개선하기 위한 추가 기능 제공
• 이벤트 기반
• 자동 재연결

기본 이벤트

• connection
  • 클라이언트가 서버에 연결되었을 때 발생
  • 클라이언트와의 상호작용을 초기화하거나 초기 데이터 전달 가능
• disconnect : 클라이언트가 연결을 해제했을 때 발생
• disconnecting : 클라이언트가 연결을 해제하려는 경우에 발생
• error : 연결 중에 오류가 나타났을 때 발생

사용자 지정 이벤트

• 콜백 함수는 생략 가능
• 인자는 마음대로 추가할 수 있음 (클라이언트 인자 개수와 서버에서 받는 인자 개수 맞춰주기)
• 보낼 때는 emit, 받을 때는 on

// 이벤트를 보내는 쪽
socket.emit("hello", "world", (response) => {
  console.log(response); // "got it"
});

// 이벤트를 받는 쪽
socket.on("hello", (arg, callback) => {
  console.log(arg); // "world"
  callback("got it");
});

룸 관련 함수

// 클라이언트를 특정 방으로 추가
socket.join("room 237");

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

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

// 특정 방에 속한 클라이언트들에게만 특정 이벤트와 데이터를 발송
// 이 때, 이벤트는 송신자 클라이언트를 제외한 다른 클라이언트들에게 전달
socket.broadcast.to("roomA").emit("message", "새로운 참가자가 참여했습니다.");

// 특정 방에 속한 클라이언트들의 정보를 확인
const roomInfo = io.sockets.adapter.rooms["roomA"];
console.log(roomInfo);                  

Socket.io 불러오기 (server)

npm i socket.io

const http = require("http");
const express = require("express");
const SocketIO = require("socket.io");
const app = express();
const PORT = 8000;
const server = http.createServer(app);
const io = SocketIO(server);

server.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

Socket.io 불러오기 (client)

• localhost:8000/socket.io/socket.io.js
• 서버가 연결되면, 브라우저를 통해 socket.io 파일에 접근 가능

<script src="/socket.io/socket.io.js"></script>

const socket = io();

• io( )는 클라이언트 소켓을 생성하고, 서버와의 연결을 설정