RFC 6455 명세서에 정의된 프로토콜인 Show 이런 특징 때문에 웹소켓은 온라인 게임이나 주식 트레이딩 시스템같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 아주 적합합니다. 간단한 예시웹소켓 커넥션을 만들려면
항상
반면 소켓이 정상적으로 만들어지면 아래 네 개의 이벤트를 사용할 수 있게 됩니다.
커넥션이 만들어진 상태에서 무언가를 보내고 싶으면 예시를 살펴봅시다.
위 예시는 데모 목적을 위해 만들어놓은 간이 Node.js 서버(server.js)에서 돌아갑니다. 서버는 'Hello from server, Bora’라는 메시지가 담긴 응답을 클라이언트에 보내고, 5초 후 커넥션을 종료시킵니다. 서버 쪽 코드가 동작하면서 이제 여러분은 웹소켓 통신이 어떻게 이뤄지는지를 알게 되셨습니다. 생각보다 꽤 간단하죠? 지금부턴 실무 수준에서 웹소켓을 활용할 수 있도록 웹소켓에 대해 좀 더 자세히 알아봅시다. 웹소켓 핸드셰이크
커넥션이 유지되는 동안, 브라우저는 (헤더를 사용해) 서버에 '웹소켓을 지원하나요?'라고 물어봅니다. 이에 서버가 '네’라는 응답을 하면 서버-브라우저간 통신은 HTTP가 아닌 웹소켓 프로토콜을 사용해 진행됩니다. 이번엔
웹소켓 핸드셰이크는 모방이 불가능합니다. 바닐라 자바스크립트로 헤더를 설정하는 건 기본적으로 막혀있기 때문에 서버는 클라이언트 측에서 보낸 웹소켓 통신 요청을 최초로 받고 이에 동의하면, 상태 코드 101이 담긴 응답을 클라이언트에 전송합니다.
여기서 이렇게 핸드셰이크가 끝나면 HTTP 프로토콜이 아닌 웹소켓 프로토콜을 사용해 데이터가 전송되기 시작합니다. 전송이 시작된 후에 어떤일이 일어나는지는 조금 후에 자세히 살펴보겠습니다. Extensions와 Subprotocols 헤더웹소켓 통신은 각 헤더에 대한 예시를 살펴봅시다.
이때 서버는 지원 가능한 익스텐션과 프로토콜을 응답 헤더에 담아 클라이언트에 전달해야 합니다. 예시를 살펴봅시다. 요청 헤더는 다음과 같습니다.
이때 서버가 다음과 같은 응답을 했다고 해봅시다.
이 경우, 우리는 서버에선 'deflate-frame’이라는 익스텐션과 요청 프로토콜 중 SOAP라는 서브 프로토콜만 지원한다는 사실을 알 수 있습니다. 데이터 전송웹소켓 통신은 '프레임(frame)'이라 불리는 데이터 조각을 사용해 이뤄집니다. 프레임은 서버와 클라이언트 양측 모두에서 보낼 수 있는데 프레임 내 담긴 데이터 종류에 따라 다음과 같이 분류할 수 있습니다.
브라우저 환경에서 개발자는 텍스트나 이진 데이터 프레임만 다루게 됩니다. 이유는 WebSocket
한편, 데이터를 받을 때, 텍스트 데이터는 항상 문자열 형태로 옵니다. 이진 데이터를 받을 때엔
Blob은 고차원(high-level)의 이진 객체인데,
Rate limiting데이터 전송량이 상당한 앱을 개발하고 있다고 가정해봅시다. 그런데 우리 앱의 사용자는 모바일이나 시골같이 네트워크 속도가 느린 곳에서 앱을 사용하고 있다고 해보죠. We can call The We can examine it to see whether the socket is actually available for transmission.
Connection closeNormally, when a party wants to close the connection (both browser and server have equal rights), they send a “connection close frame” with a numeric code and a textual reason. The method for that is:
Then the other party in the
가장 많이 사용하는 코드는 다음과 같습니다.
There are other codes like:
코드 전체 목록은 RFC6455, §7.4.1에서 확인할 수 있습니다. 웹소켓 코드는 언뜻 보기엔 HTTP 코드 같아 보이지만 실제론 다릅니다. 특히
Connection stateTo get connection state, additionally there’s
채팅 앱 만들기Let’s review a chat example using browser WebSocket API and Node.js WebSocket module https://github.com/websockets/ws. We’ll pay the main attention to the client side, but the server is also simple. HTML에선 메시지를 보낼 때 사용할
자바스크립트론 다음 세 가지 기능을 구현해야 합니다.
Here’s the code:
Server-side code is a little bit beyond our scope. Here we’ll use Node.js, but you don’t have to. Other platforms also have their means to work with WebSocket. The server-side algorithm will be:
Here’s the working example: You can also download it (upper-right button in the iframe) and run it locally. Just
don’t forget to install Node.js and SummaryWebSocket is a modern way to have persistent browser-server connections.
The API is simple. Methods:
Events:
WebSocket by itself does not include reconnection, authentication and many other high-level mechanisms. So there are client/server libraries for that, and it’s also possible to implement these capabilities manually. Sometimes, to integrate WebSocket into existing projects, people run a WebSocket server in parallel with the main HTTP-server, and
they share a single database. Requests to WebSocket use Surely, other ways of integration are also possible. |