[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 + ")"); 
    　　　　　},
    　　　}, 
    　　}