WebSocket-クライアント

WebSocketは、HTML 5が提供する単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.
WebSocketは、クライアントとサービス側の通信をより簡単にし、サービス側がクライアントにデータを自発的に送信できるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、データの双方向転送を行う持続的なチャネルを確立することができます.
現在、多くのサイトのプッシュテクノロジーはajaxポーリングを使用しています.ポーリングは、一定の時間間隔後にブラウザからサーバに要求を送信し、サーバから返される最新のデータを取得します.このように、明らかな欠点は、ブラウザが要求を絶えず送信する必要があることであり、要求には長いヘッダが含まれている可能性があり、本当に有効なのはほんの一部であり、ブロードバンドリソースの浪費をもたらしている.ずっと要求してサービス側の圧力を強めた.
HTML 5で定義されたWebSocketプロトコルは、ブロードバンドとサーバリソースをより節約し、リアルタイムで通信でき、サービス側が制御可能であり、データが更新されていない場合、データを転送する必要はありません.
ブラウザはJavaScriptを介してWebSocketリンクの作成要求をサーバに送信し,リンクの作成後,サーバとブラウザ側はTCP接続で直接データを交換できるようになった.
WebSocket接続を取得すると、send()メソッドでサーバにデータを送信し、onmessageイベントでサービス側から返されたデータをリスニングできます.
関連API:
1、WebSocketオブジェクトの作成:new WebSocket(url[,protocol])

1 const socket = new WebSocket('ws://localhost:2333');

urlについて、MDNはwss://モードを使うべきだと言います.これはvscodeローカル接続を使用してwsを使用することができます://
MDN原文:MDN転送ゲート
The URL to which to connect; this should be the URL to which the WebSocket server will respond. This should use the URL scheme  wss:// , although some software may allow you to use the insecure  ws://  for local connections.
2番目のオプションパラメータは、許容可能なサブプロトコルを規定します.1つのサーバは、指定されたプロトコルに従って異なるタイプのインタラクションを処理するなど、複数のWebSocketサブプロトコルを実装することができる.指定しない文字列は空です.
2、onopenは接続の確立を傍受する時に実行する.

1         //           
2         socket.onopen = function () {
3             console.log('          ')
4         }
5 
6         socket.addEventListener('open', function(event) {
7             console.log('     == ', event)
8             // socket.send(1)
9         })

3、onmessageはサービス側から返されたデータを傍受し、コールバック関数を実行する.

1         //               
2         socket.onmessage = function(event) {
3             console.log('onmessage == ', event.data)
4         }
5 
6         socket.addEventListener('message', function(event) {
7             console.log('message from server == ', event.data)
8         })

4、onerrorはエラーが発生した場合の状況を傍受する.

1         //           
2         socket.onerror = function(event) {
3             console.log('     == ', event)
4         }
5 
6         socket.addEventListener('error', function(event) {
7             console.log('addEventListener error == ', event)
8         })

5、oncloseはWebSocketを傍受して閉じる.

1         //           
2         socket.onclose = function() {
3             alert('     ，      ')
4         }
5 
6         socket.addEventListener('close', function() {
7             console.log('close link')
8         })

onイベントの実行は、対応するaddEventListenerより先に行われます.
6、WebSocketにはいくつかの読み取り専用属性があります.

 1             //                  ；       WebSocket    ，   protocols       
 2             console.log( 'socket protocol == ', socket.protocol )
 3             //      WebSocket      。
 4             // 0：   ；1：       ；2：    ；3：            
 5             console.log( 'socket readyState == ', socket.readyState )
 6             //       WebSocket     URL     。
 7             console.log( 'socket url == ', socket.url )
 8             //             。  ，                        。
 9             console.log( 'socket extensions == ', socket.extensions )
10             //      send()                         。                ，          0。  ，            ，         0。        send()，          。
11             console.log( 'socket bufferedAmount == ', socket.bufferedAmount )

 
詳細はクリックしてMDNを表示