vueでSockJSを使用してwebSocket通信およびプラグインを実現

Vue+WebSocket実現ページリアルタイムリフレッシュ長接続最近vueプロジェクトはデータリアルタイムリフレッシュを行い、折れ線図は毎秒再描画し、データは0.5秒ごとにリフレッシュし、はっきり言えばリアルタイムリフレッシュで、データ量が大きいため、タイマーでページがしばらく滞在すると詰まってしまうと推定します.バックグラウンドの人と討論した後、h 5の新しいWebSocketを使ってデータのリアルタイム展示を実現し、過程と出会った問題を記録することにした.注意:ページのリフレッシュ長接続は閉じられますが、実際には現在のページに入って長接続を確立する目的は、ページがF 5でリフレッシュされず、すべてのデータが自動的にリアルタイムでリフレッシュされ、F 5のブラシページを往復すると意味がありません.コード:sockjs-clientとstompjsを先にインストール

npm install sockjs-client
npm install stompjs
import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {
    data(){
        return {
            stompClient:'',
            timer:'',
        }
    },
    methods:{
        initWebSocket() {
            this.connection();
            let that= this;
            //       ,      ,         
            this.timer = setInterval(() => {
                try {
                    that.stompClient.send("test");
                } catch (err) {
                    console.log("   : " + err);
                    that.connection();
                }
            }, 5000);
        },  
        connection() {
            //       
            let socket = new SockJS('http://10.10.91.4:8081/ws');
            //   STOMP         
            this.stompClient = Stomp.over(socket);
            //           ,     
            let headers = {
                Authorization:''
            }
            //       websocket  
            this.stompClient.connect(headers,() => {
                this.stompClient.subscribe('/topic/public', (msg) => { //           topic
                    console.log('    ')
                    console.log(msg);  // msg.body               
                },headers);
                this.stompClient.send("/app/chat.addUser",
                    headers,
                    JSON.stringify({sender: '',chatType: 'JOIN'}),
                )   //        
            }, (err) => {
                //             
                console.log('  ')
                console.log(err);
            });
        },    //     
        disconnect() {
            if (this.stompClient) {
                this.stompClient.disconnect();
            }
        },  //     
    },
    mounted(){
        this.initWebSocket();
    },
    beforeDestroy: function () {
        //          ,     
        this.disconnect();
        clearInterval(this.timer);
    }
}