WebSocket 的握手过程是怎样的？如何保活？

客户端请求：
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: https://example.com

服务端响应：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

class ReconnectingSocket {
  constructor(url, onMessage) {
    this.url = url
    this.onMessage = onMessage
    this.retries = 0
    this.connect()
  }

  connect() {
    const ws = new WebSocket(this.url)
    this.ws = ws
    ws.onopen = () => {
      this.retries = 0
      // 每 25 秒发一次 ping，发出后 10 秒内没收到任何消息，就判定连接已失效
      this.pingTimer = setInterval(() => {
        this.send({ type: 'ping' })
        clearTimeout(this.pongTimer)
        this.pongTimer = setTimeout(() => this.close(true), 10000)
      }, 25000)
    }
    ws.onmessage = (event) => {
      clearTimeout(this.pongTimer) // 收到任何消息都说明连接正常
      const msg = JSON.parse(event.data) // 约定消息都是 JSON 文本
      if (msg.type !== 'pong') this.onMessage(msg)
    }
    ws.onclose = () => this.close(true) // error 之后一定会触发 close，统一在这里重连
  }

  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(data))
  }

  // 关闭当前连接，reconnect 为 true 时按退避时间重连；外部调用 close() 则彻底关闭
  close(reconnect = false) {
    clearInterval(this.pingTimer)
    clearTimeout(this.pongTimer)
    clearTimeout(this.retryTimer)
    // 先解绑事件再关闭，不等旧连接的 close 事件（断网时它可能很久才触发）
    const { ws } = this
    ws.onopen = ws.onmessage = ws.onclose = null
    ws.close()
    if (!reconnect) return
    // 指数退避：1 秒、2 秒、4 秒……最长 30 秒，再加最多 1 秒的随机抖动
    const delay = Math.min(1000 * 2 ** this.retries, 30000) + Math.random() * 1000
    this.retries++
    this.retryTimer = setTimeout(() => this.connect(), delay)
  }
}