wsモジュールガイド+Vueオンラインチャットルーム

概要
wsモジュールはノード側のWebSocketプロトコルの実装であり、クライアント(一般的にブラウザ)の永続化とサービス側の接続を可能にする.
このような連続接続可能な特性により、WebScoketはゲームやチャットルームなどの使用シーンに特に適する.
wsモジュールは他のWebSocketプロトコルに基づくモジュールに比べて非常に純粋である.彼はWebSocketプロトコルに基づく実装のみに注目し、他の例えばSocket.ioは、WebSocketが使用できない場合にポーリングを利用して永続化接続をシミュレートするフォールバック手段を提供する.
WebSocketプロトコルは非常に簡単で有効に設計されており、知らなかった友达はまず理解することができます.ここにはWebSocketプロトコルを紹介する文章がいくつか添付されています.
https://developer.mozilla.org...
http://www.ruanyifeng.com/blo...
https://www.cnblogs.com/fuqia...
この文章は主に以下の部分に分けられます.

wsモジュール紹介

ws構築サーバ

ws作成クライアント

wsはVueと協力して簡単なオンラインチャットルーム

を作成した.
本論文で用いるwsバージョンは6.1.0である.
wsモジュールの紹介
wsモジュールは基本的に2つの部分に分けられ、以下の特徴があります.

serverセクション

wsモジュールを用いるストリーミング

を構成することができる.

既存のHttp/sサーバに基づいて接続を確立する

内部のHttpモジュールに基づいてサーバ

を直接確立する

手動制御プロトコルのアップグレード

clientセクション

ブラウザ側とほぼ一致するAPIのクライアント実装

wsモジュールの導入:

const WebSocket = require('ws');

サーバの作成:

const wss = new WebSocket.Server({
    port:8080
});

クライアントの作成:

const ws = new WebSocket('ws://127.0.0.1:8080');

wsサーバの構築
wsサーバの構築は、1つのHttpサーバに基づいてもよいし、内部のHttpサーバを用いてもよいし、後述例を簡単に説明するために内部サーバを用いる.
wsモジュールのサービス側の作成と使用は、ノードに非常に類似したHttpモジュールを使用します.

const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 }); //     
 
wss.on('connection', function connection(ws) { //                   ,          client  
  ws.on('message', function incoming(message) {
    console.log('        ', message);
  });
 
  ws.send('something'); //     
});

ここで示すべき点は、WebSocketがHttpによるプロトコルアップグレード後にWebSocketプロトコルになることである.connectionのイベントにおける最初のパラメータがClientオブジェクトであることは、実際にはwsモジュールのクライアントインスタンスである.wsモジュールは、このオブジェクトを用いて接続オブジェクトを記述する.2番目のパラメータは、http.IncomingMessageのオブジェクトである、Cookieのような要求パラメータを取得するために利用することができる.
ここでは、connectionのイベントの最初のパラメータがwsのインスタンスオブジェクトであることを覚えておけばよいが、後でこのオブジェクトについて説明する.
Server側には多くのイベントと属性と方法があります.ここでは一般的なパラメータしか書いていません.詳細な公式ドキュメントは文章の末尾に追加します.
イベント:

closeサーバが閉じると

がトリガーされます.

connectionクライアントとサーバの握手が完了すると

がトリガーされます.

errorサーバの最下位エラー時に

がトリガーされます.

headersクライアントがアップグレードプロトコルを要求する要求がトリガーされる.この時点でまだWebSocket通信が確立されていないので、このイベントでHeader

をチェックして修正することができます.

listeningサーバがリスニングを開始すると

がトリガーされます.
属性:

server.Clientsの1つのSetオブジェクトは、サーバが確立したすべての接続オブジェクトを保存し、サーバのコンストラクション関数でclientTrackingがTrueの場合にのみ有効です.

方法:

close()呼び出し後に内部のHttpサーバを閉じ、データ転送が完了するとすべてのクライアント接続

を自動的に閉じる.
クライアント作成
前述wsモジュールが提供するクライアントAPIは、ブラウザとほぼ一致するが、ブラウザ側よりも豊富な機能を提供する.
例はクライアントを使用します(この例は公式サイトから来ています):

const WebSocket = require('ws');
 
const ws = new WebSocket('wss://echo.websocket.org/', {
  origin: 'https://websocket.org'
});
 
ws.on('open', function open() { //        
  console.log('connected');
  ws.send(Date.now());
});
 
ws.on('close', function close() {
  console.log('disconnected');
});
 
ws.on('message', function incoming(data) { //            
  console.log(`Roundtrip time: ${Date.now() - data} ms`);
 
  setTimeout(function timeout() {
    ws.send(Date.now());
  }, 500);
});

echo.websocket.orgこのサイトには簡単なwebSocketのサーバが提供されており、ノードで上記の例を直接実行することができます.
同じクライアントでも豊富なイベント属性と方法が提供されています.ここでは、最も一般的に使用されている内容を簡単に説明します.

イベント

close接続が閉じるとトリガーされる.

errorの最下位エラーの場合、サーバの応答なしによるタイムアウトなどがトリガーされる.

messageサーバ送信データが到着すると

がトリガーされる.

openサーバが接続を確立すると

がトリガーされます.

メソッド

addEventListener

removeEventListener

sendサーバにデータを送信するための

closeクローズ接続(今回のデータ受信または送信が完了すると)

.

terminateダイレクトクローズ接続

プロパティ

readyState現在接続されている状態合計4つの値0接続のうち1オープン3クローズ中4クローズ(ブラウザ側のステータスコードと完全に一致)

.

≪インスタンス｜Instance｜emdw≫
サーバとクライアントのインタラクション

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {

    ws.on('message', function incoming(message) {
        console.log('              :', message);
    });

    //         
    ws.send('          ');

});

const ws = new WebSocket('ws://127.0.0.1:8080');

ws.on('open', function open() {
    //         
    ws.send('     ');
});

ws.on('message', function incoming(data) {

    //            
    console.log('            ',data);

});

出力:

                       
              :      

ブロードキャストメッセージ
ブロードキャストメッセージの基本原理は、サーバがconnectionイベント中に伝達するクライアントオブジェクトを取得し、クライアントオブジェクトを収集し、sendメソッドを反復的に呼び出すことである.
公式の例:

const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 });
 
//                 ,      
wss.broadcast = function broadcast(data) {

  //               
  wss.clients.forEach(function each(client) {
  
    //          
    if (client.readyState === WebSocket.OPEN) {
      //     
      client.send(data);
    }
  });
  
};
 
wss.on('connection', function connection(ws) {

  ws.on('message', function incoming(data) {
    //                
    wss.clients.forEach(function each(client) {
      //            ,          
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        //     
        client.send(data);
      }
    });
  });
});

ブラウザ側とサーバのインタラクション
サーバ:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {

    ws.on('message', function incoming(message) {
        console.log('              :', message);
    });

    //         
    ws.send('          ');

});

ブラウザ:

const client = new WebSocket('ws://127.0.0.1:8080');

client.addEventListener('open',()=>{
    //         
    client.send('     ');
});

client.addEventListener('message',(data)=>{
     //            
    console.log('            ', data);
});

ブラウザクライアントとwsクライアントの違い
とくせい
エクスプローラ
wsクライアント
onメソッドを使用してイベントを追加する
いけません
できる
addEventListenerの使用
できる
できる
onerror、onclose...
できる
できる
メッセージイベントdataデータ取得
はい
いいえ
readyStateプロパティ
はい
はい
Vue+wsを使用してオンラインチャットルームを作成
コードはgithubに置かれました:
https://github.com/uioz/Simpl...
注:コンストラクションツールは使用されていません.
注意:本プロジェクトのサーバ部分はTSで記述するが、クライアントはTSを使用していない.
参照
npmガイドには、次のものが含まれます.

のバイナリデータの転送と圧縮.

外部Http/sサーバはWebSocketの具体的な使用方法にアップグレードする.

1 Http対応複数WebSocketServer

心拍タイムアウト検出.

クライアントip取得

https://www.npmjs.com/package/ws
APIマニュアル:
https://github.com/websockets...