노마드코더 줌 클론코딩 - #1.9 Conclusions

#1.9 Conclusions

현재는 내가 보내는 메세지를 server 내 다른 socket 들 뿐만 아니라 나 자신에게도 전송하고 있다.

이를 개선해보자.

line 30~33 과 같이 addEventListener 내 코드를 handleSubmit 으로 복사한뒤, 

li.innerText = `You: ${input.value}`;

로 변경해준다. 

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); //string으로 바꿔서 리턴
}

socket.addEventListener("open", () => {
    console.log("Connected to Server ✅");
});

socket.addEventListener("message", (message)=>{
    //console.log("New message", message.data);
    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));   //front -> back 전송
    const li = document.createElement("li");
    li.innerText = `You: ${input.value}`;
    messageList.append(li);
    input.value = "";           //초기화
    //console.log(input.value);
}

function handleNickSubmit(event){
    event.preventDefault();
    const input = nickForm.querySelector("input");
    //socket.send(input.value);   //front -> back 전송
    socket.send(makeMessage("nickname", input.value));   //front -> back 전송
    input.value = "";           //초기화
}
messageForm.addEventListener("submit", handleSubmit);
nickForm.addEventListener("submit", handleNickSubmit);


// setTimeout( () => {
//     socket.send("Hello from the browser!");
// }, 10000);//10sec

왼쪽 메세지 창에 Hello를 입력해보자.

위의 You : Hello 는 자바스크립트로 front 쪽에 쓴 것이고

아래의 Anon : Hellosms 서버가 front 로 보내준 내용이다. 

 

현재는 아래와 같이 backend 에서만  string을 Objecgt로 Parsing 해서 front 로 보내고 있다. 

이 기능을 front 에도 추가해보자. 

socket.on("message", (msg) => { 
        const message = JSON.parse(msg);        //string -> Object
        //console.log(message, message.toString('utf-8'));
        switch(message.type){
            case "new_message" :
                //sockets.forEach((aSocket) => aSocket.send(message.payload.toString('utf-8'))); //채팅 메세지만 출력하기 위해 이것만 브라우저에 보냄 
                sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`)); //누가 보냈는지, 뭘 보냈는지 
            case "nickname" :
                //console.log(message.payload.toString('utf-8'));     
                socket["nickname"] = message.payload;
        }
    });

 

그리고 front 에만 있는 아래의 stringify (Object -> String) 기능을 backend 에도 추가해주자.

function makeMessage(type, payload){
    const msg = {type, payload};
    return JSON.stringify(msg); //string으로 바꿔서 리턴
}

이러한 기능들을 framework 를 통해 쉽게 구현할 수 있으며 다음 섹션에서 배워보자.