1. WebSocket이란?

• Transport protocol로 웹버전의 TCP 또는 Socket이라고 이해하면 된다.WebSocket은 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술이다. Real-time web application구현을 위해 널리 사용되어지고 있다. (증권거래, 채팅 등)

  나는 업비트 클론 프로젝트를 진행하며 실시간 통신을 위해 WebSocket client 기능 구현을 해보았다.

2. 작동 원리

• 서버와 클라이언트 간의 WebSocket연결은 HTTP프로토콜을 통해 이루어지며, 연결이 정상적으로 이루어 진다면 서버와 클라이언트 간에 WebSocket연결이 이루어지고 일정 시간이 지나면 HTTP연결은 자동으로 끊어진다.

3. WebSocket Client

let socket = new WebSocket(`${socketApi}`);

socket.onopen = function () {
  console.log("connection server");
};

socket.onmessage = function (e) {
    const data = JSON.parse(e.data);
    console.log("data >>", e);
  };

  const sendMsg = () => {
    socket.send(
      JSON.stringify({
        message: "zz",
      })
    );
  };

socket.onclose = function (event) {
  if (event.wasClean) {
    console.log("[close] 커넥션 종료됨");
  } else {
    console.log("[close] 커넥션 error");
  }
};