Vue+WebSocket 實作頁面實時重新整理長連接配接

最近vue項目要做資料實時重新整理，折線圖每秒重畫一次，資料每0.5秒重新整理一次，說白了就是實時重新整理，因為資料量較大，用定時器估計頁面停留一會就會卡死。。。

與背景人員讨論過後決定使用h5新增的WebSocket來實作資料實時展示，記錄一下過程以及碰到的問題；

注意：頁面重新整理長連接配接會被關閉，其實進入目前頁面建立長連接配接的目的就是頁面不用F5重新整理，所有資料自動實時重新整理，如果還是來回F5大刷頁面那就沒有意義了。。。

ps:　如果實在有這個需求的話，網上貌似有實作重新整理頁面長連接配接不斷的方法，請自行百度。。。。

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

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
　　　　created(){
           //頁面剛進入時開啟長連接配接
            this.initWebSocket()
       },
　　　　destroyed: function() {
　　　　//頁面銷毀時關閉長連接配接
　　　　　　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連接配接發生錯誤");
　　　　　　},
　　　　　　websocketonmessage(e){ //資料接收 
　　　　　　　　const redata = JSON.parse(e.data);
　　　　　　　　　//注意：長連接配接我們是背景直接1秒推送一條資料， 
          //但是點選某個清單時，會發送給背景一個辨別，背景根據此辨別傳回相對應的資料，
      //這個時候資料就隻能從一個出口出，是以讓背景加了一個鍵，例如鍵為1時，是每隔1秒推送的資料，為2時是發送辨別後再推送的資料，以作區分
　　　　　　　　console.log(redata.value); 
　　　　　　}, 

　　　　　　websocketsend(agentData){//資料發送 
　　　　　　　　this.websock.send(agentData); 
　　　　　　}, 

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