WebSocket(Webソケット)とは？

Infra

2021.05.27

概要
WebSocket(Webソケット)とは？
1. HTTP接続例
2. WebSocket接続例
WebSocket 通信の仕組み
1. 1. コネクション確立
2. 2. 双方向通信
余談
参考リンク

概要

WebSocketの動作について簡単にまとめてみました。

WebSocket(Webソケット)とは？

Webにおいて双方向通信を低コストで行うための仕組み。プロトコルの一種。
通常、Webといったら、プロトコルはHTTPが使用されますが、WebSocket通信では、コネクション確立時にHTTPからWebSocketへプロトコルを切り替えます。1度コネクションが確立されると、「ws:」または「wss:」から始まるURIスキーム上でクライアント～サーバ間のデータのやりとりを行います。

HTTP接続例

HTTP接続の動作を例としてあげると・・・
ユーザがホームページのページへアクセス要求（リクエスト）をサーバに送り、サーバはそれを受けてページ情報をユーザに返却（レスポンス）します。
この時、レスポンスが生じた時点でユーザの要求は満たされるので、一旦接続は切断されます。違うページが見たくなったら再度リクエストを作成してサーバに投げます。
しかしこれだと、毎回リクエストとレスポンスのやりとりをしなければいけないのでリアルタイム性に欠けてしまったり、サーバ手動でユーザに情報を送信したりすることができませんでした。

https://chopesu.com/wp-content/uploads/2019/03/-2019-03-01-22.12.18-e1551447014923.png
※画像引用

HTTPの規格は、HTTP/1.1やHTTP/2がありますが基本動作はこんな感じです。

WebSocket接続例

WebSocketは通信の確立後、サーバとクライアント間に双方向通信が可能なコネクションを張り続けることでHTTPのリアルタイム性の問題を解決し、HTTPに比べると接続処理や情報量、負荷がかなり低コスト

https://www.school.ctc-g.co.jp/columns/masuidrive/img/column12_fig03.png
※画像引用

WebSocket 通信の仕組み

WebSocketは次の手順で通信を行う

1. コネクション確立

WebSocketは、クライアントからサーバーに対してリクエストを送りコネクションを確立する。
（通信の仕組み-ハンドシェイク）

リクエスト
HTTPのUpgradeヘッダを使用し、プロトコルの変更を行う。

GET /get HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: upgrade
Sec-WebSocket-Key: eHlqIGCmZVwFTKolp53iMP==
Sec-WebSocket-Version: 13

レスポンス
ステータスコード101「Switching Protocols」が返る。

HTTP/1.1 101 OK

※クライアントは次のようなかなり標準的な HTTP リクエスト (HTTP バージョンは 1.1 以上、メソッドはGET) を送信します。

2. 双方向通信

コネクション確立(ハンドシェイク)が終わると、TCP上で双方向通信が可能になる。
WebSocketにおいては、フレームと呼ばれる単位でデータが送信される。
Payload Data意外の情報は最小2byte, 最大でも14byteに収まる様になってて、HTTPに比べるとかなり低コストになっている。

Frame format:

      0                   1                   2                   3
      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
     +-+-+-+-+-------+-+-------------+-------------------------------+
     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
     | |1|2|3|       |K|             |                               |
     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
     |     Extended payload length continued, if payload len == 127  |
     + - - - - - - - - - - - - - - - +-------------------------------+
     |                               |Masking-key, if MASK set to 1  |
     +-------------------------------+-------------------------------+
     | Masking-key (continued)       |          Payload Data         |
     +-------------------------------- - - - - - - - - - - - - - - - +
     :                     Payload Data continued ...                :
     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
     |                     Payload Data continued ...                |
     +---------------------------------------------------------------+