原理解释：

Web 应用的交互过程通常是客户端通过浏览器发出一个请求，服务器端接收请求后进行处理并返回结果给客户端，客户端浏览器将信息呈现，这种机制对于信息变化不是特别频繁的应用尚可，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在当前业界移动互联网蓬勃发展的趋势下，高并发与用户实时响应是 Web 应用经常面临的问题，比如金融证券的实时信息，Web 导航应用中的地理位置获取，社交网络的实时讯息推送等。

Websocket连接场景：

1. 客户端发送 HTTP 请求建立连接：客户端通过发送一个 HTTP 请求给服务器来建立 WebSocket 连接。请求头中包含了一些特殊的字段，如 Upgrade 和 Connection 字段，告诉服务器它希望升级到 WebSocket 连接。
2. 服务器响应握手请求：服务器收到客户端发送的握手请求后，会进行相应的处理并返回一个 HTTP 响应。响应头中同样包含了一些特殊的字段，如 Upgrade 和 Connection 字段，以及一个 Sec-WebSocket-Accept 字段，用于验证请求的合法性。
3. WebSocket 连接建立成功：客户端收到服务器返回的响应后，会验证响应的合法性。如果验证通过，表示 WebSocket 连接已经成功建立。
4. 双向通信：一旦 WebSocket 连接建立成功，客户端和服务器就可以通过该连接进行双向通信了。客户端可以发送讯息给服务器，服务器也可以发送讯息给客户端，实现真正的双向通信。
5. 连接关闭：当客户端或服务器决定关闭连接时，可以发送一个特殊的讯息，通知对方关闭连接。双方收到关闭讯息后，会相应地关闭连接。

需要注意的是，WebSocket 是一种持久化的协议，一旦连接建立成功，它会保持长时间的连接状态，不会像传统的 HTTP 请求那样频繁地建立和关闭连接。这种长连接的特性使得 WebSocket 协议在实时通信场景下具有较好的性能优势。

Websocket协议的使用：

• 创建websocket对象

  let ws = new WebSocket("url");

• 调用open方法

  ws.onopen = function () {
      console.log("链接成功");
  };

• 调用onmessage,接收数据

  ws.onmessage = function (data) {
      console.log('接受服务端数据', data)
          ws.send('hello world')
  };

• 向服务端发送数据调用send方法

  ws.send('hello world')

• 心跳检测

  // WebSocket心跳检测
  var ws_heartCheck = {
      timeout: 5000,			// 5秒一次心跳
      timeoutObj: null,		// 执行心跳的定时器
      serverTimeoutObj: null,	// 服务器超时定时器
      reset: function(){		// 重置方法
          clearTimeout(this.timeoutObj);
          clearTimeout(this.serverTimeoutObj);
          return this;
      },
      start: function(){		// 启动方法
          var self = this;
          this.timeoutObj = setTimeout(function(){
              // 这里发送一个心跳信息，后端收到后，返回一个讯息，在onmessage拿到返回的心跳（讯息）就说明连接正常
              ws.send("check");
  			// 如果超过一定时间还没重置，说明后端主动断开了
              self.serverTimeoutObj = setTimeout(function(){
  				// 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                  ws.close();
              }, self.timeout);
          }, this.timeout);
      }
  }