近年来随着 Web 前端的疾速倒退，浏览器新个性层出不穷，越来越多的利用能够在浏览器端通过浏览器渲染引擎实现，Web 利用的即时通信形式 WebSocket 也因而失去了宽泛的利用。

WebSocket 是一种在单个 TCP 连贯上进行全双工通信的协定。WebSocket 通信协议于2011年被 IETF 定为规范 RFC 6455，并由 RFC 7936 补充标准。WebSocket API 也被 W3C 定为规范。

WebSocket 使得客户端和服务器之间的数据交换变得更加简略，容许服务端被动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯，并进行双向数据传输。 1

MQTT 协定第 6 章 具体约定了 MQTT 在 WebSocket [RFC6455] 连贯上传输须要满足的条件，协定内容不在此具体赘述。

两款客户端比拟

Paho.mqtt.js

Paho 是 Eclipse 的一个 MQTT 客户端我的项目，Paho JavaScript Client 是其中一个基于浏览器的库，它应用 WebSockets 连贯到 MQTT 服务器。相较于另一个 JavaScript 连贯库来说，其性能较少，不举荐应用。

MQTT.js

MQTT.js 是一个齐全开源的 MQTT 协定的客户端库，应用 JavaScript 编写，可用于 Node.js 和浏览器。在 Node.js 端能够通过全局装置应用命令行连贯，同时反对 MQTT/TCP、MQTT/TLS、MQTT/WebSocket 连贯；值得一提的是 MQTT.js 还对微信小程序有较好的反对。

本文将应用 MQTT.js 库进行 WebSocket 的连贯解说。

装置 MQTT.js

如果读者机器上装有 Node.js 运行环境，可间接应用 npm 命令装置 MQTT.js。

在当前目录装置

npm install mqtt --save

CDN 援用

或免装置间接应用 CDN 地址

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script><script>    // 将在全局初始化一个 mqtt 变量    console.log(mqtt)</script>

连贯至 MQTT 服务器

本文将应用 EMQ X 提供的 收费公共 MQTT 服务器，该服务基于 EMQ X 的 MQTT 物联网云平台 创立。服务器接入信息如下：

  • Broker: broker.emqx.io
  • TCP Port: 1883
  • Websocket Port: 8083
EMQ X 应用 8083 端口用于一般连贯，8084 用于 SSL 上的 WebSocket 连贯。

为了简略起见，让咱们将订阅者和发布者放在同一个文件中：

const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)const host = 'ws://broker.emqx.io:8083/mqtt'const options = {  keepalive: 60,  clientId: clientId,  protocolId: 'MQTT',  protocolVersion: 4,  clean: true,  reconnectPeriod: 1000,  connectTimeout: 30 * 1000,  will: {    topic: 'WillMsg',    payload: 'Connection Closed abnormally..!',    qos: 0,    retain: false  },}console.log('Connecting mqtt client')const client = mqtt.connect(host, options)client.on('error', (err) => {  console.log('Connection error: ', err)  client.end()})client.on('reconnect', () => {  console.log('Reconnecting...')})

连贯地址

上文示范的连贯地址能够拆分为： ws: // broker . emqx.io : 8083 /mqtt

即 协定 // 主机名 . 域名 : 端口 / 门路

初学者容易呈现以下几个谬误：

  • 连贯地址没有指明协定：WebSocket 作为一种通信协议，其应用 ws (非加密)、wss (SSL 加密) 作为协定标识。MQTT.js 客户端反对多种协定，连贯地址需指明协定类型；
  • 连贯地址没有指明端口：MQTT 并未对 WebSocket 接入端口做出规定，EMQ X 上默认应用 8083 8084 别离作为非加密连贯、加密连贯端口。而 WebSocket 协定默认端口同 HTTP 保持一致 (80/443)，不填写端口则表明应用 WebSocket 的默认端口连贯；而应用规范 MQTT 连贯时则无需指定端口，如 MQTT.js 在 Node.js 端能够应用 mqtt://localhost 连贯至规范 MQTT 1883 端口，当连贯地址是 mqtts://localhost 则连贯到 8884 端口；
  • 连贯地址无门路：MQTT-WebSoket 对立应用 /path 作为连贯门路，连贯时需指明，在 EMQ X 上应用的门路为 /mqtt；
  • 协定与端口不符：应用了 wss 连贯却连贯到 8083 端口；
  • 在 HTTPS 下应用非加密的 WebSocket 连贯： Google 等机构在推动 HTTPS 的同时也通过浏览器束缚进行了平安限定，即 HTTPS 连贯下浏览器会主动禁止应用非加密的 ws 协定发动连贯申请；
  • 证书与连贯地址不符： 篇幅较长，详见下文 EMQ 启用 SSL/TLS 加密连贯。

连贯选项

下面代码中， options 是客户端连贯选项，以下是主要参数阐明，其余参数详见https://www.npmjs.com/package/mqtt#connect。

  • keepalive：心跳工夫，默认 60秒，设置 0 为禁用；
  • clientId： 客户端 ID ，默认通过 'mqttjs_' + Math.random().toString(16).substr(2, 8) 随机生成；
  • username：连贯用户名（可选）；
  • password：连贯明码（可选）；
  • clean：true，设置为 false 以在离线时接管 QoS 1 和 2 音讯；
  • reconnectPeriod：默认 1000 毫秒，两次从新连贯之间的距离，客户端 ID 反复、认证失败等客户端会从新连贯；
  • connectTimeout：默认 30 * 1000毫秒，收到 CONNACK 之前期待的工夫，即连贯超时工夫；

  • will：遗嘱音讯，当客户端重大断开连接时，Broker 将主动发送的音讯。 个别格局为：

    • topic：要公布的主题
    • payload：要公布的音讯
    • qos：QoS
    • retain：保留标记

订阅/勾销订阅

连贯胜利之后能力订阅，且订阅的主题必须合乎 MQTT 订阅主题规定；

留神 JavaScript 的异步非阻塞个性，只有在 connect 事件后能力确保客户端已胜利连贯，或通过 client.connected 判断是否连贯胜利：

client.on('connect', () => {  console.log('Client connected:' + clientId)  // Subscribe  client.subscribe('testtopic', { qos: 0 })})
// Unsubscribeclient.unubscribe('testtopic', () => {  console.log('Unsubscribed')})

公布/接管音讯

公布音讯到某主题，公布的主题必须合乎 MQTT 公布主题规定，否则将断开连接。公布之前无需订阅该主题，但要确保客户端已胜利连贯：

// Publishclient.publish('testtopic', 'ws connection demo...!', { qos: 0, retain: false })
// Receivedclient.on('message', (topic, message, packet) => {  console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)})

微信小程序

MQTT.js 库对微信小程序非凡解决，应用 wxs 协定标识符。留神小程序开发标准中要求必须应用加密连贯，连贯地址应相似为 wxs://broker.emqx.io:8084/mqtt。

EMQ X 启用 SSL/TLS 加密连贯

EMQ 内置自签名证书，默认曾经启动了加密的 WebSocket 连贯，但大部分浏览器会报证书有效谬误如 net::ERR_CERT_COMMON_NAME_INVALID (Chrome、360 等 webkit 内核浏览器在开发者模式下， Console 选项卡 能够查看大部分连贯谬误)。导致该谬误的起因是浏览器无奈验证自签名证书的有效性，读者需从证书颁发机构购买可信赖证书，并参考该篇文章中的相应局部进行配置操作：EMQ X MQTT 服务器启用 SSL/TLS 平安连贯。

这里就总结启用 SSL/TLS 证书须要具备的条件是：

  • 将域名绑定到 MQTT 服务器公网地址：CA 机构签发的证书签名是针对域名的；
  • 申请证书：向 CA 机构申请所用域名的证书，留神抉择一个牢靠的 CA 机构且证书要辨别泛域名与主机名；
  • 应用加密连贯的时候抉择 wss 协定，并 应用域名连贯 ：绑定域名-证书之后，必须应用域名而非 IP 地址进行连贯，这样浏览器才会依据域名去校验证书以在通过校验后建设连贯。

EMQ X 配置

关上 etc/emqx.conf 配置文件，批改以下配置：

# wss 监听地址listener.wss.external = 8084# 批改密钥文件地址listener.wss.external.keyfile = etc/certs/cert.key# 批改证书文件地址listener.wss.external.certfile = etc/certs/cert.pem

实现后重启 EMQ X 即可。

能够应用你的证书与密钥文件间接替换到 etc/certs/ 下。

在 Nginx 上配置反向代理与证书

应用 Nginx 来反向代理并加密 WebSocket 能够加重 EMQ X 服务器计算压力，同时实现域名复用，同时通过 Nginx 的负载平衡能够调配多个后端服务实体。

# 倡议 WebSocket 也绑定到 443 端口listen 443, 8084;server_name example.com;ssl on;ssl_certificate /etc/cert.crt;  # 证书门路ssl_certificate_key /etc/cert.key; # 密钥门路# upstream 服务器列表upstream emq_server {    server 10.10.1.1:8883 weight=1;    server 10.10.1.2:8883 weight=1;    server 10.10.1.3:8883 weight=1;}# 一般网站利用location / {    root www;    index index.html;}# 反向代理到 EMQ X 非加密 WebSocketlocation / {    proxy_redirect off;    # upstream    proxy_pass http://emq_server;        proxy_set_header Host $host;    # 反向代理保留客户端地址    proxy_set_header X-Real_IP $remote_addr;    proxy_set_header X-Forwarded-For $remote_addr:$remote_port;    # WebSocket 额定申请头    proxy_http_version 1.1;    proxy_set_header Upgrade $http_upgrade;    proxy_set_header Connection “upgrade”;}

其它资源

我的项目残缺代码请见：https://github.com/emqx/MQTT-...

一款在线的 MQTT WebSocket 连贯测试工具：https://www.emqx.io/cn/mqtt/m...

版权申明： 本文为 EMQ 原创，转载请注明出处。

原文链接：https://www.emqx.io/cn/blog/connect-to-mqtt-broker-with-websocket

  1. https://zh.wikipedia.org/zh-h... ↩