前端mqtt使用调研

简介

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，是 TCP/IP 的再封装，由 IBM 在 1999 年发布。MQTT 最大优点在于，地开销，少流量实现网络通信

协议原理

mqtt 协议中有两种角色，客户端和服务端。服务端一般由消息 broker 实现，MQTT 与传统 HTTP 协议有所不同，所有接入的设备都为客户端。

客户端有两种身份发布者（Publish）、订阅者（Subscribe），也可以同时具备两者身份。

顾名思义，发布者可以发布消息，订阅者可以接受消息。

消息内容

MQTT 传输的消息分为：主题（Topic）和负载（payload）两部分：

• （1）Topic，主题，订阅者订阅指定主题后，会收到其他发布者发送到该主题的数据；
• （2）payload，具体的载荷

关键字

一、订阅（Subscription）

订阅包含主题筛选器（Topic Filter）和最大服务质量（QoS）。订阅会与一个会话（Session）关联。一个会话可以包含多个订阅。每一个会话中的每个订阅都有一个不同的主题筛选器。

二、会话（Session）

每个客户端与服务器建立连接后就是一个会话，客户端和服务器之间有状态交互。会话存在于一个网络之间，也可能在客户端和服务器之间跨越多个连续的网络连接。

三、主题名（Topic Name）

连接到一个应用程序消息的标签，该标签与服务器的订阅相匹配。服务器会将消息发送给订阅所匹配标签的每个客户端。

四、主题筛选器（Topic Filter）

一个对主题名通配符筛选器，在订阅表达式中使用，表示订阅所匹配到的多个主题。

五、负载（Payload）

具体数据

前端实现

前端一般使用 websocket 协议实现长链接通信，为了简化 websocket 协议编程，可以直接使用建立在 websocket 上的 mqtt 协议，能够直接得到登陆鉴权、消息分发的功能，免去手动编程解析。

前端 websocket 的 mqtt 协议依赖 mqttws31.js 库实现。

react 项目中，在public/index.html中引入

<script type="text/javascript" src="./static/mqttws31.js"></script>

组件中调用：

this.mqttClient = new Paho.MQTT.Client(hostname, port, clientId);
this.mqttoptions = {
   
   
			invocationContext: {
   
   
				host: hostname,
				port: port,
				clientId: clientId
			},
			timeout: 5,
			cleanSession: false,
			useSSL: false,
			userName: 'chrome',
			password: 'chrome',
			onSuccess: this.mqttConnect