chatting server - 메세지 주고받기(1)

이번에는 메세지를 입력해서 상대방에게 보내도록 하겠습니다.

 

app.js

먼저 form 에 메세지를 입력하고 버튼을 클릭하면 messageSubmit 메서드를 통해

"send_message" 이벤트가 발생하도록 합니다.

이때, 입력된 메세지(input.value) 와 현재 채팅방의 이름(currentRoom) 을 함께 서버로 전송합니다.

...

function messageSubmit(event) {
  event.preventDefault();
  const input = document.getElementById("messageText");
  socket.emit("send_message", input.value, currentRoom);
  input.value = "";
}

...

form.addEventListener("submit", messageSubmit);
roomList.addEventListener("click", enterRoom);

// 채팅방 생성 모달창 보여주기
roomMake.addEventListener("click", () => {
  modal.hidden = false;
});
modal.addEventListener("click", modalClick);
exit.addEventListener("click", exitRoom);

 

server.js

서버에서는 "send_message" 이벤트가 발생하면 메세지 내용과 현재 채팅방의 이름을 받아서 

현재 채팅방에 접속한 모든 클라이언트에게 메세지를 전송합니다.

...

socketServer.on("connection", (socket) => {

  ...

  socket.on("send_message", (message, currentRoom) => {
    console.log(currentRoom);
    console.log(message);

    // send_message 이벤트가 발생하면 채팅방에 접속한 모든 클라이언트에게 message 다시 전송
    socketServer.to(currentRoom).emit("send_message", message);
  });
});

 

app.js 추가

클라이언트는 전송한 메세지를 서버에서 전송하는 "send_message" 이벤트를 통해 다시 받게 됩니다.

"send_message" 이벤트가 발생했을때 message를 받아서 addMessage 메서드로 채팅창에 메세지를 출력하도록 합니다.

...

socket.on("send_message", function (message) {
  addMessage(message);
});


function addMessage(message) {
  const ul = document.getElementById("message");
  const li = document.createElement("li");

  li.innerText = message;
  ul.appendChild(li);
}

...

form.addEventListener("submit", messageSubmit);
roomList.addEventListener("click", enterRoom);

// 채팅방 생성 모달창 보여주기
roomMake.addEventListener("click", () => {
  modal.hidden = false;
});
modal.addEventListener("click", modalClick);
exit.addEventListener("click", exitRoom);

 

결과

두개의 탭에서 localhost:3000 에 접속해서 room1 에 입장해봅니다.

첫번째 탭에서 메세지를 입력하면 두번째 탭에 해당 메세지가 출력되는것을 볼 수 있습니다.