[SocketIO] Nomad Coders 줌 클론코딩 #2

Socket.io

지난 시간에는 WebSocket을 이용해 브라우저끼리 연결하고 메세지를 주고 받는 기능을 만들었다.
그리고 오늘은 Socket.io를 이용해 더 쉽게 만드는 방법을 배웠다.

Socket.io란?

• 쉽게 프론트엔드와 백엔드 간의 실시간 통신을 가능하게 해주는 framework이다.
• 실시간 기능을 더 쉽게 만드는 편리한 코드를 제공한다.
• WebSocket의 부가기능이 아니다.
• WebSocket을 지원하지 않으면 http long-polling을 사용한다.
• 와이파이가 끊기면 자동적으로 재연결을 시도한다.
• firewall이나 proxy가 있어도 사용가능하다.
• 모든 플랫폼, 모든 브라우저, 모든 디바이스에 이용 가능하다.

Socket.io설치

$ npm i socket.io

server.js

import SocketIO from "socket.io";

const io = SocketIO(server);

home.pug

script(src="/socket.io/socket/io.js")

Socket.io를 설치해주면 화면에서 io라는 fucntion을 볼 수 있다.
자동적으로 back-end socket.io와 연결해주는 function이다.
app.js에서 const socket = io(); 만 써주면 이 io function은 알아서 socket.io를 실행하고있는 서버를 찾는다.

Rooms

채팅을 할 수 있는 방을 만든다.
html에서 유저가 방을 만들거나 방에 참가할 수 있는 form을 만든다.
그 전까지는 오브젝트를 스트링으로 변환시키고 스트링을 전송했지만 socket.io는 그럴 필요가 없다.
객체를 바로 보낼 수 있다.
socket.io가 알아서 스트링으로 바꿔서 전달해주고 다시 알아서 자바스크립트 오브젝트로 만들어준다.

app.js

function handelRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  socket.emit("enter_room", input.value, showRoom);
  roomName = input.value;
  input.value = "";
}

form.addEventListener("submit", handelRoomSubmit);

server.js

io.on("connection", (socket) => {
  socket.on("enter_room", (roomName, showRoom) => {
    socket.join(roomName);
    showRoom();
    socket.to(roomName).emit("welcome", socket.nickname, countRoom(roomName));
    io.sockets.emit("room_change", publicRoom());
  });
});

이 때 argument는 자신이 원하는 만큼 보낼 수 있다. 객체 뿐만 아니라 함수도 보낼 수 있다.

Adapter

👉출처 : socket.io/docs/v4/adapter

다른 서버들 사이에서 실시간 어플리케이션을 동기화하는 역할이다.
모든 클라이언트가 같은 서버에 연결되는 것은 아니다.
만약 서버 a에 있는 클라이언트가 서버b에 있는 클라이언트에게 메세지를 보내고 싶다면
메세지는 서버a에서 adapter와 데이터베이스를 거치고 다시 adapter로 가서 서버b의 클라이언트에게 전달된다.
adapter는 누가 연결되어있는지, 현재 어플리케이션에 room이 얼마나 있는지를 알려준다.

console.log(io.sockets.adapter);

adapter를 이용하면 방이 몇 개 있는지, 소켓이 몇 개 있는지 콘솔에서 확인할 수 있다.
소켓의 id를 뜻하는 sids를 가져와서 rooms를 보고 이 방들이 어떤 socket을 위해 만들어졌는지 확인할 수 있다.
만약 room id를 socket id 에서 찾을 수 있다면 private room
그렇지 않으면 public room 이다.

⚡코드