3 . 노마드코더 zoom 클론 - socket IO

🔔  #2.0 ~ 2.3

1. socket IO?!

실시간 기능을 만들어주는 프레임워크

역할 : 실시간 / 양방향 / event 기반의 통신을 가능하게 함

npm i socket.io

 

2. socket IO vs websocket

• socket IO는 프레임워크
• websocket 은 socket IO가 실시간/양방향/event 기반 통신을 제공한는 방법 중 하나임
• 예를 들어 나의 브라우저나 핸드폰이 websocket을 지원하지 않다면 websocket는 문제가 생겨도 socket IO 계속 작동함
• socket IO는 websocket 을 사용하고, 지원하지 않으면 HTTP long polling 같은 것을 사용

 

3. 코드 비교하기

# server.js
import WebSocket from "ws";

const wss = new WebSocket.Server({ server });

const sockets = [];
wss.on("connection", (socket) => {
    sockets.push(socket);
    socket['nickname'] = '';
    console.log("Connected to Browser ✅");
    socket.on("close", onSocketClose);
    socket.on("message", (msg) => {
        const message = JSON.parse(msg.toString("utf8"));
        switch(message.type) {
            case 'new_message' : 
                sockets.forEach((aSocket) => 
                    aSocket.send(`${socket.nickname}: ${message.payload}`));
            case 'nickname' :
                socket['nickname'] = message.payload;
        }
    });
  });

# app.js 전부 지우기
const messageList = document.querySelector('ul'); 
const nickForm = document.querySelector("#nick");
const messageForm = document.querySelector("#message");
const  socket = new WebSocket(`ws://${window.location.host}`);

function makeMessage(type, payload) {
    const msg = { type, payload };
    return JSON.stringify(msg);
}

function handOpen() { 
    console.log("Connected to Server ✅");
};

socket.addEventListener("open", handOpen);

socket.addEventListener("message", (message) => {
    const li = document.createElement('li');
    li.innerText = message.data;
    messageList.append(li);
});


socket.addEventListener("close", () => {
    console.log("Disconnected from Server ❌");
});

function handleSubmit(event){
    event.preventDefault();
    const input = messageForm.querySelector('input');
    socket.send(makeMessage("new_message", input.value));
    const li = document.createElement('li');
    li.innerText = `You : ${input.value}`;
    messageList.append(li);
    input.value = "";
}

function handleNickSubmit(event) {
    event.preventDefault();
    const input = nickForm.querySelector('input');
    socket.send(makeMessage("nickname", input.value));
    input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);
nickForm.addEventListener("submit", handleNickSubmit);

# home.pug 
body 
    header 
        h1 Zoom! 
    main
        form#nick
            input(type="text", placeholder="닉네임을 입력하세요.", required)
            button save
        ul
        form#message
            input(type="text", placeholder="메세지를 입력하세요.", required)
            button Send
    script(src="/public/js/app.js")

 

4. socket IO 서버 만들기

>> server.js

여기 있는 doen함수는 여기서 실행x => 이유: 사용자로부터 함수를 받아 사용하면 보안문제가 생길 수 있음

import SocketIO from 'socket.io';

const httpServer = http.createServer(app);
const wsServer = SocketIO(httpServer);

wsServer.on("connection", (socket) => {
    socket.on('enter_room', (roomName, done) => {
        console.log(roomName);
        setTimeout(() => {
            done('hello from rhe backend');
        }, 15000); # 15초 후 backendDone 함수 작동함으로 클라이언트 콘솔창에 미리 작성한 내용이 뜨게됨
    });
});

httpServer.listen(3000, handleListten);

(socket IO 설치만으로도 localhost:3000/socket.io/socket.io.js 라는 url이 자동으로 생성됨)

 

 >> app.js는 다 지우기

app.js<프론트엔드> 에서 socket을 백엔드와 연결해주기

websocket에서 send 를 했다면 socket.io 에선 emit 를 사용

const socket = io; # io(): 자동으로 백엔드에서 실행하고 있는 socket.io 서버를 찾아 연결해주는 함수

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

function backendDone(msg) {
    console.log('The backend says: ', msg); # 미리 작성해둔 backendDone 함수
}

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

form.addEventListener('submit', handleRoomSubmit);

이전과 다르게 채팅창이 아닌 방부터 만든다.

>> html 수정

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

pug 템플릿에서 socket.io 소스 파일을 다운 받도록 다음 스크립트를 포함시키기

# home.pug
doctype html
html(lang="ko")
    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 Zoom
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
    body 
        header 
            h1 Zoom! 
        main
            div#welcome
                form
                    input(placeholder='room name', required, type='text')
                    button Enter Room
        script(src="/socket.io/socket.io.js")
        script(src="/public/js/app.js")