HTML5のWebSocket属性とは？readyStateとbufferedAmountを徹底解説

WebSocketとは

WebSocket（Web Sockets）は、Webアプリケーション向けに設計された次世代の双方向通信技術です。単一のソケット上で動作し、HTML5に対応したブラウザでは、JavaScriptインターフェースを通じて手軽に利用できます。

従来のHTTPのようなリクエスト・レスポンス方式とは異なり、WebSocketを使用するとサーバーとクライアント間で常時接続によるリアルタイムなデータのやり取りが可能になります。そのため、チャットアプリケーション、オンラインゲーム、ライブ配信など、低遅延通信が求められる場面で広く活用されています。

WebSocketオブジェクトの主な属性

WebSocketオブジェクトには、接続の状態や送信データの状況を確認できる読み取り専用の属性が用意されています。ここでは、開発時に特に重要となる代表的な2つの属性を詳しく解説します。

Socket.readyState ― 接続状態を表す属性

読み取り専用属性であるreadyStateは、現在の接続状態を数値で表します。この属性が取り得る値は以下の4種類です。

• 0（CONNECTING）：接続がまだ確立されていない状態
• 1（OPEN）：接続が確立されており、通信が可能な状態
• 2（CLOSING）：クローズハンドシェイク（切断処理）が進行中の状態
• 3（CLOSED）：接続がすでに閉じられているか、確立できなかった状態

メッセージの送受信を行う前にreadyStateの値をチェックすることで、接続が正常に確立されているかどうかを確認でき、意図しないエラーを防ぐことができます。

Socket.bufferedAmount ― 送信待ちデータ量を表す属性

読み取り専用属性であるbufferedAmountは、send()メソッドによって送信キューに追加されたUTF-8テキストのバイト数を表します。

ネットワークが混雑している場合や大量のデータを連続して送信する場合、この値を監視することで未送信データの蓄積状況を把握できます。bufferedAmountの値が大きくなりすぎた際に送信ペースを調整するといった制御を行えば、安定した通信品質を維持することにつながります。

まとめ

WebSocketのreadyState属性を使えば接続状態を容易に監視でき、bufferedAmount属性を活用すれば送信データの管理も効率的に行えます。これらの属性の挙動を正しく理解しておくことで、より堅牢で高品質なリアルタイム通信機能を実装できるでしょう。