最近的vue项目会实时刷新数据。 折线图每秒刷新一次，数据每0.5秒刷新一次。 说白了，是实时刷新。 因为数据量很大，所以我想页面在计时器上停留一会儿会堵塞。
在与后台人员讨论后，我们决定使用h5的新web套接字实现数据的实时显示，并记录下一个过程和出现的问题。
注：页面刷新长连接将关闭，但实际上进入当前页面并建立长连接的目的是自动实时刷新所有数据，而不会刷新页面F5。 尽管如此，如果来回F5，大幅刷新页面的话就没有意义了。
如果ps:真的有这个需求的话，好像有办法在网上实现刷新页的长连接，所以请自己百度一下。
导出默认{
数据()。
return {
web sock :空，
}
(，
created () }
//页面进入后立即打开长连接
this.initWebSocket (
(，
destroyed :函数(
//页面销毁时关闭长连接
this.websocketclose (；
(，
methods: {
initWebSocket () weosocket初始化
constwsuri=process.env.ws _ API '/web socket/thread socket '； //ws地址
this.web sock=new web socket (ws uri；
this.web socket.on open=this.web socketonopen；
this.web socket.on error=this.websocketonerror；
this.web sock.on message=this.websocketonmessage；
this.web sock.onclose=this.web socket close；
、websocketonopen () console.log、websocket连接成功)； (，
websocketonerror(e )//错误
console.log(websocket连接发生错误)；
(，
websocketonmessage(e ) )//数据接收
constredata=JSON.parse(e.data )；
//注意：长连接我们在后台直接每秒推送一条数据，
//但是，单击某个列表会向后台发送一个标志，后台根据该标志返回对应的数据。
//此时，由于数据只能从一个出口出来，所以在后台添加密钥，例如密钥为1时通过每秒推送的数据进行区分，为2时通过发送标志后推送的数据进行区分
console.log(redata.value；
(，
websocketsend (代理数据)//发送数据
this.websock.send(agentdata )；
(，
websocketclose(e )//关闭
console.log (' connection closed ' e.code ' )；
(，
(，
}