序文Vue で webSocket を使用して、シンプルな天気のリアルタイム更新モジュールを作成します。 webSocket の操作と例について: 1.webSocket接続 2. データを受信する 3. 再接続メカニズム ウェブソケット1. webSocketについてWebSocket は、単一の TCP 接続を介して全二重通信を可能にする HTML5 によって提供されるプロトコルです。ブラウザは JavaScript を通じてサーバーにリクエストを送信し、WebSocket 接続を確立します。接続が確立されると、クライアントとサーバーは TCP 接続を介して直接データを交換できます。 Web Socket 接続を取得したら、send() メソッドを通じてサーバーにデータを送信し、onmessage イベントを通じてサーバーから返されたデータを受信できます。 var Socket = new webSocket(url, [プロトコル] ); プロトコルはオプションであり、許容されるサブプロトコルを指定します。 2. AJAX Wheelとの違い現在、多くの Web サイトでは、プッシュ テクノロジーを実装するために Ajax ポーリングを使用しています。ポーリングとは、ブラウザが特定の時間間隔 (1 秒ごとなど) でサーバーに HTTP リクエストを送信し、サーバーが最新のデータをクライアントのブラウザに返すことです。 この従来のモデルには明らかな欠点があります。つまり、ブラウザはサーバーにリクエストを継続的に送信する必要があるということです。ただし、HTTP リクエストには長いヘッダーが含まれる場合があり、実際に有効なデータはそのうちのほんの一部にしか過ぎない可能性があります。明らかに、これは大量の帯域幅やその他のリソースを浪費することになります。 HTML5 で定義された webSocket プロトコルにより、サーバーのリソースと帯域幅をより効率的に節約し、よりリアルタイムな通信が可能になります。 3.webSocketイベント 4. 簡単な例上記の簡単な紹介を踏まえて、webSocket インスタンスを作成して試してみましょう。 関数webSocketTest() { if ("webSocket" がウィンドウ内にある){ alert("お使いのブラウザはwebSocketをサポートしています!"); // WebSocketを開く var ws = new webSocket("ws://localhost:8080/test"); ws.onopen = 関数() { // WebSocket が接続されたら、send() メソッドを使用してデータを送信します ws.send("send data"); console.log("データを送信しています..."); }; ws.onmessage = 関数 (evt) { // 受信したデータ var data = evt.data; console.log("データを受信しました..."); }; ws.onerror = 関数(){ // 接続エラー console.log('接続エラー...'); } ws.onclose = 関数() { // WebSocketを閉じる console.log("接続が閉じられました..."); }; } それ以外 { // ブラウザはwebSocketをサポートしていません alert("お使いのブラウザはwebSocketをサポートしていません!"); } } ご覧のとおり、webSocket の使用は実際には非常に簡単です。
Vueでも同じ方法が使われている 天気予報ここでは、前述のリアルタイム天気更新効果の実装を示します。プロジェクトフレームワークはvue\elementです。 基本コード <!-- レイアウトに使用される要素。そのまま使用してください --> <el-popover 配置="下" :title="天気.title" トリガー="ホバー" :content="天気.cont"> <div スロット="reference" クラス="天気"> <img :src="天気.url" alt=""> </div> </el-popover> エクスポートデフォルト{ データ() { 戻る { 天気: 都市名: ''、 タイトル: '-- 市 / --℃', 続き: '--', 天気コード: '0', URL: '' } } }, メソッド: { // 天気を取得する async getTheWeather() { // まず、インターフェースを通じて現在の天気状況を要求します。let res = await this.$Http.getWeather({}); (res.code === 200)の場合{ // ここで、インターフェースで取得した天気データを weather in data に格納します... //次に、WebSocket を開いてリアルタイムで受信します。this.connectWebSocket(); } }, //ウェブソケット WebSocket() を接続する{ _this = this とします。 if (ウィンドウ内に「WebSocket」がある場合) { console.log("お使いのブラウザはWebSocketをサポートしています!"); // WebSocketを開く let url ='xxxxxxxxxxx'; // データプッシュ用のアドレスを提供します let ws = new webSocket(`ws://${url}`); // 接続成功 ws.onopen = function () { // Web Socket が接続されたら、send() メソッドを使用してデータを送信します ws.send("これは送信されたテスト データです"); console.log('接続に成功しました'); }; // 処理のためにデータを受信 ws.onmessage = function (evt) { received_msg = evt.data とします。 // ここで、天気データをデータに入れると、天気が更新されます... }; // 接続エラー ws.onerror = function () { console.log('接続エラー...'); } // 接続が閉じられました ws.onclose = function () { // Webソケットを閉じる console.log("接続が閉じられました..."); } } それ以外 { // ブラウザはWebSocketをサポートしていません console.log("お使いのブラウザはWebSocketをサポートしていません!"); } }, }, マウント() { // ローカル天気を取得します this.getTheWeather(); } } 画像素材天気画像情報については、天気コード値をバックエンドと相談して、値を直接置き換えるのが最善です。 this.weather.url = require(`@/assets/img/weather/${weatherInfo.weatherCode}@2x.png`); 再接続メカニズム最後に、再接続メカニズムが導入されます。 シンプルな再接続メカニズム。setTimeout を使用するだけです。接続エラーが発生したり、接続が閉じられたりした場合は、タイマーを使用して connectWebSocket メソッドを再実行し、再接続します。ただし、この操作には複数の問題が発生する可能性があるため、再接続するためのより洗練されたプラグインである ReconnectingWebSocket が見つかりました。 ReconnectingWebSocket は、実際には再接続メカニズムを備えたカプセル化された webSocketTest インスタンスです。接続が切断されると、再接続されるまで友好的な方法で再接続を試みます。使い方も比較的簡単で、インポートして作成するだけです。 // インポート import ReconnectingWebSocket from '@/util/ReconnectingWebSocket'; エクスポートデフォルト{ データ() { 戻る { ... } }, メソッド: { ... WebSocket() を接続する { _this = this とします。 if (ウィンドウ内に「WebSocket」がある場合) { console.log("お使いのブラウザはWebSocketをサポートしています!"); // WebSocketを開く let url ='xxxxxxxxxxx'; // データプッシュ用のアドレスを提供します - let ws = new webSocket(`ws://${url}`); // 破棄します + let ws = new ReconnectingWebSocket(`ws://${url}`); // これに変更します // 接続が成功しました ws.onopen = function () { // Web Socket が接続されたら、send() メソッドを使用してデータを送信します ws.send("これは送信されたテスト データです"); console.log('接続に成功しました'); }; // 処理のためにデータを受信 ws.onmessage = function (evt) { ... }; // 接続エラー ws.onerror = function () { console.log('接続エラー...'); } // 接続が閉じられました ws.onclose = function () { // Webソケットを閉じる console.log("接続が閉じられました..."); } } それ以外 { // ブラウザはWebSocketをサポートしていません console.log("お使いのブラウザはWebSocketをサポートしていません!"); } } } } ReconnectingWebSocket は単一の JS ファイルであり、オンラインで検索できます。 これで、webSocket を使用して Vue でリアルタイムの天気を更新する方法についての記事は終了です。Vue webSocket でリアルタイムの天気を更新する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する
META タグは、HTML 言語のヘッダー領域にある補助タグです。作成者、日時、Web ページの説明...
目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...
<tr> <th width="12%">あああ<...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...
「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...
ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...
テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...
目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...
HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...
rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...
バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...
線形グラデーション 背景画像: linear-gradient(方向、開始色、中間色1、中間色2、....
この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...
目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...