[WebSocket/Socket IO] 채팅 서비스 구현 7. 메시지 전송 및 수신

2022. 12. 6. 16:00·개발/Projects

채팅 서비스에서는 동일한 방에 참가한 사람들끼리 메시지를 주고 받을 수 있어야 합니다. 이를 어떻게 구현할 수 있을까요?

 

먼저, 사용자 입장에서 서비스 로직을 생각해보겠습니다. 채팅 서비스에 입장한 사용자는 가장 먼저 참여할 방을 선택(또는 입력)하고, 다음으로 해당 방에 참가한 다른 사람들과 메시지를 주고 받게 됩니다.

 

현재 채팅 방까지는 구현을 했죠. 이제 방에 입장한 다음 메시지를 전송하는 로직을 구현하면 됩니다. 기존의 참가 방을 보여주는 shorRoom() 함수 아래에 메시지 전송을 처리할 handleSendMessage 핸들러를 버튼에 달아줍니다.

// app.js

const showRoom = (userRoomName) => {
  room.hidden = true;
  chat.hidden = false;

  const roomNameHeader = chat.querySelector("h2");
  roomNameHeader.innerText = `Room: ${roomName}`;

  chatting.addEventListener("submit", handleSendMessage);
};

그리고 메시지를 처리할 함수를 구현합니다. 아래의 함수는 사용자가 입력한 메시지를 받아 서버로 전달해주는 역할을 합니다.

function handleSendMessage(event) {
  event.preventDefault();

  const message = chatting.querySelector("input");
  socket.emit("message", message.value, sendMessage);
  message.value = "";
}

// 메시지 추가하기
socket.on("sendMessage", addMessage);

이제 백엔드에서 넘어오는 메시지를 처리해줄 차례입니다. 방에 입장한 다음 해당 방 roomName으로 to 메소드를 사용하여 "sendMessage" 사용자 메소드와 함께 message 그리고 프론트의 handleSendMessage로 부터 전달받은 sendMessage 함수에 아규먼트로 message를 담아 다시 전달해주겠습니다.

// server.js

ioServer.on("connection", (socket) => {
  socket.on("room", (roomName, showRoom) => {
    socket.join(roomName);
    showRoom();
    // 메시지 수신하고 전송하기
    socket.on("message", (message, sendMessage) => {
      message = `${socket.id}: ${message}`;
      socket
        .to(roomName)
        .emit("sendMessage", message, sendMessage(message));
    });
  });
});

httpServer.listen(8000);

마지막으로 다시 프론트에서 해당 사용자 메소드를 받을 수 있도록 아래와 같이 코드를 추가해줍니다.

// app.js

// 메시지 받아서 전송하기
socket.on("sendMessage", sendMessage);

아래와 같이 접속과 함께 알림이 나오고 실시간 채팅이 가능하다면 성공입니다!

 

메시지 옆에 추가된 긴 문자열은 socket.id에서 출력되고 있는 것인데요. 다음에는 이를 사용자가 지정한 닉네임으로 변경해보도록 하겠습니다!

'개발 > Projects' 카테고리의 다른 글

[WebSocket/Socket IO] 채팅 서비스 구현 8. 닉네임 설정하기  (0) 2022.12.07
[WebSocket/Socket IO] 채팅 서비스 구현 6. 채팅방 알림 전송하기  (0) 2022.12.06
[WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기  (0) 2022.12.06
'개발/Projects' 카테고리의 다른 글
  • [WebSocket/Socket IO] 채팅 서비스 구현 9. 공개 채팅방 찾고 알림 전송하기
  • [WebSocket/Socket IO] 채팅 서비스 구현 8. 닉네임 설정하기
  • [WebSocket/Socket IO] 채팅 서비스 구현 6. 채팅방 알림 전송하기
  • [WebSocket/Socket IO] 채팅 서비스 구현 5. 채팅방 만들기
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
Klook.com
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
[WebSocket/Socket IO] 채팅 서비스 구현 7. 메시지 전송 및 수신
상단으로

티스토리툴바