最近、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLデータベースで列を追加、削除、変更する方法
序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...
目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化(属性のプライベート化)閉...
LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...
Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...
MySQL では、データベースはデータ ディレクトリ内のディレクトリに対応します。データベース内の各...
目次1.watchは一般的なデータ(数値、文字列、ブール値)の変更を監視します。 1. 数値2. 文...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
CSS3はクールな3D回転パースペクティブを実現します3D アニメーション効果はますます人気が高まっ...
MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...
目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...
実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...
この記事では、Ubuntuサーバーバージョンのインストールグラフィックチュートリアルを参考までに紹介...
目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...