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ネットワーク設定の実装

ブログ    

推薦する

Centos7 に Zabbix3.0 をインストールするための非常に詳細な手順

序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...

JavaScriptクロージャの原理と機能の詳細な説明

目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化(属性のプライベート化)閉...

LinuxでRPMを使用してmysql5.7.17をインストールする

LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...

Webフロントエンド開発エンジニアが習得すべきコアスキル

Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...

MySQL データベースの大文字と小文字の区別の問題

MySQL では、データベースはデータ ディレクトリ内のディレクトリに対応します。データベース内の各...

Vueの監視プロパティの詳細

目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

CSS3 はクールな 3D 回転遠近法効果を実現します

CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...

シーケンス関数を実装する MySQL コード

MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...

Vmware での Ubuntu サーバーのインストール チュートリアル

この記事では、Ubuntuサーバーバージョンのインストールグラフィックチュートリアルを参考までに紹介...

Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...