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>