WebSocketの分析

HTML5 WebSocket

• サーバーがクライアントにアクティブにデータを送信できるようにする

• ブラウザとサーバーはハンドシェイクを完了するだけでよく、両者は永続的な接続を直接作成して双方向のデータ転送を実行できます。

• サーバーリソースと帯域幅を節約し、よりリアルタイムの通信を実現

作成するwebsocket

• 最初のパラメータはターゲットパスです

• 2番目のパラメータはオプションであり、それは文字列またはアレイは、サーバがより達成することを可能にするサブプロトコル、表現することができるwebsocketサブプロトコルを

var ws = new WebSocket（[ url]、[ option]）

インスタンスメソッド

• send()：データを受信String|ArrayBuffer|Blobしてクライアントに送信する

• close()：クライアントはアクティブに切断します

  • 最初のパラメーターはオプションであり、クローズされた状況番号です。デフォルトは1000です。

  • 2番目のパラメーターはオプションで、文字列型で、切断の理由を示します

接続状態を表す定数

• WebSocket.CONNECTING 0接続が開かれていません

• WebSocket.OPEN 1接続が開いており、通信する準備ができています

• WebSocket.CLOSING 2接続が閉じています

• WebSocket.CLOSED 3接続が閉じているか、接続を確立できません

• 属性によってreadyState現在の状態を判別する

イベント監視

• open：接続が確立されました----- OPEN

• message：受信したメッセージ、メッセージ情報であるコールバック関数で受信したmessageEventデータmessageEvent.data

• closed：接続が閉じられました

• error：確立および接続中にエラーが発生しました

イベント監視方法とデータ分析

• することができますon[事件]直接割り当てることが

  • WS。開く時= 関数（）{ アラート（'接続成功'）}

• リッスンイベントを使用することもできaddEventListenerます

  • ws。addEventListener（'open'、funtion（）{}）

• サーバーでもクライアントでも、シリアル化された文字列を受け取ります。これは、しばしば解析する必要があります。JSON.parse(e.data)

接続の安定性

• 場合によっては、切断または接続エラーが発生したときに、異常を監視または切断して再接続する必要がありますerroropen

• open電流を決定するためのタイミング後に開くAタスクreadyState異常な状況で再接続を試みます

ハートビート

• WebSocketハートビートメカニズムは1つに指定されており、一方の当事者が他方の当事者にメッセージを送信ping(opcode 0x9)し、もう一方の当事者はそれを受信pingした後、できるだけ早く戻る必要があります。pong(0xA)

• 接続されているパートナーのオンライン状態を確認するために使用されます。したがって、ハートビートがない場合、相手の接続状態を判断する方法がなく、接続が切断されます。

構築段階

• によってHTTP

• 部分的なリクエストヘッダーの意味

  • Connection：Upgrade ：契約をアップグレードすることを示します

  • Upgrade:websocket：契約にアップグレードすることを示しますwebsocket

  • Sec-WebSocket-Version：websocketバージョン

  • Sec-WebSocket-Key：ですBase64 encodeランダムにブラウザによって生成された値、およびサービス対応のヘッドエンドSec-WebSocket-Acceptパッケージ

• 部分応答ヘッダーの意味

  • ステータスコード101：スイッチングプロトコルを示します

  • Upgradeそして、Connectionクライアントの成功に応答するプロトコルを切り替えられました