MQTT.js前端使用手册

1. 简介

  MQTT.js 是一个开源的 MQTT 协议的客户端库，使用 JavaScript 编写，主要用于 Node.js 和 浏览器环境中。是目前 JavaScript 生态中使用最为广泛的 MQTT 客户端库。

  MQTT.js广泛用于在线协同、长轮询等，需要WebSocket 网络协议的 实时的，频繁的，长时间响应的业务场景。

2. MqttService

  MQTT.js主要是使用以下服务

• 连接、断开、重连
• 订阅、取消订阅
• 推送、接受消息
• 及其以上事件的响应

export interface IMqttService {
  connect(...args: any[]): Promise<void>;
  disconnect(): Promise<void>;
  reconnect(): void;
  subscribe(topic: string | string[], opts ?: IClientSubscribeOptions): Promise<ISubscriptionGrant[]>;
  unsubscribe(topic: string): void;
  publish(...args: any[]): Promise<Packet | undefined>;
  attachListeners(event: string, callback: any): void;
}

3. useMqttClient

使用的主要步骤是

1. 定义主题，其中分为：推送的具体主题名、订阅的主题名（可以使用+或#实现通配配置）

2. 消息使用方式分为：(1)通过事件监听，调用方法。(2)直接获取并使用数据

export const useMqttClient = {
  client: null,
  connect() {
    try {
      const opts: IClientOptions = {
        clean: true,
        connectTimeout: 3 * 1000,
        protocol: 'wss',
        host: '127.0.0.1',
        port: 8003,
      };
      this.client = mqtt.connect(opts);
      this.init();
    } catch (error) {
      console.log('mqtt.connect error', error);
    }
  },
  init(opts: IClientOptions) {
    // 初始订阅
    subscribeConfigs.forEach(item => {
      item.topic && this.subscribe(item.topic);
    });
    // 定义接受事件处理
    this.client.attachListeners(
      'message',
      (topic: string, payload: Buffer, packet: IPublishPacket) => {
        // 解析文件流
        const enc = new TextDecoder('utf-8');
        const res = JSON.parse(enc.decode(new Uint8Array(payload)));
        // 响应处理
        console.info('MQTT 订阅主题:', topic, '响应体:', res);
        emit(topic);
      },
    );
    // 定义连接事件处理
    this.client.attachListeners('connect', () => {});
  },
  disconnect(): Promise<void> {
    return this.client.disconnect();
  },
  subscribe(topic: string): Promise<ISubscriptionGrant[]> {
    return this.client.subscribe(topic, { qos: 2 });
  },
  unsubscribe(topic: string): void {
    return this.client.unsubscribe(topic);
  },
  publish(topic: string, info: any): Promise<Packet | undefined> {
    console.info('MQTT 上报主题:', topic, '请求体:', info);
    const message = JSON.stringify(info);
    return this.client.publish(topic, message, { qos: 2, retain: false });
  },
  attachListeners(event: string, callback: any) {
    this.client.attachListeners(event, callback);
  },
};

4. 其他参考

前端和后台进行WebSocket长连接和axios轮询的方法（vue框架）_axios websocket_jcat_李小黑的博客-CSDN博客

如何在 Vue 项目中使用 MQTT | EMQ