DAY 3 #2.0 ~ #2.3

 

#2.0 SocketIO vs WebSockets

https://socket.io/ 

SocketIO : 실시간, 양방향, event 기반의 통신을 가능케 하는 framework

 

https://socket.io/docs/v4/ 

WebSocket과의 차이점은, webSocket이 socketIO가 위의 통신을 가능하게 하도록 만드는 방법 중 하나에 불과하며, 만약 WebSocket이 사용못하게 되더라도 socketIO는 http long-polling 등을 대체해 사용할 수 있다고 문서에 나와있다. 당장 webSocket은 protocol, socketIO는 framework이라는 점에서 다르다.. 

 

https://www.npmjs.com/package/socket.io 

 

 

#2.1 Installing SocketIO

 

SocketIO 설치

npm i socket.io

 

기존 webSocket 방식 : 먼저 http 서버를 만들고, 새로운 webSocket 서버 만들 때 HTTP를 위에 쌓아 올리며 만들었음 

= socketIO도 마찬가지.

 

server.js

import { Server } from "socket.io";

// --- 생략

const httpServer = http.createServer(app);
const wsServer = new Server(httpServer);

wsServer.on("connection", (socket)=>{
  console.log(socket);
});

const handleListen = () => console.log(`Listening on http://localhost:3000`);
httpServer.listen(3000, handleListen);

 

 

참고로 지금까지 했던 내용들은 이제 socket.io로 하기 때문에 websocket 기반의 코드들은 싹 초기화된다... 

강의에서는 user가 chat에 참가하고 싶을 때, room을 먼저 만들도록 하는 코드를 작성할 것이라 home.pug 파일도 수정된다.

 

 

#2.2 SocketIO is Amazing

 

먼저 방을 만드는 웹페이지를 만들어준다.

 

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        //- mvp.css 사용
        link(rel="stylesheet", href="https://unpkg.com/mvp.css") 
    body 
        header 
            h1 Noom 
        main 
            div#welcome
                form
                    input(placeholder="room name", required, type="text")
                    button Enter Room
        //- front-end에도 socket.io 설치
        script(src="/socket.io/socket.io.js")
        script(src="/public/js/app.js")

 

app.js에서는 io() 메서드를 이용하는데, 이는 기존의 복잡한 작업들을 한번에 해결해주며, 자동적으로 client와 back-end socket.io를 연결해주는 함수다.

webSocket에서는 send()를 썼는데, 이번에는 emit()을 사용한다. emit은 어떤 이벤트명도 맨 앞 매개변수로 적어주면 되고, string이 아닌 다른 요소(object)들도 전송이 가능하며 백엔드에서도 함수 실행이 가능하다는 점이 있다. 실제로 아래 코드에서도 'enter_room'이라는 함수를 이벤트를 back-end에서 실행하는 것을 볼 수 있다. 

 

 

server.js

import http from "http";
import { Server } from "socket.io";
import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));

// back-end에 socket.io설치
const httpServer = http.createServer(app);
const wsServer = new Server(httpServer);

wsServer.on("connection", (socket) => {
  socket.on("enter_room", (msg, done) => {
    console.log(msg);
    setTimeout(()=>{
      done("from the backend");
    }, 10000);
  });
});

const handleListen = () => console.log(`Listening on http://localhost:3000`);
httpServer.listen(3000, handleListen);

 

app.js

const socket = io();

const welcome = document.getElementById("welcome");
const form = welcome.querySelector("form");

function handleRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  socket.emit("enter_room", { payload: input.value }, () =>{
    console.log("server is done.");
  });
  input.value = "";
}

form.addEventListener("submit", handleRoomSubmit);

 

 

내가 빡대가리라서 정리하는데 https://ssocoit.tistory.com/192 의 도움을 정말정말많이받았다....거의복붙수준이라할정도로,,,