오늘은 웹 소켓에 대해서 알아보도록 하겠다.

기존 HTTP 프로토콜의 Polling을 이용한 방식은 통신 연결에 따른 클라이언트,서버 양측의 부담이 심하다는 단점이 있으며, SSE(Server Sent Event)의 경우도, 클라이언트는 응답을 받을뿐 양방향 통신이 불가능하다는 단점이 있다.

그리하여, polling 에 따른 서버 양측의 부담을 줄이고, 실시간으로 양방향 통신이 가능한 프로토콜이 대두되었는데, 그것이 바로 웹소켓(Websocket)이다.

웹 서버와 클라이언트가 초기 HTTP 통신을 통해 한번 접속을 확립하면, 그 뒤의 통신은 모두 전용 프로토콜로 이루어지게 된다.

즉, 초기 접속 확립에 따른 통신은 HTTP로 이루어지며, 이때는 HTTP의 UPGRADE 헤더 필드를 사용한다.

초기 웹소켓 접속을 위한 아래의 HTTP 헤더를 살펴보자.

Sec-WebSocket-Key: dFKAVNMFDxBZqaBUCW5koQ==

보시다시피, HTTP의 UPGRADE 헤더 필드가 사용되어있다.

Sec-Webscoekt-Key에는 초기 핸드쉐이크를 위한 Key가 저장되어있다.

이러한 리퀘스트를 받게 된후, 서버는 상태는 코드 101[Switching Protocol)을 반환하여 응답하고

이후, 클라이언트와 서버간의 WebScoekt 커넥션이 확립된다.

위에 설명한 과정은 아래와 같다.

POLLING은 단순히 HTTP 요청을 여러번 보내 주기적으로 응답을 확인하는 방식이다. 브라우저 자바스크립트의 SetInterval로 구성해도 무방하다. (단, 필요시 timer 로직을 제때 클리어 해준다는 전제가 있어야한다.) 

SSE(Server Sent Event)는 Chatgpt API Bot을 활용하여 유저와 서버간의 채팅을 활용할때 사용하였고, 서버에서 스트리밍 방식을 통해 데이터를 받아오는 것을 확인하였다. 가장 큰 단점으로는 유저가 한번요청을 보냈을때, 서버는 여러번의 응답이 가능한점이지, 실시간 양방향 소통과는 거리가 멀었다.

WEBSOCKET을 이용하였을때, 진정으로 양방향 통신이 가능했다. 클라이언트와 서버간에 채팅방을 통한 멀티채팅을 구현하였을때 활용한 적이있다.

웹소켓에 대한 개인적인 경험 회고

참고로, 웹소켓 관련 프로젝트를 진행하던중 Nginx를 리버스 프록시로, 그 다음 Nginx에 받은 요청을 Next JS 프록시로 구성하여 Express 서버에 넘겨줬던 적이있는데, 

이때에도 Nginx 설정 HTTP UPGRADE 헤더에 관한 내용을 아래와 같이 적었던 경험이있다. 단, 재미있었던점은, Next JS는 자체적(2024년초 기준)으로 websocket 프로토콜을 프록싱 하는 기능을 제공하지 않는다. 

따라서, 해결 방법은 두가지가 존재했었는데, 하나는 Next JS의 커스텀 서버를 이용하여 프록싱하는 방법이였으나 이 방법은 Next JS 프레임 워크에서 자체 제공하는 서버의 이미지 최적화 및 기타 이점을 포기해야 하는 방법이므로 득보다는 실이 컸다.

그러므로, 두번째 방법인 웹 소켓에 한하여 Nginx 상에서 요청을 바로 서버로 프록싱하는 방법으로 구성을 고쳤던 경험이있다.

하지만, 사실 두번째 방법이 육안적으로 깔끔하지 않았을지 모르지만, 구축하는 방식 및 시간 효율성, 그리고 서비스 운영에 있어서 모두 합리적인 방향이었다.

(첫번째 방법을 이용해서, Next JS의 자체 서버 기능의 이점을 포기하고 싶지 않다면!, 이외에도 세번째, 네번째 방법이 존재한다.)

Nginx의 Websocket 부문 관련 Config 구성을 올린다. 보안을 위해 비공개한 부분은 파란색으로 마스킹 처리하였다.

프로그래밍에 정답을 찾으려 하지말고, 해답을 찾으라는 누군가의 말이 떠오르는 날이다.

출처: 그림으로 보는 HTTP & NETWORK 책 

웹소켓(Websocket) 이란?

Body Parser란?

Express JS란?

Request, Response

Resposne - send(), json(), end()

컨트롤러, 라우터

HTML ELEMENT

데이터 타입

멀티 컬럼 인덱스(Multi-Column Index)

실행계획을 통한 SQL 튜닝

인덱스

Package.json

Tick

Cookie, Session

HTTP

단위 테스트 VS 통합 테스트

링크

링크

웹소켓(Websocket) 이란?