Socket.IO

Socket.io는 주로 채팅 애플리케이션, 실시간 알림, 다중 사용자 게임 등 실시간 데이터 처리가 필요한 웹 애플리케이션에서 많이 사용된다.

Socket.IO

개념

Socket.io는 실시간 양방향 통신을 지원하는 JavaScript 라이브러리다.
WebSocket 프로토콜을 기반으로 동작하지만, 브라우저에따라 폴백(fallback) 메커니즘도 제공한다.

특징

• 양방향 통신
• 이벤트 기반 구조
• 자동 재연결
• 네임스페이를 사용한 연결구분
• 브로드캐스팅 서버에서 연결된 모든 클라이언트에게 데이터를 전송하는 기능을 제공
• room에 속한 클라이언트에게만 전송 가능

---

어제는 ws 모듈을 사용한 웹소켓을 만들어봤다.
이번에는 좀 더 복잡한 서비스를 Socket.IO로 만들어보려 한다. 기본적인 코드는 아래의 사이트에서 확인할 수 있다.

socket.io-npm

---

Socket.IO 사용해보기

1. 패키지 설치

// with npm
npm install socket.io

// with yarn
yarn add socket.io

2. Socket.IO 연결하기

ws 대신 io로 변경하여 Socket.IO를 연결한다. 이전에 했던 ws 를 사용했던 HTTP 서버와 연결하는 방식이 조금 다르다.
socket.io API의 메서드를 사용하여 이벤트를 처리하고 메시지를 주고받는다.

1. socket.io 패키지를 import 하고 express 서버와 연결

import { Server } from "socket.io";

// HTTP 서버 생성
const server = http.createServer(app);

// socket.io 서버 생성 및 HTTP 서버 연결
const io = new Server(server);
// 위의 코드에서 io 객체의 두번째 인수로 Cors 설정이나 path 등 다양한 옵션을 설정할 수 있다.

기존처럼 server.listen()으로 서버를 실행하지만, 이제 socket.io가 HTTP 서버 위에서 동작한다.

1. 이벤트 리스너 붙이기

Socket.IO의 핵심은 io와 socket이다.

• socket.request : 요청 객체에 접근
• socket.request.res : 응답 객체에 접근
• socket.io : 소켓 고유 아이디 가져오기

// connection 이벤트는 클라이언트가 접속했을때 발생하며, 콜백으로 socket 객체를 제공한다.
io.on("connection", (socket) => {
  console.log("✅ client connected with socket.io");

  //
  const req = socket.request;
  /* 
  Node.js 14버전 이상은 connection이 socket으로 대체되서,
  socket.request.connection.remoteAddress 대신 socket.request.socket.remoteAddress를 사용한다.
  */
  socket.request.connection은;
  const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
  console.log(`New Client IP: ${ip}, ${socket.id}, ${req.id}`);

  socket.on("message", (message) => {
    console.log(`request : ${message}`);
    socket.send(`response : ${message}`);
  });

  socket.on("disconnect", () => {
    console.log("🔌 client disconnected");
  });
});

---

트러블 CORS 에러

ndex.html:1 Access to XMLHttpRequest at 'http://localhost:4001/test/?EIO=4&transport=polling&t=lw8it1wq' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

아래 오류 메세지는 ‘클라이언트가 http://127.0.0.1:5500에서 요청을 보내고 있으며, 서버에서 이 출처에 대해 CORS를 허용하지 않는다’고 한다.

app.use(
  cors({
    origin: "http://127.0.0.1:5500",
    methods: ["GET", "POST"],
    credentials: true,
  })
);

원인: 127.0.0.1과 localhost는 서로 다른 출처로 간주될 수 있다. 해결1: 두 주소를 모두 입력해보았다.

app.use(
  cors({
    origin: ["http://127.0.0.1:5500", "http://localhost:5500"],
    methods: ["GET", "POST"],
    credentials: true,
  })
);

해결2 :Socket.io 설정에 cors 설정 추가

const io = new Server(server, {
  path: "/test",
  cors: {
    origin: ["http://127.0.0.1:5500", "http://localhost:5500"],
    methods: ["GET", "POST"],
    credentials: true,
  },
});