웹소켓은 http와 같은 프로토콜이다.

http는 클라이언트가 서버에 요청을 보내야만 응답할 수 있다. 요청 응답 후 클라이언트를 잊기 때문에 stateless하다고도 한다.

http와의 차이점은, 웹 소켓은 한 번 연결이 시작되면 계속해서 클라이언트와 서버간의 연결이 가능하다. 그리고 클라이언트의 요청 없이 메세지를 보낼 수 있다. => 클라이언트를 기억하고 있다.

쉽게 말해서, 클라이언트와 서버 간에 악수를 한 번 하고 그 손을 따라서 계속 데이터를 주고받는 모양새라고 생각하면 된다.

클라이언트와 서버라고 하여 브라우저와 백엔드끼리만 통신하는 것 같아 보이지만, 백엔드와 백엔드끼리도 가능하다.

ws(웹소켓)은 말 그대로 통신 규약이기 때문이다.

JS용법

1. 웹소켓 엔드포인트에 연결

const webSocket = new WebSocket("ws://localhost:1234/websocket");

위 상황에서 ws://localhost:1234/websocket는 스프링부트가 돌리고있는 서버라고 가정한다. 엔드포인트는 /websocket이다.

2. 수신

webSocket.onmessage = function(event) {
    // 서버로부터 메세지를 받을 때마다 실행
    var message = event.data; // 이벤트 객체로부터 데이터 얻어옴
  
    ...
};

.onmessage는 WebSocket 객체의 이벤트리스너이다.
서버로부터 메세지를 받을 때 메세지를 핸들링할 때 쓰인다.

3. 전송

 if (webSocket.readyState === WebSocket.OPEN) {
	var message = "Hello, Server!";
	webSocket.send(message); // Send a message to the server
}

webSocket 객체가 연결돼있는 상태인지 확인한 후 (WebSocket.OPEN은 상수이다) 연결된 서버로 메세지를 전송한다.

---

참고 : 노마드코더 웹소켓 강의https://nomadcoders.co/noom/lectures/3088