websocket+sockjs+stompjsの詳しい説明とサンプルコード

最近、WebSocket を使用するというプロジェクトの要件があり、最初は非常に簡単だと思いましたが、問題に遭遇し、さらに詳しく学ぶうちに、この記事では WebSocket の使用法を主に検討します。クライアント上で。

http ハイパーテキスト転送プロトコルには、誰もがよく知っています。http には 1.0、1.1、 http1.1 以降の 2.0 のいくつかのバージョンでは、接続の継続性を維持するためにデフォルトでキープアライブがオンになっています。簡単に言うと、Web ページを開いたときに、http データの送信に使用されるクライアントとサーバー間の TCP 接続が確立されません。クライアントがこのサーバー上の Web ページに再度アクセスすると、利用可能期間は終了します。は、この確立された接続を引き続き使用するため、リソースの消費が削減され、パフォーマンスが最適化されます。ただし、キープアライブには時間制限もあり、戻りデータを取得するリクエストをアクティブに開始することしかできず、アクティブに受信できないクライアントもあります。バックグラウンドでプッシュされるデータのために、WebSocket が登場しました。

Websocket は HTML5 の新機能の 1 つで、ブラウザとサーバー間の全二重通信方式を確立し、http リクエストとレスポンスによる過剰なリソース消費を解決し、特殊なシナリオのアプリケーションに新しい実装方法を提供することを目的としています。チャット、株式取引、ゲーム、およびリアルタイム要件の高いその他の業界など。

http と websocket は両方とも TCP (Transmission Control Protocol) に基づいています。Websocket は http プロトコルの補足と見なされます。

SockJS は JavaScript ライブラリであり、多くのブラウザが WebSocket プロトコルをサポートしていないという問題に対処するために、代替 SockJs が設計されました。 SockJS は WebSocket テクノロジーのエミュレーションです。 SockJSは可能な限りWebSocket APIに対応しますが、WebSocket技術が利用できない場合は自動的にポーリング方式に落ちます。

STOMP - シンプル テキスト指向メッセージ プロトコル - シンプル テキスト指向メッセージ プロトコル。

SockJS は WebSocket の代替手段を提供します。しかし、どのシナリオであっても、この形式の通信は実用化するには低レベルすぎます。 STOMP プロトコルを使用して、ブラウザとサーバー間の通信に適切なメッセージ セマンティクスを追加します。

つまり、WebSocket は基礎となるプロトコル、SockJS は WebSocket と基礎となるプロトコルの代替、STOMP は WebSocket (SockJS) に基づく上位層プロトコルです。

1. HTTP プロトコルは、リクエストを開始する Web ブラウザとリクエストに応答する Web サーバーの詳細を解決します。HTTP プロトコルが存在しないと仮定すると、Web アプリケーションの作成には TCP ソケットのみが使用できます。

2. WebSocket (SockJS) を直接使用することは、TCP ソケットを使用して Web アプリケーションを作成することと非常に似ています。高レベルのプロトコルがないため、アプリケーション間で送信されるメッセージのセマンティクスを定義する必要があり、また、両方のエンドで送信されるメッセージのセマンティクスを定義する必要もあります。接続は次のセマンティクスに従うことができます。

3. HTTP が TCP ソケット上に要求/応答モデル層を追加するのと同じように、STOMP は WebSocket 上にフレームベースのライン フォーマット層を提供して、メッセージ セマンティクスを定義します。

sockjs-client と stompjs をインストールします。stompjs: ^2.3.3 バージョンでは、stompjs を導入すると、stompjs モジュールのルート ディレクトリで npm install を実行する必要があることがわかりました。これは奇妙な問題です。

インポートモジュール:

 import SockJS from 'sockjs-client';import Stomp from 'stompjs';//接続関数 letnumber = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint`; //接続アドレス/ / 接続オブジェクトを確立します (接続はまだ開始されていません) letsocket = new SockJS(url) // STOMP サブプロトコルのクライアント オブジェクトを取得します。 stompClient = Stomp.over(socket); // サーバーへの WebSocket 接続を開始し、CONNECT フレームを送信します stompClient.connect( {}, // クライアントの認証情報関数 connectCallback () { // 成功時のコールバック関数connection // サブスクリプション チャネル stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //接続失敗時に関数番号を再度呼び出す += 1; if(number<=10){ reconnect(url) } console.log('error',error);

概要: クライアント側での WebSocket の実装は比較的単純に見えますが、最良の結果を達成するにはバックグラウンドとの適切な連携とデバッグが必要です。 SockJS と Stomp によってブラウザーの互換性が実現され、メッセージのセマンティクスが向上し、使いやすさが向上します。 Websocket を完全に理解するには、基礎となる原理と関連知識を深く理解する必要もあります。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。