websocket 页面数据实时更新 监听是否已扫码支付

实现以上功能

如题，我知道主要有两大种思路：

1. 轮询：轮询的原理是隔一段时间向服务器发送一个请求，这里不累述。这里主要谈一下第二种思路。
2. websocket进行前后端通讯：websocket是html5的新协议，基于TCP，在一次握手后，建立http连接，实现客户端与服务端全双工通信。相比较轮询机制，节约资源，不需要频繁的请求

   ---

websocket实时更新

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

---

代码如下

creatSocket() {
  let wsURL = wsURL //引入配置地址
    that = this,
    websocket;

  // 判断浏览器是否支出 WebSocket
  if ("WebSocket" in window) {
    websocket = new WebSocket(wsURL);
  } else {
    alert("当前浏览器不支持 'WebSocket'");
  }

  //连接发生错误的回调方法
  websocket.onerror = function (event) {
    console.log("WebSocket-连接发生错误", event);
  };

  //连接成功时的回调方法
  websocket.onopen = function (event) {
    console.log("WebSocket-连接成功", event);
  };

  //接收到消息的回调方法
  websocket.onmessage = function (event) {
    console.log("WebSocket-接收到数据", event);
  };
  
  //连接关闭的回调方法
  websocket.onclose = function (event) {
    console.log("WebSocket-连接关闭", event);
  };
},

---

控制台监控结果