亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

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

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

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

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
    created(){
           //頁面剛進(jìn)入時(shí)開啟長連接
            this.initWebSocket()
       },
    destroyed: function() {
    //頁面銷毀時(shí)關(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) { //錯(cuò)誤
        console.log("WebSocket連接發(fā)生錯(cuò)誤");
      },
      websocketonmessage(e){ //數(shù)據(jù)接收 
        const redata = JSON.parse(e.data);
         //注意:長連接我們是后臺直接1秒推送一條數(shù)據(jù), 
          //但是點(diǎn)擊某個(gè)列表時(shí),會發(fā)送給后臺一個(gè)標(biāo)識,后臺根據(jù)此標(biāo)識返回相對應(yīng)的數(shù)據(jù),
      //這個(gè)時(shí)候數(shù)據(jù)就只能從一個(gè)出口出,所以讓后臺加了一個(gè)鍵,例如鍵為1時(shí),是每隔1秒推送的數(shù)據(jù),為2時(shí)是發(fā)送標(biāo)識后再推送的數(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頁面實(shí)時(shí)刷新長連接的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue+WebSocket實(shí)時(shí)刷新長連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論