欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+WebSocket頁面實時刷新長連接的實現(xiàn)

 更新時間:2021年06月18日 09:54:19   作者:飯米雪  
最近vue項目要做數(shù)據(jù)實時刷新,數(shù)據(jù)較大,會出現(xiàn)卡死情況,所以本文主要介紹了頁面實時刷新長連接,具有一定的參考價值,感興趣的小伙伴們可以參考一下

最近vue項目要做數(shù)據(jù)實時刷新,折線圖每秒重畫一次,數(shù)據(jù)每0.5秒刷新一次,說白了就是實時刷新,因為數(shù)據(jù)量較大,用定時器估計頁面停留一會就會卡死。。。

與后臺人員討論過后決定使用h5新增的WebSocket來實現(xiàn)數(shù)據(jù)實時展示,記錄一下過程以及碰到的問題;

注意:頁面刷新長連接會被關(guān)閉,其實進入當前頁面建立長連接的目的就是頁面不用F5刷新,所有數(shù)據(jù)自動實時刷新,如果還是來回F5大刷頁面那就沒有意義了。。。

ps: 如果實在有這個需求的話,網(wǎng)上貌似有實現(xiàn)刷新頁面長連接不斷的方法,請自行百度。。。。

<template>
    <div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
    created(){
           //頁面剛進入時開啟長連接
            this.initWebSocket()
       },
    destroyed: function() {
    //頁面銷毀時關(guān)閉長連接
      this.websocketclose();
    },
    methods: { 
      initWebSocket(){ //初始化weosocket 
       
        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.websock.onmessage = this.websocketonmessage; 
        this.websock.onclose = this.websocketclose;
       }, 

      websocketonopen() {
        console.log("WebSocket連接成功");
      },
      websocketonerror(e) { //錯誤
        console.log("WebSocket連接發(fā)生錯誤");
      },
      websocketonmessage(e){ //數(shù)據(jù)接收 
        const redata = JSON.parse(e.data);
         //注意:長連接我們是后臺直接1秒推送一條數(shù)據(jù), 
          //但是點擊某個列表時,會發(fā)送給后臺一個標識,后臺根據(jù)此標識返回相對應(yīng)的數(shù)據(jù),
      //這個時候數(shù)據(jù)就只能從一個出口出,所以讓后臺加了一個鍵,例如鍵為1時,是每隔1秒推送的數(shù)據(jù),為2時是發(fā)送標識后再推送的數(shù)據(jù),以作區(qū)分
        console.log(redata.value); 
      }, 

      websocketsend(agentData){//數(shù)據(jù)發(fā)送 
        this.websock.send(agentData); 
      }, 

      websocketclose(e){ //關(guān)閉 
        console.log("connection closed (" + e.code + ")"); 
     },
   }, 
  }
 </script>

到此這篇關(guān)于Vue+WebSocket頁面實時刷新長連接的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue+WebSocket實時刷新長連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • ElementUI?組件之Layout布局(el-row、el-col)

    ElementUI?組件之Layout布局(el-row、el-col)

    這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細,感興趣的朋友一起看看吧
    2024-07-07
  • 詳解vue組件化開發(fā)-vuex狀態(tài)管理庫

    詳解vue組件化開發(fā)-vuex狀態(tài)管理庫

    本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫,具有一定的參考價值,有興趣的可以了解一下。
    2017-04-04
  • 使用Element-UI的NavMenu如何隱藏自帶的小箭頭

    使用Element-UI的NavMenu如何隱藏自帶的小箭頭

    這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Vue不同項目之間傳遞、接收參數(shù)問題

    Vue不同項目之間傳遞、接收參數(shù)問題

    這篇文章主要介紹了Vue不同項目之間傳遞、接收參數(shù)問題,主要針對是登錄操作,我們?yōu)榱送瓿蒘SO(Single Sign On)的效果,認證和授權(quán)在UC完成,用戶發(fā)起資源請求,服務(wù)網(wǎng)關(guān)會進行過濾,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法

    Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法

    這篇文章主要介紹了Vue?+?SpringBoot?實現(xiàn)文件的斷點上傳、秒傳存儲到Minio的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-06-06
  • 詳解vue中點擊空白處隱藏div的實現(xiàn)(用指令實現(xiàn))

    詳解vue中點擊空白處隱藏div的實現(xiàn)(用指令實現(xiàn))

    本篇文章主要介紹了詳解vue中點擊空白處隱藏div的實現(xiàn)(用指令實現(xiàn)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • element input輸入框自動獲取焦點的實現(xiàn)

    element input輸入框自動獲取焦點的實現(xiàn)

    本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue 封裝防刷新考試倒計時組件的實現(xiàn)

    Vue 封裝防刷新考試倒計時組件的實現(xiàn)

    這篇文章主要介紹了Vue 封裝防刷新考試倒計時組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • vue v-for 使用問題整理小結(jié)

    vue v-for 使用問題整理小結(jié)

    使用v-for指令的時候遇到一個錯誤問題,具體錯誤代碼在文章給大家列出,對vue v-for使用問題感興趣的朋友跟隨小編一起學習吧
    2019-08-08
  • 詳解vuex中mutations方法的使用與實現(xiàn)

    詳解vuex中mutations方法的使用與實現(xiàn)

    這篇文章主要為大家詳細介紹了vuex中mutations方法的使用與實現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下
    2023-11-11

最新評論