[포스코x코딩온] 웹 풀스택 과정 9주차 회고 | Socket.io

 

📌 Socket.io

클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리.

• 웹소켓 프로토콜 기반으로 구축되었다.
• 통신 과정을 단순화하고 개선하기 위한 추가 기능을 제공한다.
• "이벤트 기반", "자동 재연결"

💡 기본 이벤트

connection

클라이언트가 서버에 연결되었을 때 발생한다. (클라이언트와의 상호작용을 초기화 or 초기 데이터를 전달할 수 있음)

disconnect

클라이언트가 연결을 해제했을 때 발생한다.

disconnecting

클라이언트가 연결을 해제하려는 경우에 발생한다.

error

연결 중에 오류가 생겼을 때 발생한다.

💡 사용자 지정 이벤트

socket.emit("이벤트명"[, ...args ])

• 이벤트를 보내는 쪽(socket.emit):

socket.emit("hello", "world", (res) => {
  console.log(res);
});

• 이벤트를 받는 쪽(socket.on):

socket.on("hello", (arg, cb) => {
  console.log(arg); // "world"
  cb("got it"); // "got it"
});

• 보내고 받는 이벤트명은 일치해야 한다.

 

💡 Socket.io 불러오기 - 서버

• npm 설치
  npm install socket.io
• 서버에 socket 연결

const http = require('http');
const express = require('express');
const app = express();
const PORT = 8000;
const SocketIo = require('socket.io');

// http 서버 연결
const server = http.createServer(app);
// socket 서버 연결
const io = SocketIo(server);

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

💡 Socket.io 불러오기 - 클라이언트

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

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

• 클라이언트 소켓을 생성한다.

const socket = io();
// io(): 클라이언트 소켓 생성 및 연결 설정

• 이벤트 보내기 (여러 값을 보낼 때, 보통 객체 형태로 보냄)

socket.emit("new_message", { name: "client", message: "서버접속" });

 

💡 폼이벤트

• 클라이언트

// 폼
<form id="chat">
      <input type="text" id="user" placeholder="사용자명" />
      <input type="text" id="message" placeholder="채팅 내용" /><br />
      <button>채팅</button>
</form>

// 폼이벤트
<script>
const chatForm = document.querySelector("#chat");
const ul = document.querySelector("ul");

const socket = io();
chatForm.addEventLister("submit", (e) => {
  e.preventDefault();
  const user = chatForm.querySelector('#user');
  const message = chatForm.querySelector('#message');
  socket.emit(
    "new_message",
    { name: user.value, message: message.value },
    (res) => {
      const li = document.createElement("li");
      li.textContent = `${res.name}: ${res.message}`;
      ul.appendChild(li);
    }
  );
});
</script>

• 서버

io.on("connection",(socket) => {
  socket.on("new_message", (arg, cb) => {
    cb(arg);
  });
});

---

💡 룸 관련 함수

• socket.join("룸이름") : 클라이언트를 특정 방으로 추가한다.
• socket.leave("룸이름"): 클라이언트를 특정 방에서 제거한다.
• io.to("룸이름").emit("이벤트", 데이터): 특정 방에 속한 모든 클라이언트에게, 특정 이벤트와 데이터를 전송한다.
• socket.broadcast.to("룸이름").emit("이벤트",데이터):송신자 클라이언트를 제외한 특정 방에 속한 모든 클라이언트들에게 전달한다.
• io.sockets.adapter.rooms["룸이름"]: 방에 속한 클라이언트의 정보를 출력한다.

<script>
  const socket = io();
  const chatroom = prompt("채팅방을 입력하세요: ");
  // "join" 이벤트 보냄
  socket.emit("join", chatroom);
  
  // "userjoin" 이벤트 받음
  socket.on("userjoin", (message) => {
  	console.log(message);
  });
  
  // "chat" 이벤트 받음
  socket.on("chat", (id, message) => {
  	const span = document.createElement("span");
  	span.textContent = message;
  	if (socket.id === id) {
  		span.classList.add("right");
  	} else {
  		span.classList.add("left");
  	}
  	space.appendChild(span);
  });
  
  // 폼이벤트 - "message" 이벤트 보냄
  chatForm.addEventListenr("submit", (e) => {
  	e.preventDefault();
  	const msg = document.querySelector("#message");
  	socket.emit("message", msg.value);
  	msg.value = "";
  });
</script>

io.on("connection", (socket) => {
  socket.on("join", (chatroom) => {
    socket.join(chatroom);
    socket.room = chatroom; // socket에 room 정보를 추가함
    console.log(socket.id); // socket의 고유한 id를 확인할 수 있음
    socket.broadcast.to(chatroom).emit("userjoin", chatroom);
  });
  socket.on("message", (message) => {
    io.to(socket.room).emit("chat", socket.id, `${message}`);
  });
});

더 많은 Socket.io 관련 함수는 공식 홈페이지에서 확인할 수 있다.