WebSocket 实现页面数据实时更新

WebSocket实时更新

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

代码展示

const token = storage.get('Access-Token')
const url = wsUrl //引入配置地址
// 判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
  this.websocket = new WebSocket(url + token)
} else {
  alert('Not support websocket')
}
this.websocket.onopen = function () {  
   //与服务器成功建立连接
}
// 接收到消息的回调方法
this.websocket.onmessage = function (event) {
  const data = JSON.parse(event.data)
  if (data.type === 'string') {
    // 请求数据
    
  }
}

控制台监控结果