Uniapp开发微信小程序封装stomp到websocket

STOMP协议客户端封装

前言

之前在开发微信小程序的时候，我碰到了需要流式接收后台服务器响应的需求。由于微信小程序不支持使用fetch,最终选择了使用WebSocket来实现这个接收服务器的分批次推送消息。由于后端使用的stomp协议来进行消息传递，在uniapp的市场和网络并没有找到合适的库，就自己封装了一个工具。

什么是STOMP

STOMP是一种简单、基于文本的消息传递协议，通常用于与消息代理（Message Broker）进行通信。它的主要特点包括：

1. 基于文本：命令和消息都是纯文本格式，易于调试和阅读。
2. 简单的协议：包含少量的命令，易于实现和使用。
3. 与消息代理交互：STOMP通常用于在客户端和消息代理之间进行通信，支持发布/订阅模式。

STOMP和WebSocket的关系

STOMP和WebSocket可以结合使用，形成一种强大的实时通信方式：

1. STOMP作为消息协议：STOMP定义了一套用于消息传递的协议，包括连接、订阅、发送消息等操作。
2. WebSocket作为传输协议：WebSocket提供了一个持久的、低延迟的传输通道，用于传输STOMP消息。

功能概述

1. 连接到STOMP服务器：

• 使用connect方法可以连接到STOMP服务器。这个方法接受连接头信息、连接成功回调和连接错误回调。
• 连接成功后，可以订阅消息、发送消息等。

2. 断开连接：

• 使用disconnect方法可以断开与STOMP服务器的连接。该方法会发送一个DISCONNECT命令，并关闭WebSocket连接。

3. 发送消息：

• 使用send方法可以向指定目的地发送消息。该方法接受消息目的地、头信息和消息内容。

4. 订阅目的地：

• 使用subscribe方法可以订阅指定目的地的消息。该方法接受目的地、消息回调和订阅头信息。订阅成功后，服务器发送到该目的地的消息将通过回调函数处理。

5. 取消订阅：

• 使用unsubscribe方法可以取消订阅。该方法接受订阅ID，并取消对应的订阅。

6. 自动重连机制：

• 如果连接断开或发生错误，工具会自动尝试重连。重连机制包括最大重连次数和重连间隔时间设置。

7. 心跳的发送和接收

封装STOMP协议类并添加重连机制

// utils/stomp.js

class StompClient {
   
  constructor(url) {
   
    this.url = url; // WebSocket服务器地址
    this.socket = null; // WebSocket连接
    this.connected = false; // 连接状态
    this.heartbeat = {
   
      outgoing: 10000, // 每10秒发送一次心跳
      incoming: 10000  // 每10秒接收一次心跳
    };
    this.subscriptions = {
   }; // 订阅列表
    this.reconnectAttempts = 0; // 重连尝试次数
    this.maxReconnectAttempts = 5; // 最大重连次数
    this.reconnectDelay = 5000; // 重连间隔时间（毫秒）
  }

  // 连接到STOMP服务器
  connect(headers = {
    }, connectCallback, errorCallback) {
   
    this.socket = uni.connectSocket({
   
      url: this.url
    });

    this.socket.onOpen(() => {
   
      this.connected = true;
      this.reconnectAttempts = 0; // 重置重连尝试次数
      this._sendCommand('CONNECT', headers);