WebSocket とはなんぞや、ということで調べてみた

はじめに

「WebSocket ＝ なんかリアルタイムにやりとりできるもの」くらいの認識でちゃんと理解していなかったので、ちゃんと調べてみようと思いました。
自分用のまとめになります。

実際に Socket.IO 使ってみた記事は こちら

概要

• WebSocket とは HTTP と同じプロトコルの一種
  • Web において双方向通信を低コストで行う為の仕組み

誕生の経緯

• SNS などの発展により、リアルタイムなやりとりが求められることが増えてきた
• HTTP のボトルネック
  • 1つのコネクションで1つのリクエストしか送ることができない
  • 通信「はクライアントからしか開始できない　など
• 元々 Web においては HTTP しか通信の選択肢が無く、 HTTP のロングポーリングを使って無理矢理双方向通信を実現していた
• これでは無駄が多すぎるということで誕生したのが WebSocket

WebSocket の通信のしくみ

• WebSocketプロトコルは、サーバとクライアントが一度コネクションを確立するとその後の通信を専用プロトコルで行う
• サーバプッシュ機能
  • 一度コネクションを確立したら、サーバ/クライアントどちらからも通信可能
• 通信量削減
  • HTTPのように、通信のたびにコネクションを作らない
  • ヘッダのサイズが小さい

1. コネクションを確立する

• クライアントからサーバにリクエストを送る
• リクエスト/レスポンスは HTTP にのっとった形になる
• コネクション確率のための一連の流れは WebSocket opening ハンドシェイク と呼ばれる
• 以下のヘッダが特徴的

リクエストヘッダ（一部）

# HTTP から WebSocket へのプロトコルのアップグレードを表す
Upgrade: websocket 
Connection: upgrate

# プロトコルバージョン
Sec-WebSocket-Version: 13

# 特定のクライアントとのコネクションの確率を証明するのに使用
# クライアントはレスポンスの Sec-WebSocket-Accept ヘッダの値を使って自分のリクエストに対するレスポンスであることを確認する
Sec-WebSocket-Key: hogehoge

2. 双方向通信の実現

• ハンドシェイクによってコネクションが確立すると、WebSocket プロトコルで双方向通信が可能になる
• 「フレーム」という単位でデータが送信される

その他

• WebSocket は ブロッキング I/O ¹ を持つWebサーバとは相性が悪い
  • クライアントとサーバーの間でコネクションを張りっぱなしにするため
  • Node.js などはノンブロッキング I/O

疑問

WebSocket は HTTP のアップグレード版？

HTTP から WebSocket へのプロトコルのアップグレード

とありましたが、

• WebSocket は HTTP をベースにした技術
• ハンドシェイクにおける通信は HTTP をベースに、その先で双方向通信を実現するプロトコルが WebSocket

ということみたいです

参考

参考にさせていただきました！

• https://qiita.com/south37/items/6f92d4268fe676347160
• https://qiita.com/chihiro/items/9d280704c6eff8603389
• http://wild-data-chase.com/index.php/2019/03/17/post-630

1. 入出力が終わるまで、他の処理の実行を待つ処理 ↩