Vue+WebSocket ページでの長時間接続のリアルタイム更新

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ごとに再描画され、データは 0.5 秒ごとに更新されます。簡単に言うとリアルタイム更新です。データ量が多いため、タイマーを使用してしばらく滞在するとページが固まってしまうことが予想されます。 。 。

バックエンドスタッフと話し合った結果、h5 に新しく追加された WebSocket を使用してリアルタイムのデータ表示を実現し、プロセスと発生した問題を記録することにしました。

注意: ページ更新のための長い接続は閉じられます。実際、現在のページに入るときに長い接続を確立する目的は、F5 を使わずにページを更新することです。すべてのデータはリアルタイムで自動的に更新されます。それでも F5 でページを何度も更新すると意味がありません。 。 。

追伸: 本当に必要な場合は、ページを更新して接続を維持する方法があるようです。Baidu で検索してください。 。 。 。

<テンプレート>
    <div>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        データ() {
            戻る {
                ウェブソック: null、
            }
        },
    作成された(){
           //ページに入ったときに長い接続を開く this.initWebSocket()
       },
    破棄: 関数() {
    //ページが破棄されたら長い接続を閉じます this.websocketclose();
    },
    メソッド: { 
      initWebSocket(){ //wesocketを初期化する 
 
              const wsuri = process.env.WS_API + "/websocket/threadsocket"; //ws アドレス this.websock = new WebSocket(wsuri); 
        this.websocket.onopen = this.websocketonopen;

        this.websocket.onerror = this.websocketonerror;

        this.websocketonmessage は、次のメッセージを返します。 
        this.websocket.onclose は this.websocketclose です。
    }, 

      ウェブソケットオープン() {
        console.log("WebSocket接続が成功しました");
      },
      websocketonerror(e) { //エラー console.log("WebSocket接続エラー");
      },
      websocketonmessage(e){ //データ受信 const redata = JSON.parse(e.data);
         //注: 長時間の接続の場合、バックグラウンドで 1 秒あたり 1 つのデータを直接プッシュします。 
          //ただし、リストをクリックすると、識別子がバックエンドに送信され、バックエンドはこの識別子に基づいて対応するデータを返します。
      //このとき、データは1つの出口からしか送出できないので、バックグラウンドにキーを追加します。例えば、キーが1のときは1秒ごとにデータをプッシュし、2のときはマークを送信してからデータをプッシュするなど、区別します。 console.log(redata.value); 
      }, 

      websocketsend(agentData){//データ送信 this.websock.send(agentData); 
      }, 

     websocketclose(e){ //閉じる console.log("接続が閉じられました (" + e.code + ")"); 
     },
   }, 
  }
 </スクリプト>

これで、Vue+WebSocket ページの長時間接続のリアルタイム更新の実装に関するこの記事は終了です。より関連性の高い Vue+WebSocket の長時間接続のリアルタイム更新コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で webSocket を使用してリアルタイムの天気を更新する方法
  • vue websocket nodeJS を使用したリアルタイム通信の落とし穴についての簡単な説明
  • VueはWebSocketを実装して、リアルタイムでメッセージを送受信します。
  • Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

<<:  MySQLデータベースで列を追加、削除、変更する方法

>>:  CentOS8.0ネットワーク設定の実装

推薦する

Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

ulとliの基本的な使用法の分析

ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...

Linuxコマンドとファイル検索の詳しい説明

1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...

JavaScript における型の必須および暗黙的な変換の詳細な説明

目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...

HTML+CSS3+JSで実装されたドロップダウンメニュー

成果を達成する html <div class="コンテナ"> &l...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

jQuery はピッカーをシミュレートしてスライド選択効果を実現します

この記事では、スライド選択効果を実現するピッカーをシミュレートするjQueryの具体的なコードを参考...

Nginx の動的および静的分離実装ケースのコード分析

静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

Windows Server 2016 に Docker をインストールするプロセスと発生した問題

前提条件Windows Server でコンテナーを実行するには、Windows Server (半...

IDEA 2020 で Tomcat サーバーを構成するための詳細な手順

IDEA 2020 で Tomcat を構成する手順は次のとおりです。最初のステップはTomcatを...