WebSocketを使ったアプリケーションを作ったときに、WebSocketについて少し調べたので備忘録として残しておきます。(2019年6月調査)
目次
WebSocketとは?
WebSocketはサーバとクライアント(Webブラウザなど)間で双方向に通信できる仕組み。WebSocket策定される前は、サーバ/クライアント間の通信はクライアントから要求があって、サーバから応答するという単方向が主流であり、サーバ側で更新があってもクライアント側にそれを伝える方法が難しかった。
例えば、FaceBookやインスタグラムなどのようなSNSでクライアント側(Webブラウザやスマホアプリなどのユーザ側)からサーバに対して投稿した場合、その他のクライアント側にリアルタイムに通知するのが難しかった。
これに対してWebSokcetを導入することで、サーバからクライアントへのリアルタイム通信が可能となるため、SNSなどの投稿をリアルタイムにユーザ側に通知することが可能となる。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image1-1024x715.png)
WebSocketを導入するメリット
- サーバとクライアント間で双方向通信が可能となる。
- HTTPはクライアントからサーバへ要求が起点となって通信が始まるのが基本であり、リアルタイムな双方向通信が難しかった。
- 通信効率が良い。
- HTTPヘッダは数十から数百バイトであるのに対して、WebSocketのヘッダは最小4バイトで送信することが可能。
WebSocketのシーケンス
ここでは、WebSocketの接続時(Opening)と切断時(Closing)の処理についてまとめる。
WebSocket Opening
WebSocketは以下のようなシーケンスで通信を開始する。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image7-1024x713.png)
WebSocket通信中はHTTPではなく、WebSocket専用のフレームで通信される。WebSocketのフレームについてはWebSocketのフレームを参照。
Opening時に使用されるHTTPパケットについて以下で記載する。
クライアント=>サーバ HTTPリクエスト(Opening)
Open時に使用されるHTTPリクエストはGETメソッドにUpdateとConnectionでwebsocketを指定するような形で送信される。青字の部分はWebSocket通信ごとに異なる。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image8.png)
各要素については以下の通り。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image9-1024x574.png)
サーバ=>クライアント HTTPレスポンス(Opening)
Open時に使用されるHTTPレスポンスはステータスコード101のSwitching ProtocolsでWebSocketプロトコルに切り替えをするような形で送信される。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image10-1024x197.png)
各要素については以下の通り。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image11-1024x354.png)
以下のケースについてはWebSocket接続が失敗と判断される
- Sec-WebSocket-Accept を有さない
- Sec-WebSocket-Acceptが期待した値でない
- 応答コードが101ではない
WebSocket Closing
- 正常にCloseするとき
- どちらかからClose制御フレームを送信
- Close制御フレームを受信した片側はWebSocketのClose処理を実施する
- WebSocketのClose処理内でTCP接続をCloseする
- 正常でないやり方でCloseするとき(ブラウザを閉じるなど)
- 下層のTCP接続がCloseされたとき、WebSoketはClose済みとみなされる
WebSocketのフレーム
WebSocketのフレームは以下のような構成となっている。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image5-1024x275.png)
各フィールドのサイズと概要は以下。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image3-1024x581.png)
- 補足1 opcodeについて
opecodeはWebSocketのデータの種類を規定する。大きく制御フレームとデータフレームの2種類がある。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image4-1024x448.png)
- 補足2 MASKについて
MASKはペイロードデータをマスキングしているかどうかを規定する。マスクは以下の式で変換/もとに変換する。
ペイロードデータ[i] = マスキングデータ[i] xor マスク用キー[i mod 4]
iはframe-payload-dataをオクテット列とみたときの先頭からのindexを示す。(0スタート)
- 補足3 ペイロード長について
ペイロード長については以下のように可変長サイズを採用している。
![](https://create-it-myself.com/wp-content/uploads/study-websoket-spec-image6-1024x689.png)
WebSocketの標準規格であるRFC6455には以下のようにペイロード長は最小のサイズを指定するようにと規定されている。
ペイロード長で収まるサイズのデータをペイロード長に0x7Eや0x7Fを指定して大きなデータとして送るのはダメ。
ただし、もし来たときに破棄するかどうかは記載なし。
関連情報
WebSocketについてはドローン関連のアプリケーションをつくるときに調査した。ドローン部品について気を付けることや部品の検討については以下のブログを参照。
参考
- RFC 6455, The WebSocket Protocol
- WebSocketの標準仕様書
- RFC 7230, Message Syntax and Routing
- HTTPメッセージ仕様の標準仕様書
- WebSocket / WebRTCの技術紹介 | SlideShare
- スライドショーなので図があって分かりやすい。前半がWebSocketのスライドになっている。
- WebSocketについて調べてみた。 | Qiita
- ざっくりした概要が記載されている
以上!
コメント