WebSocket

상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더 자유로운 양방향 메시지 송수신이 필요
-> HTML5 표준 기술로 WebScoket API 등장
소켓을 이용하여 서버와 클라이언트 사이에서 자유롭게 데이터를 주고 받는 양방향 통신을 가능하게 함
웹소켓은 HTTP 레이어에서 작동하는 소켓
WebSocket 프로토콜을 나타내는 ws://는 URI 스키마(Scheme)를 사용
암호화 소켓은 https:// 처럼 wss://를 사용

요청

웹소켓을 사용하기 위해서는 Upgrade 헤더를 사용하여 웹 서버에 요청
브라우저는 헤더 등과 함께 랜덤하게 생성한 키를 서버에 전송
웹 서버는 키를 바탕으로 토큰을 생성한 후 브라우저에게 응답
-> WebSocket 핸드쉐이킹

• Client request

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== 
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

• Server response

HTTP/1.1 101 Switching Protocols
Upgrade: websocket Connection: Upgrade 
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= 
Sec-WebSocket-Protocol: chat

HTML5 웹소켓은 유용한 기술이지만 브라우저별로 지원하는 웹소켓 버전이 다르며 오래된 브라우저의 경우 지원하지 않음 따라서 자바스크립트를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.IO를 좀 더 많이 사용

Socket.IO

• 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술
• node.js 기반으로 만들어진 기술로 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 어플리케이션 지원 라이브러리
• 100% 자바스크립트로 구현
• WebSocket, FlashSocket, AJAX Long Polling AJAX Multi part Streaming, IFrame 등 현존하는 대부분의 실시간 웹 기술들을 추상화해 놓음
• 개발자는 Socket.IO로 개발을 하고 클라이언트로 푸쉬 메시지를 보내기만 하면 WebSocket을 지원하지 않는 브라우저도 브라우저 모델, 버전에 따라 다양한 방법으로 내부적으로 푸쉬 메시지를 보내줌
• Socket.IO로 서버, 클라이언트 프로그래밍을 할 수 있음