Websocket💬이란?? (+Polling)

저는 프로젝트를 하다 채팅기능을 구현하게 되어서 어떻게 구현해야 할지 열심히 찾아보다가 알게 된 WebSocket을 소개 드리겠습니다!!

---

WebSocket💬이란 무엇인가??

WebSocket

서버와 클라이언트가 연결을 끊지 않고 유지하면서 양뱡향 소통이 가능하게 하는 기술입니다 이것을 이용하여 실시간 데이터 교환을 할 수 있기 때문에 실시간 채팅, 주식 등을 구현할 때 많이 사용됩니다

HTTP 통신방법과 WebSocket의 차이점

WebSocket 프로토콜은 접속 확입에 HTTP를 사용하지만, 그 후의 통신은 WS라는 프로토콜을 이용합니다

Header가 작아서 overhead가 적다는 특징이 있습니다

장시간 접속을 전제로 하기 대문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다

더불어 데이터의 송신과 수신에 각각 연결을 맺을 필요가 없이, 하나의 연결으로 데이터를 교환할 수 있습니다

overhead란?

  소프트웨어 개발에서 추가적으로 시간,메모리,자원이 사용되는 현상입니다

---

Client 쪽에서 WebSocket 사용법🎯

WebSocket을 연결하려면 먼저 new WebSocket을 호출해야 합니다 이때 ws라는 특수 프로토콜을 사용합니다

new WebSocket("ws://주소")

ws://말고 wss://라는 프로토콜이 있는데 https와 비슷하게 보안이 추가된 것이라고 생각하시면 됩니다 그렇기 때문에 wss://를 사용하는 것이 더 좋습니다

연결이 되면 사용할 수 있는 이벤트 4가지

• open: 연결에 성공하였을 때 발생합니다
• message: 데이터를 수신하였을 때 발생합니다
• error: 에러가 생겼을 때 발생합니다
• close: 연결이 종료되었을 때 발생합니다

연결이 성공하고 무언가 보내고 싶을 때 socket.send(data)를 사용합니다

ex)

let socket = new WebSocket("wss://주소");

socket.onopen = function() {
  alert("연결 되었습니다"); // 연결
  socket.send("Hello, world!"); // 보내기
};

socket.onmessage = function(event) {
  alert(event.data); // 서버에게 받은 데이터
};

socket.onclose = function() {
    alert(`연결이 정상적으로 종료되었습니다`); // 종료
};

socket.onerror = function(error) {
  alert(error); // error
};

 

---

Polling

 

이건 약간에 서비스 차원에서 말해주는 또 다른 채팅을 구현할 수 있는 방식 중 하나 입니다 
이 방식은 setInterval을 이용하여 일정시간마다 요청을 보냅니다 사실

실시간으로 이루워진다고 하긴 애매하기도 하고 트래픽이 많아지기도 하는 단점 때문에 간단한 프로젝트가 아니면 이 방법을 사용하는 것은 추천하지 않습니다 그래도 예시를 보여드리겠습니다

setInterval(() => {

    fetch(url, {
      method: 'GET',
    })
    .then(response => response.json())
    .then(data => {
      console.log('메시지 획득~', data);
    })
    .catch(error => {
      console.error('메시지 받다가 오류 ㅜㅜㅜ:', error);
    });
  }, 10000);

이런 식으로 일정 시간마다 요청을 보내서 합니다

---

글을 마치며..

이렇게 실시간으로 양방향으로 소통하는 WebSocket을 이용해여 여러 기능들을 멋있게 구현할 수 있게 되면 좋겠습니다