# 2.2-3 SocketIO - little room, <emit>!

이원규·2022년 6월 15일

Zoom clone coding

목록 보기

7/18

기능 소개

SocketIO는 이미 room기능을 가지고 있다.-> SocketIO를 이용하면 room에 들어오고 나가는 것이 매우 간단함.
채팅창에 메시지 보낼 수도 있음

1. room

1. frontend에 room 만들기

1-1. 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")
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
        title Noom
    body 
        header 
            h1 Noom 
        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")

-> Enter Room만 만든 이유: 이미 있는 방에 들어가는 것과 방을 생성하는 것은 같은 것이기 때문.
방 생성: 0명이 있는 방으로 들어가는 것임.

2. emit

#emit!!!!!!!!!!!!#

-> emit: Websocket(WS)에서의 send와 같은 역할. WS에서는 object를 string
형태로 보냈어야 했는데, SocketIO에서는 그럴 필요없이 바로 object로 보낼 수 있
음.-> SocketIO가 도와주기 때문임. 바로 JS object로 보내주는거 개신기하네용 ㅋㅋ

-> io.emit(임의event, 보내줄거1, 보내는거 2, ....): arg제한 X. 서버가 현재 접속해있
는 모든 클라이언트에게 이벤트 전달. 즉, 임의로 이벤트를 만들어 방출할 수 있음. 임의로 이벤트명를
만드는 것 같음 - 그래서 어떤 이름이든 상관없음.
여기서 젤 중요한 것은 callback fn인데, 이 fn또한 backend에 보내줄 수 있음. backend는
이 함수를 받아 제어 가능! <함수를 실행되는건 frontend임>. 즉, frontend의 함수를 back에서
제어 가능하다. 그리고 신기한 점은 이 때, frontend에서 emit해준 함수에 backend에서 변수를 넣
어줄 수 있다.
또한 만약 emit으로 하는게 처리 비용이 크고 오래 걸리는 작업을 해서, 끝났을 때
frontend에게 작업이 끝났음을 알리고 싶을 때, 알리는 함수를 emit의 맨 마지막 arg에 넣으면
됨.
-> 예시): backendDone 함수 맨 마지막 arg에 쓰기.

<<<<<<<<<<<<<<<<<<<<backendDone>>>>>>>>>예시>>>>>app.js(frontend)>>>>>>>>>>>>>
function backendDone(msg){
    console.log(`The backend says: `, msg);//변수를 필요로 함.-> backend에서 변수를 넣어줄 수 있음.
};

function handleRoomSubmit(event){
    event.preventDefault();
    const input = form.querySelector("input");
    frontSocket.emit(
        "enter_room", 
        {payload: input.value},
        backendDone //-> backend에서 작업이 끝났음을 알리고 싶은 함수를 보낼 때는, 반드시 emit에 맨 마지막에 함수가 와야함 !
    );
    input.value = "";
};

<<<<<<<<<<<<<<<<<<backendDone>>>>>>>>예시>>>>>>>server.js(backend)>>>>>>>
ioServer.on("connection",(backSocket) => {
    backSocket.on("enter_room", (roomname, done) => {
        console.log(roomname);
        setTimeout(() =>{
            done("hello from the backend");//backend에서 변수를 넣어줌 !! awesome
        }, 10000);//실행은 frontend에서 함.
    });
});

-> frontend에서 보내준 함수에 backend에서 변수를 넣어서, backend제어하에 frontend에서 실행하도
록 한다.

1. app.js(frontend): backend에 특정 이벤트 보내주기.

app.js에서 ㄱ ㄱ

const frontSocket = io();//backend Socket과 연결됨.

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

function handleRoomSubmit(event){
    event.preventDefault();
    const input = form.querySelector("input");
    frontSocket.emit("enter_room", {payload: input.value}, () => {
        console.log("server is done");
    });//Websocket(WS)에서의 send와 같은 역할인 거 같음. WS에서는 object를 string형태로 보냈어야 했는데, SocketIO에서는 그럴 필요없이 바로 object로 보낼 수 있음, 또한 3번쨰 arg로 callback fn이 들어가는데 이 fn도 서버(backend)에서 인수로 받아 서버에서 제어 가능 ! 물론 실행은 frontend에서 함.
    input.value = "";
};


form.addEventListener("submit",handleRoomSubmit);

2. frontend에서 임의 이벤트로 보내준 거(emit) 이벤트 리스너로 받기.

server.js에서 ㄱ ㄱ(위의 emit(임의 event, 보내줄 거1, 보내는거2,... ))로 보낸거 받기.
-> on을 이용해 이벤트 리스너 함. 이 때 event는 frontend에서 임의로 설정한 이벤트명을
써줘야함.
-> emit으로 보내줄 건 받는건데, msg: 보내줄 거/ done: frontsocket.emit으로 보낸 함수임.
frontend에서 emit으로 보낸 함수를 backend(server)에서 제어할 수 있음.

ioServer.on("connection",(backSocket) => {
    backSocket.on("enter_room", (msg, done) => {
        console.log(msg);
        setTimeout(() =>{
            done();
        }, 10000);//frontend에서 받은 fn을 서버(backend)에서 호출하지만, 실행은 frontend에서됨.
    });
});