kansiho's memo

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

WebSocketとはなにか

https://www.pubnub.com/wp-content/uploads/2013/09/WebSockets3.png

WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つ。

XMLHttpRequest(いわゆるAjax)の欠点を解決する技術として開発された。Ajaxの弱点というのは、クライアントからサーバーに通信できても、サーバーからクライアントに通信を行う方法がなかったこと。サーバ、クライアントの双方向で通信できる双方向通信を実現するための技術規格として生まれたもの。クライアントで変更があったとき(チャットに自分が投稿した時)、サーバーで変更があった時(チャットで他のユーザーが投稿したメッセージを受け取った時)、この両方を検知してリアルタイムで反映してくれる。

WebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通信を全てそのコネクション上で専用のプロトコルを用いて行う。つまり、最初の通信の確立じたいはHTTPプロトコルだが、そのご別のWebSocket専用のプロトコルで通信する。通信時に指定するURLは「http://www.sample.com/」ではなく,「⁠ws://www.sample.com/」の形式である。(80ポートではなく、443ポートでの通信を行う時はwss://になる)

http://labs.opentone.co.jp/wp-content/uploads/2013/04/2522_fig02.png 画像は 【HTML5】WebSocketとJavaサンプルプログラムのご紹介 | Opentone Labs. より

従来の手法に比べると、新たなコネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理由により通信ロスが減る、といったメリットがある。

WebSocketの接続を確立するために、クライアント側はまず ハンドシェイク要求 を送る。そして、サーバー側はハンドシェイク応答を返す。

例:

ウェブブラウザが以下の要求をサーバー側に送る:

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

サーバー側は以下の応答を返す。

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

リクエストとレスポンス・ヘッダの中で重要なポイントは大きく4つ。

  1. WebSocketの接続先を指定する「Host」
  2. ハンドシェイク応答を得るための「Sec-WebSocket-Key」
  3. クライアントとのコネクションを維持するための「Sec-WebSocket-Accept」
  4. WebSocketのバージョンを指定する「Sec-WebSocket-Version」

以上のリクエストとレスポンス・ヘッダにより、WebSocketによる接続が確立される。

参考

WebSocket - Wikipedia

qiita.com

次回は、実際にWebsocketでチャットアプリを作って見たいと思う。