줌클론 #7 | Nonanonymous Chat on HTML by Flux Pattern

개요

• 이전 글에서 백엔드와 익며으이 각 브라우저가 서로 메세지를 WebSocket 을 통해 주고받는 것을 학습했습니다.

• 이 글에서는 각 브라우저가 닉네임을 가지고 실시간으로 채팅을 화면에 페인팅하며 메시지 주고 받는 것을 학습하겠습니다.

방법 (Flux 패턴)

1. 닉네임을 위한 <button>, <input> 요소와 이벤트핸들러를 추가 해줍니다. (프론트엔드)

코드

// ~/app.js

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

function handleMessageSubmit(event) {
  event.preventDefault();
  const input = messageForm.querySelector("input");
  // console.log(input.value);
  socket.send(makeMessage("new_message", input.value));
  input.value = "";
}

nickForm.addEventListener("submit", handNickSubmit);
messageForm.addEventListener("submit", handleMessageSubmit);

2. 서버로 넘어오는 메세지의 타입에 맞게 동작을 지정해줍니다. (백엔드)

// ~/server.js

  ...(생략)
  socket.on("message", (msg) => {
    const message = JSON.parse(msg);
    //console.log(message, msg.toString());
    switch (message.type) {
      case "new_message":
        sockets.forEach((aSocket) =>
          aSocket.send(`${socket.nickname}: ${message.payload}`)
        );
        break;
      case "nickname":
        socket["nickname"] = message.payload;
        break;
    }
  });
...(생략)

동작 예시

참조

노마드코더 줌 클론코딩