[ JavaScript / JS ] WebSocket 연결하고 실시간 채팅 구현하기

지금 Pong게임을 할 수 있는 팀프로젝트를 진행을 하고 있는데

https://www.ponggame.org/

Pong Game

 프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을 구현하기 위해서는 webSocket을 사용해야 한다. 백엔드에서 webSocket 서버를 다 구성해서 이제 프론트인 내가 백앤드에서 만들어둔 webSocket을 이용해 실시간 채팅을 구현해야 한다

socket
웹소켓(WebSocket)은 실시간 웹 애플리케이션 개발에 필수적인 기술입다. 복잡한 실시간 통신 요구사항을 가진 애플리케이션을 구현할 때 HTTP 프로토콜의 한계를 극복하고, 서버와 클라이언트 간에 양방향 통신 채널을 제공한다.

 

일단 웹소켓 연결을 먼저 해야한다. 소켓은 3개로 구성돼 있다 프로토콜(ws), ip 주소(127.0.0.1), 포트 넘버(8000)

chatSocket = new WebSocket(
    'ws://' + '127.0.0.1:8000'
  );

 

 

 웹소켓 연결의 상태를 관리하기 위해 onopen, onmessage, onerror, onclose 이벤트 핸들러를 구현할 수 있다.

• onopen: 웹소켓 연결이 성공적으로 열렸을 때 실행
• onmessage: 서버로부터 메시지를 받았을 때 실행
• onerror: 연결 중 오류가 발생했을 때 실행
• onclose: 연결이 닫혔을 때 실행

 아래는 우리 프로젝트의 웹소켓을 연결하는 부분의 코드다

혹시나 일시적인 네트워크 에러등 으로  웹소켓 연결에 실패했을 경우를 생각해서 2초마다 최대 5번 웹소켓 연결을 시도한다

let retryCount = 0;
const maxRetry = 5;
const retryDelay = 2000; // 2초
let chatSocket = null;
 
function connectWebSocket() {
  chatSocket = new WebSocket(
    'ws://' + '127.0.0.1:8000' + '/ws/chat/' + 'public' + '/',
  );
 
  chatSocket.onerror = function () {
    if (retryCount < maxRetry) {
      setTimeout(() => {
        console.log(`연결 실패. ${retryCount + 1}번째 재연결 시도 중...`);
        retryCount++;
        connectWebSocket();
      }, retryDelay);
    } else {
      console.log('WebSocket 연결에 실패했습니다. 잠시 후 다시 시도해주세요.');
    }
  };
 
  chatSocket.onopen = function () {
    console.log('WebSocket 연결 성공');
    retryCount = 0; 
  };
}
 
connectWebSocket();

 

 웹소켓을 연결하고 이제 실시간 채팅을 구현해야 한다

사용자가 메세지를 입력하면 사용자의 아이디와 메시지 내용을 소켓에게 전송해 준다.

chatSocket.send(
        JSON.stringify({
          sender_id: senderID,
          message: chattingInput.value,
        }),
      );

 

 그리고 onmessage 이벤트를 이용하면, 서버로부터 메시지를 받을 때마다 이 이벤트가 발생한다. 이를 통해, 한 사용자가 채팅을 입력하고 서버로 전송하면 (send메서드 사용), 서버는 이 메시지를 처리하고 다른 모든 사용자에게 해당 메시지를 전송할 수 있다. 다른 사용자들은 onmessage 이벤트를 통해 이 메시지를 실시간으로 받아볼 수 있다.

 

 아래는 내가 구현한 onmessage 이벤트다.

내가 보낸 메시지면 sender_id를 비교해서 오른쪽으로 정렬해서 메시지를 뜨게 하고 아니면 다 왼쪽으로 정렬을 했다.

chatSocket.onmessage = e => {
      const data = JSON.parse(e.data);
      const opponentName = document.createElement('div');
      const newMsg = document.createElement('div');
      newMsg.style.color = 'black';
 
      if (Number(data.sender_id) === Number(senderID)) {
        newMsg.textContent = data.message;
        newMsg.setAttribute('class', 'myChat');
        $chatRoom.appendChild(newMsg);
        $chatRoom.scrollTop = $chatRoom.scrollHeight;
        chattingSubmitImage.setAttribute('fill', '#ddd');
      } else {
        opponentName.textContent = data.sender_name;
        opponentName.style.color = 'black';
        opponentName.style.marginBottom = '-10px';
        newMsg.textContent = data.message;
        newMsg.setAttribute('class', 'friendChat');
        $chatRoom.appendChild(opponentName);
        $chatRoom.appendChild(newMsg);
        $chatRoom.scrollTop = $chatRoom.scrollHeight;
      }
    };

 

 

결과물