WebSocketシリーズの基礎知識入門編

概要
本稿はWebSocketシリーズの第一編であり、主にWebSocketに関する基礎的なプロトコル知識とAPIを紹介する.WebSocketの関連紹介はMDNの中で分布が乱れていて、初心者は入門しにくいので、本論文を通じて関連基礎知識と使用方法をまとめてまとめます.
本論文の主な内容は以下の通りである.

WebSocket基礎概念紹介

Websocket契約書初読

WebSocket関連API浅分析

Websocketオンライン上のアイテムの使用

本稿を通じて、WebSocketに関する基礎知識を知ることができ、同時にWebSocketがオンライン環境でどのように利用されているかを知ることができます.
WebSocketの紹介
WebSocketsは、サーバー間で双方向セッションを作成できる高度な技術です.このAPIによって、サーバにメッセージを送信し、イベント駆動に基づく応答を受けることができ、サーバポーリングにデータを取得する必要がなくなります.
上はMDNでWebsocketについて説明しました. クライアントとサービスの両方がWebSocketを通じてデータの相互転送を行うことができる、すなわちサービス端末はクライアントにデータをプッシュしてもよく、クライアントはWebSocketを通じてデータを転送しても良い.
なぜWebsocketを使いますか?
WebSocketを使わない時、もし長い接続を確立したいなら、次のような方法があります.

ポーリング

ロングポーリング(常用)

SSE(Server Send Event)

これらを簡単に紹介します.
ポーリング
ポーリングは、最初にクライアントで長い接続をシミュレートする方法である.彼はクライアントのタイミングでHTTP要求をサービス側に送信し、クライアントがサービス側にデータを送信することをシミュレーションしていますが、サービス側のデータはクライアントがHTTP要求を送信した後に戻ります.
この方式は、クライアントのデータをほぼリアルタイムに到達させることができるが、その欠点も明らかである.サービス端末のデータは、クライアントの要求が戻ってから持ち帰る必要がある.HTTP要求の間隔が短すぎると、大量のネットワークオーバーヘッドが発生する.間隔が長すぎると、データの転送が遅れます.
ロングポーリング
ロングポーリングはポーリングに基づいて改善される方法です.クライアントがHTTP要求を送信し、サービス側が要求を受信すると、まずこの要求を維持して戻りません.特定の時間(一般的には30秒で、通常HTTP判定のタイムアウト時間は30秒である)において、サービス端末にデータがない場合、この要求に応答する.サービス側にデータの送信が必要な場合は、直ちにHTTP要求の応答でデータをクライアントに転送します.クライアントは応答を受信すると、すぐに次のHTTP要求を開始する.
ポーリングによってもたらされたサービス端末のデータが転送されない問題を解決することができますが、ネットワークの費用が大きい問題はまだ解決されません.
SSE(Server Send Event)
SSEは新しいプロトコルであり、サービスのためにクライアントにデータを転送したいという役割を果たしています.彼はカスタムSSEプロトコルを通じて単一項目のデータ転送を実現します.SSEの欠点は、データはサービス端末からクライアントにしか転送できないことであり、データはクライアントを介してサービス側に転送できないことである.
WebSocketは上記の問題を解決できます.
WebSocketは以下の問題を効果的に解決できます.

帯域幅問題:WebSocketはHTTPに比べてプロトコルヘッドがより小さく、必要に応じて伝達されます.

データのリアルタイム性問題:WebSocketはポーリングとロングポーリングに対して、リアルタイムでデータを送ることができ、遅延がより小さい.

状態問題:HTTPの無状態要求に比べ、WebSocketは接続を確立した後に特定の状態を維持することができる.

他の長所はウィキペディアを参照することができます.
WebSocketプロトコル
なぜWebSocketを使う必要があるのかを知りました.次にWebSocket契約に関する内容を調べてみます.
WebSocketプロトコルはHTTPプロトコルによってアップグレードされたものです.HTTPプロトコルに基づいて握手を2回追加するだけで、WebSocket接続を確立することができます.
ヘッドをお願いします
要求ヘッドは以下の通りである.

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

その中:

Host: server.example.com接続するWebSocketの住所を示す.

Connection: Upgrade:HTTP接続をアップグレードする必要があります.

Upgrade: websocket:HTTP接続をWebSocket接続にアップグレードする.

Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ== :クライアントが生成したWebSocket接続鍵.

Sec-WebSocket-Protocol: chat, superchat:どのようなプロトコルがクライアントに受け入れられるかを指定します.

Sec-WebSocket-Version: 13:WebSocketバージョン番号.

応答ヘッド

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

その中:

Upgrade: websocket:HTTP接続をWebSocket接続にアップグレードすることを確認する.

Connection: Upgrade:HTTP接続のアップグレードを確認する.

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo:サービス端末がクライアントの接続鍵から生成するサービスエンドキー.

Sec-WebSocket-Protocol: chat:選択されたWebSocketプロトコル.

WebSocket APIの紹介
WebSocketの契約について初歩的な理解ができました.具体的な使用シーンでWebSocketをどう使うかを見てみましょう.
WebSocketのAPIは多くないです.以下は使う順番に従います.

接続確立

受信

メッセージ送信

接続をクローズ

一つ一つ紹介します.具体的なMDN資料はここにあります.
接続を確立
WebSocketは初期化例により接続を確立し、openイベントコールバック関数により接続の確立が確認された.具体的な例は以下の通りである.

const webSocket = new WebSocket('ws://server.example.com');

webSocket.addEventListener('open', (event) => {
    //       
});

WebSocketがws接続を確立するとき、urlはドメイン名またはIPアドレスであり得る.しかし、確立された接続がWS(暗号化されたWebsocket)の場合、urlはドメイン名である必要があります.
メッセージを受け取る
WebSocketはmessageイベントを通じてメッセージを受信する.

socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});

WebSocketは、転送StringArrayBufferおよびBlob3種類のデータタイプが可能であるため、メッセージを受信する際にはいずれかの種類の可能性がある.その中で、String和ArrayBuffer一番多く使われています.

もしStringタイプであれば、直接文字列処理関数によって、JSONなどのフォーマットに関連した変換が可能です.

バイナリblobタイプの場合はArrayBufferおよびDataViewを用いて処理し、関連する内容を本シリーズ第二編で紹介します.

メッセージを送信
WebSocketはsend方法でメッセージを送る.

webSocket.send(data);

例のdataフィールドは、メッセージを受信したというStringArrayBufferおよびBlobという3つのタイプの一つである可能性もある.

String種類は一つの文字列のみを渡すsend方法はパラメータとして使えます.

ArrayBufferタイプはアラーBufferのオブジェクトをパラメータとして渡す必要があり、関連する内容も本シリーズの第二編で紹介されます.

接続を閉じる
パッシブオフ
サービス端末が自動的にWebSocket接続をオフにすると、WebSocketを通じてクライアントにcloseパケットを送信し、WebSocketのcloseイベントがトリガされる.

webSocket.addEventListener('close', (closeEvent) => {
    
});

注:ネットワークが切断された時、WebSocket接続は受動的に閉じられません.
アクティブクローズ
クライアントは、WebSocketから提供されるclose方法により、長い接続を自動的にオフすることができる.

webSocket.close();

現在の方法には2つのパラメータがあります.(一部のバージョンではサポートされていません.詳細はMDN文書を参照してください):

最初のパラメータは接続をオフにした状態番号を表し、デフォルトでは1000となり、正常クローズを表します.

2番目のパラメータはクローズのため123バイト未満のUTF-8テキストです.

締め括りをつける
本稿では主にWebSocketに関する基礎知識を紹介します.
WebSocketの長い接続によって、クライアントとサービス端末は関連する性能問題をもたらさずに大量のデータ伝送を行うことができ、これはウェブ端末に大きな機能増強をもたらした.現在、Web端末はIM関連の機能開発にWebSocketを使用することができます.またはリアルタイムでの協力など、サービス端末との大量のデータのインタラクションを必要としています.以前のようにロングポーリングのHack方式を使用する必要はありません.
具体的な使い方とオンラインの使い方については、このシリーズの次のブログで紹介します.