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高可用性クラスタの実装プロセス

推薦する

MySQL 5.6.23 のインストールと設定環境変数のチュートリアル

この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...

EXPLAIN コマンドの詳細な説明と MySQL での使用方法

1. シナリオの説明: 同僚から MySQL で explain を使用する方法を教わったので、返さ...

純粋な CSS でマークダウンの自動番号付けを実装するサンプル コード

問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...

IE6かどうかを判定する最短JS(IEの書き方)

ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

Zabbix パスワードをリセットする方法 (ワンステップ)

問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

サーバー同時実行数の推定式と計算方法

最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...

Vue フィルターの使用とタイムスタンプ変換の問題

目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...

MySQL データベースの基礎: 基本コマンドの概要

目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...

ByteDance インタビュー: JS を使用して Ajax 同時リクエスト制御を実装する方法

序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...

Vue+Vantはトップ検索バーを実装します

この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...

Docker ケース分析: MySQL データベース サービスの構築

目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...

Linux での nginx のインストール、展開、使用方法の詳細な説明

目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...

タグのターゲットリンクを iframe に向ける方法

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...