Vue で webSocket を使用してリアルタイムの天気を更新する方法

Vue で webSocket を使用してリアルタイムの天気を更新する方法

序文

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 の使用は実際には非常に簡単です。

1. ブラウザが webSocket をサポートしているかどうかを判断します。
2. webSocket インスタンスを作成します。
3. 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはWebSocketを使用してチャット機能をシミュレートします
  • Vue が websocket を使用する方法の例の分析
  • SockJS を使用して vue で webSocket 通信を実装するプロセス
  • Vue プロジェクトで Websocket を使用する正しい方法

<<:  insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する

>>:  nginx高可用性クラスタの実装プロセス

推薦する

HTMLウェブページのMETAタグのコンテンツを書く際のポイント

META タグは、HTML 言語のヘッダー領域にある補助タグです。作成者、日時、Web ページの説明...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

MySQLで偽または真を保存する方法

MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

MySQL のジオメトリ型を使用して経度と緯度の距離の問題を処理する方法

テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

CSS グラデーション効果の概要 (線形グラデーションと放射状グラデーション)

線形グラデーション 背景画像: linear-gradient(方向、開始色、中間色1、中間色2、....

MySQL インデックス カバレッジの例の分析

この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...