WebSocket 基础用法websocket是 HTML5 开始提供的一种网络通信协议 WebSocket是HTML5

1.WebSocket

1.1 WebSocket的介绍

websocket是 HTML5 开始提供的一种网络通信协议
WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

1.2 为什么要使用websocket

因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

1.3 websocket基础用法

// 创建websocket
    const ws = new WebSocket('ws://124.222.224.186:8800')
    // 连接成功
    ws.addEventListener('open',()=>{
        console.log('连接成功')
        ws.send('hello')
    })
    // 接收数据
    ws.addEventListener('message',(e)=>{
        console.log(e.data);
        ws.close()// 关闭连接
    })
    // 错误
    ws.addEventListener('error',()=>{
        console.log('连接错误');
        
    })
    // 关闭
    ws.addEventListener('close',()=>{
        console.log('连接关闭');
    })

1.4 websocket心跳机制和断线重连

实现WebSocket断线重连和心跳检查通常涉及以下几个步骤：

1.建立WebSocket连接：初始化WebSocket对象并连接到服务器。

2.心跳机制：

定期发送心跳消息以确保连接活跃。
设置一个定时器，每隔一段时间发送一次心跳消息。

3.断线检测：

监听WebSocket的close事件，当连接关闭时触发。
在close事件中尝试重新连接。

4.重连机制：

设置一个重连间隔时间，每次重连失败后增加重连间隔时间。
使用递归或循环的方式进行重连，直到连接成功或达到最大重试次数。

5.错误处理：

监听WebSocket的error事件，处理连接过程中可能出现的错误。
在错误发生时，停止当前的心跳定时器，并尝试重新连接。

 class WebSocketClient {
      constructor(url) {
        this.url = url;
        this.ws = null;
        this.reconnectInterval = 1000; // 初始重连间隔时间
        this.maxReconnectInterval = 60000; // 最大重连间隔时间
        this.reconnectAttempts = 0;
        this.heartbeatInterval = 30000; // 心跳间隔时间
        this.heartbeatTimer = null;
      }

      connect() {
        this.ws = new WebSocket(this.url);

        this.ws.onopen = () => {
          console.log("WebSocket已连接");
          this.reconnectAttempts = 0;
          this.startHeartbeat();
        };

        this.ws.onmessage = (event) => {
          console.log("收到的信息：", event.data);
        };

        this.ws.onerror = (error) => {
          console.error("WebSocket错误:", error);
          this.stopHeartbeat();
          this.reconnect();
        };

        this.ws.onclose = () => {
          console.log("WebSocket 连接已关闭");
          this.stopHeartbeat();
          this.reconnect();
        };
      }

      startHeartbeat() {
        this.heartbeatTimer = setInterval(() => {
          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify({ type: "heartbeat" }));
          }
        }, this.heartbeatInterval);
      }

      stopHeartbeat() {
        clearInterval(this.heartbeatTimer);
      }

      reconnect() {
        if (this.reconnectAttempts < 10) {
          // 最大重试次数
          setTimeout(() => {
            this.connect();
            this.reconnectAttempts++;
            this.reconnectInterval = Math.min(
              this.reconnectInterval * 2,
              this.maxReconnectInterval
            );
          }, this.reconnectInterval);
        } else {
          console.error("重连已达到最大次数，停止重连");
        }
      }
    }

    // 使用示例
    const wsClient = new WebSocketClient("ws://");
    wsClient.connect();