序文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 を挿入する」メソッドを実装する
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
1. シナリオの説明: 同僚から MySQL で explain を使用する方法を教わったので、返さ...
問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...
ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...
目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...
問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...
1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...
最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...
目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...
目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...
序文正直に言うと、最近とても混乱していると感じています。テクノロジーと人生について。また、将来の発展...
この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...
目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...
目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...