웹소켓

웹소켓에 대해서는 국비학원 다닐 때 채팅기능 구현해보기 <로 3시간정도? 배우고 사용해 본 적이 없었다..

실무에 들어가서도 거의 HTTP 통신만 다루며 api 서버 개발만을 맡게 되어... 이거 좀 알아봐야겠다 < 라는 생각이 아예 없었는데

기회가 생겨 웹소켓에 대해 뜯어볼  건덕지가 생김

 

먼저 웹소켓이란..?

'사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술으로 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다'

라고 mdn에선 정의한다...

그러니깐 웹 브라우저와 웹 서버가 실시간으로 대화할 수 있게 하는 통신 방식인데 한 번 서버를 연결하면 계속해서 유지가 되기 때문에, 매번 연결을 하지 않아도 된다는 특징이 있다.. 따라서 채팅서버를 구현할 때 많이 사용하는 것으로 알공 ㅣㅆ음

 

작동 방식은 간단하게..

1. request 요청을 보냄

- 여기에 'Upgrade' 헤더를 포함해야한다..

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

이런식으로 HTTP 요청을 보내게 되는데.. 클라이언트단에서는 javascript를 통해 요청해보겠다

const socket = new SockJS('/ws');  // 
const stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    console.log('Connected: ' + frame);
});

SockJS는 브라우저와 서버간의 실시간연결을 설정하는 라이브러리로, /ws라는 웹소켓 엔드포인트로 연결을 시도한다.

여기에서 Upgrade: websocket, Connection:Upgrade 헤더가 추가된다..

이런식으로~ 서버는 이 리퀘스트를 수신하고, 웹소켓 프로토콜로 업그레이드한다.

 

2. reponse를 받음

정상적으로 요청이 왔으면, 101 Switching Protocols를 보내 웹소켓 연결을 설정한다.

이렇게 되면 정상적으로 요청이 완료된다!

 

나는 백엔드 서버를 스프링 서버로 구현했는데..

2024-07-29 00:08:31 2024-07-28T15:08:31.568Z  INFO 1 --- [MessageBroker-1] o.s.w.s.c.WebSocketMessageBrokerStats    : WebSocketSession[1 current WS(1)-HttpStream(0)-HttpPoll(0), 1 total, 0 closed abnormally (0 connect failure, 0 send limit, 0 transport error)], stompSubProtocol[processed CONNECT(1)-CONNECTED(1)-DISCONNECT(0)], stompBrokerRelay[null], inboundChannel[pool size = 4, active threads = 0, queued tasks = 0, completed tasks = 6], outboundChannel[pool size = 1, active threads = 0, queued tasks = 0, completed tasks = 1], sockJsScheduler[pool size = 2, active threads = 1, queued tasks = 2, completed tasks = 14]

 

서버에 웹소켓이 연결된 경우 이런식으로 로그가 찍힌다.