WebRTC - 실시간 채팅 APP 만들기 (5)

chat 기능 구현하기, nickname value 추가하기

백엔드로 보내야 할 데이터 : 닉네임, 메세지

그런데, 백엔드는 이 두 개의 데이터를 알아서 구분하지 못한다. 따라서 분기 처리하는 코드가 필요해 보인다.

메세지를 구분하기 위해서 type 설정을 한다. JSON 형태로 type과 payload를 함께 보내는 것이 좋겠다.

{
   type: "message",
   payload: "Hello",
},
{
    type: "nickname",
    payload: "Anonymous",
}

 

 

JSON.stringfy로 string형태로 백엔드로 보내주면, 백엔드에서 JSON.parse를 통해 객체 형태로 출력이 가능하다.

• makeMessage 함수(app.js)

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

 

자 이제 server.js에서 보낸 메세지를 다시 parse를 통해 객체형으로 바꿔준 다음 데이터를 내 입맛대로 가공해보자

• server.js

 ws.on("message", (message) => {
    const msg = JSON.parse(message);
    switch (msg.type) {
      case "new_message":
        wses.forEach((ws) => ws.send(`${ws.nickname} : ${msg.payload}`));
      case "nickname":
        ws["nickname"] = msg.payload; //웹소켓 안에 정보를 저장할 수 있다.
    }
  });

 

동일한 도메인을 사용하고 있다면 (여기서는 로컬호스트:3000) 그 안에서의 입력한 사용자의 닉네임과 텍스트를 접속한 모든 브라우저에서 출력할 수 있게 된다!

 

지금은 메세지를 보낼 때 메세지를 보낸 후 값을 비워주고, 보낸 메세지는 서버로 전달되는 방식인데, 이 메세지를 받을 때, message의 type이 "new_message"면 모든 브라우저에서 출력하도록 되어있기 때문에, 내가 메세지를 새롭게 보내면 나를 포함한 다른사람 모두에게 메세지가 전송이 된다.

이를 나를 제외하고 다른 사람 모두에게 메세지를 전달하는 방식으로 바꿔보려고 한다.

이벤트리스너를 활용해 li를 추가했던 코드를 messagesubmit에서 처리 해줌으로써, 상대와 나를 구별할 수 있다.

const messageSubmit = (event) => {
  event.preventDefault();
  const input = messageForm.querySelector("input");
  ws.send(makeMessage("new_message", input.value));
  const li = document.createElement("li");
  li.innerText = `${input.value}`;
  messageList.append(li);
  input.value = "";
};

 

지금까지는, 일일히 각각의 소켓들을 우리가 하나하나 확인하며서 작업을 진행해야 한다.

또한 메세지의 종류도 여러가지가 있다. 예를 들면, 첫 채팅시 알림 메세지, 채팅을 나갔을 때의 알림 메세지, 새로운 유저가 채팅에 참여했을 때의 메세지 등등 이러한 종류의 메세지는 백엔드에서 프론트로 전달해줘야 하는 메세지다.

이러한 것들을 우리가 일일히 구현하려면 백엔드에서도 stringify가 필요하고, 프론트에서도 parse가 필요하다.

 

이러한 불편함을 해소하기위해 다음에는 socket.io 프레임워크를 이용해서 실시간 채팅을 구현해보려고 한다.

연결된 소켓 전체를 업데이트 시켜주고, 실시간으로 확인하는 기능들이 전부 다 들어가있어서, 우리는 문서를 보고 잘 사용만 하면 되는 것이다!

 

깃헙 코드 보러가기 :

https://github.com/rachell331/DummyBot