WebSocket 実践 - jeremygo

小プログラムプロジェクトでは、リアルタイム通信のニーズがあります。ここでは、WebSocket の知識を整理します。

WebSocket について#

序文：Web アプリケーションの情報交換プロセスは通常、クライアントがブラウザを介してリクエストを送信し、サーバーがリクエストを受け取って処理し、結果をクライアントに返し、クライアントのブラウザが情報を解析するというメカニズムです。リアルタイム要件の高いアプリケーションにとっては制約が大きいため、効率的で省エネな双方向通信メカニズムが必要です。それが WebSocket です。
概念：
- MDN: WebSocket は、サーバーとの双方向セッションを作成できる高度な技術であり、この API を使用してサーバーにメッセージを送信し、イベント駆動型の応答を受け取ることができます。これにより、データをポーリングする必要がなくなります。
- WebSocket は Web TCP とも呼ばれ、通信に使用されます。HTML5 で新たに追加された通信プロトコルであり、TCP プロトコルとプログラミング API で構成されています。ブラウザとサーバーの間で双方向接続を確立し、イベントベースの方法でブラウザにネイティブのリアルタイム通信機能を提供し、Web アプリケーションを拡張し、パフォーマンスとユーザーエクスペリエンスを向上させることができます。
なぜ使用するのか：
WebSocket が登場する前に、他のリアルタイム通信の方法がいくつかありました。ポーリング、ロングポーリング、サーバーセントイベントなどがあります。
- ポーリング (Polling)：クライアントは一定の時間間隔でサーバーにリクエストを送信し、頻繁なリクエストによってクライアントとサーバーのデータを同期させます。通常、setIntervalまたはsetTimeoutを使用して実装されます。問題：クライアントが固定の頻度でサーバーにリクエストを送信する場合、サーバーのデータが更新されていない可能性があり、多くのリクエストが不要であり、帯域幅が無駄になり、効率が低下します。
- ロングポーリング (Long Polling)：定期的なポーリングの改善と向上です。サーバー側のデータが更新されていない場合、接続は一定の時間周期で保持され、データや状態の変更、または時間の経過まで維持されます。これにより、クライアントとサーバー間の無効な相互作用が減少します。問題：サーバーのデータ変更が非常に頻繁な場合、定期的なポーリングと比較して本質的なパフォーマンスの向上はありません。
- サーバーセントイベント (Server-Sent Event)：HTML5 の仕様の一部であり、サーバーからクライアントへの単方向データ通信を実現できます。SSE を使用すると、クライアントは HTTP リクエストを繰り返し送信する必要なく、自動的にデータの更新を取得できます。問題：サーバーからクライアントへの単方向のイベントプッシュのみをサポートし、すべてのバージョンの IE では SSE をサポートしていません。
- WebSocket：トラフィックと負荷が増加する状況では、従来の Ajax ポーリングソリューションと比較して非常に優れたパフォーマンスの利点があります。開発面でも複雑ではなく、WebSocket をインスタンス化して接続を作成し、成功したら適切なメッセージを送信するだけです。

Node.js での実装#

ここでは、Node.js の ws ライブラリを使用して簡単な WebSocket サーバーを実装します。

サーバー：

var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({
    port: 3001
});

wss.on("connection", function(ws) {
    ws.on("message", function(msg) {
        console.log(msg);
        ws.send("よろしくお願いします！");
    });
    ws.on("close", function() {
        console.log("クライアントが停止しました");
    });
});

小プログラムクライアント：

wx.connectSocket({
    url: 'サーバーのリンク:3001',
    data: {},
    header: {
        'content-type': 'application/json'
    },
    method: 'GET',
    success: function() {
        console.log("クライアントが接続しました");
    }
}),
wx.onSocketOpen(function() {
    console.log("WebSocketの接続が開かれました");
    wx.sendSocketMessage({
        data: 'こんにちは！'
    });
}),
wx.onSocketMessage(function(msg) {
    console.log("受信："+ msg);
});

特にwx.onSocketMessage()について説明しますが、これは文字列とバイナリのデータのみを受け取るため、JSON 形式のデータを送信する場合は変換が必要です。WebSocket をサポートしている場合、必ず window.JSON がサポートされているため、直接 JSON.parse () と JSON.stringify () を使用できます。

これで双方向通信の例がほぼ完成しました。