#2. SocketIO 사용

본 포스팅은 노마드 코더 - 줌 클론코딩을 수강한뒤 작성되었습니다.

Socket IO

지금까지는 단순히 가장 기본적인 wss(websockets)를 사용했다면, 더 많은 기능들을 제공해주는 framework가 있다. 그것이 바로 Socket IO이다.

+) IO : 입력(Input)/출력(Output)의 약자. 컴퓨터 및 주변장치에 대해 데이터를 전송하는 프로그램, 운영, 장치

Socket IO의 기능

• 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크/라이브러리
• Socket IO는 websocket을 실행하는 것이 X
• websocket보다 탄력성이 ↑↑

∴ Socket IO는 가끔 websocket을 이용해서 실시간, 양방향, event 기반 통신을 제공하는 framework

npm i socket.io

webSocket으로 작성한 코드

server.js부분은 다음과 같다.

import http from "http";
import { WebSocketServer } from "ws";
import express from "express";

const app = express();

app.set("view engine", "pug"); // view engine 설정
app.set("views", __dirname + "/views"); // views 폴더 설정

app.use("/public", express.static(__dirname + "/public")); // frontend 구동과 관련된 public 폴더 (css, js)

app.get("/", (_, res) => res.render("home")); // 라우팅
app.get("/*", (_, res) => res.render("home"));

const handleListen = () => console.log("Listening on http://localhost:3000");

const server = http.createServer(app);
const wss = new WebSocketServer({ server });

function onSocketClose() {
 console.log("Disconnected from the Browser ❌");
}

//누군가 우리 서버에 연결하면, 해당 connection을 여기 배열에 저장
const sockets = [];

//connection이 생겼을때, socket으로 즉시 메세지를 보내준 것
wss.on("connection", (socket) => {
 sockets.push(socket);
 socket["nickname"] = "Anon"; //이렇게 socket안에 데이터를 저장할 수 有
 console.log("Connected to Browser ✅");
 socket.on("close", onSocketClose);
 socket.on("message", (msg) => {
   const message = JSON.parse(msg); //string을 Javascript object로 바꿔줌

   switch (message.type) {
     case "new_message":
       // 만약에 message가 new_message라면
       sockets.forEach((aSocket) =>
         aSocket.send(`${socket.nickname}: ${message.payload}`)
       );
     case "nickname":
       socket["nickname"] = message.payload;
   }
 });
});

server.listen(3000, handleListen);