: 양방향으로 통신할 수 있음

채팅, 문의, 알림, 트레이딩과 같은

'실시간'

이라는 키워드가 필요한 기능들은 HTTP 통신을 사용해서는 구현할 수 없습니다.

이러한 기능을 제작할 때 소켓통신을 이용해야합니다.

1. 웹소켓 통신 방법

let socket = new WebSocket("ws://chanstory.dev");

2. 웹 소켓 통신 핸드셰이크

1. 브라우저에서 HTTP 통신을 이용하여 서버에 소켓 통신이 가능한지 요청

   GET /chat
   Host: <https://chanstory.dev>
   Origin: <https://chanstory.dev>
   Connection: Upgrade
   Upgrade: websocket
   Sec-WebSocket-Key: ...
   Sec-WebSocket-Version: 13
   

2. 서버에서 웹 소켓 통신이 가능하다면 서버에서 웹 소켓 통신이 가능하다는 101 상태의 응답

   101 Switching Protocols
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Accept: ...
   

3. 통신

• 프론트

    const webSocket = new WebSocket("ws://localhost:3001");
  
      // 웹 소켓 연결 이벤트
      webSocket.onopen = function () {
        alert("웹소켓 서버와 연결에 성공했습니다.");
      };
  
      // 웹 소켓 메세지 수신
      webSocket.onmessage = function (event) {
        alert(event.data);
      };
  
      // 웹 소켓 연결 종료
      webSocket.onclose = function () {
        alert("웹소켓 서버와 연결이 종료되었습니다.");
      };
  
      // 오류 발생
      webSocket.onerror = function (error) {
        console.log(error);
      };
  
      function sendMessage() {
        const message = document.getElementById("message").value;
        webSocket.send(message);
      }