共计 2967 个字符，预计需要花费 8 分钟才能阅读完成。
微信小程序是腾讯于 2017 年 1 月 9 日推出的一种不须要下载安装即可在微信平台上应用的应用程序，用户扫一扫或者搜一下即可关上利用。也体现了“用完即走”的理念，用户不必关怀是否装置太多利用的问题。利用将无处不在，随时可用，但又无需装置卸载。对于开发者而言，小程序开发门槛绝对较低，难度不迭 APP，可能满足简略的根底利用，对于用户来说，可能节约使用工夫老本和手机内存空间，对于开发者来说也能节约开发和推广老本。
本文次要介绍如何在 微信小程序 我的项目中应用 MQTT，实现小程序客户端与 MQTT 云服务的连贯、订阅、收发音讯、勾销订阅等性能。
MQTT 是一种基于公布 / 订阅模式的轻量级物联网音讯传输协定，能够用极少的代码和带宽为联网设施提供实时牢靠的音讯服务，它广泛应用于物联网、挪动互联网、智能硬件、车联网、电力能源等行业。
我的项目初始化
后期筹备
注册微信小程序帐号，并下载微信开发者工具。因为微信小程序平安要求比拟高，在与后盾服务器之间的通信必须应用 https 或 wss 协定，因而要在微信小程序后盾设置域名服务器。
微信小程序仅反对通过 WebSocket 进行即时通信，EMQ X 的 MQTT Over WebSocket 可能齐全兼容应用在微信小程序上。但因为微信小程序的标准限度，EMQ X 应用微信小程序接入时须要留神以下几点：
- 应用曾经通过域名备案的 域名 接入
- 域名须要微信公众平台登录后在主页面的服务器域名下增加配置服务器域名地址
- 仅反对 WebSocket/TLS 协定，须要为域名调配受信赖 CA 颁发的证书
- 因为微信小程序 BUG，安卓真机必须应用 TLS/443 端口，否则会连贯失败（即连贯地址不能带端口）
增加服务器域名，这里咱们将 broker.emqx.io 为例增加到服务器域名中，咱们进入到页面中抉择开始配置按钮，在 socket 非法域名列下输出 wss://broker.emqx.io，留神：必须以 wss 协定结尾，如下图：
增加实现后，在微信小程序开发时才容许咱们于该域名地址下的服务器进行通信与交互。
新建我的项目
筹备实现后期网络通讯相干工作后，咱们关上曾经下载好了的微信开发者工具，关上后在页面点击新建一个小程序我的项目，如下图所示：
点击确认后，微信开发者工具就主动初始化好了我的项目，咱们就能够开始开发了。
装置 MQTT 客户端库
因为小程序是通过 JavaScript 开发的，因而能够应用 MQTT.js 作为 MQTT 客户端库。
从小程序根底库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序反对应用 npm 装置第三方包。如感兴趣的读者可自行查看小程序 npm 反对的官网文档来操作应用，本文为简化操作过程，将不应用 npm 的形式装置。咱们将在 utils 文件夹下新建一个 mqtt.js 文件，咱们间接获取在 MQTT.js CDN 上的打包构建后的源码复制 mqtt.js 文件中。
MQTT.js CDN 地址：https://unpkg.com/mqtt@4.0.1/dist/mqtt.min.js 可通过浏览器关上查看。
留神：截止目前最新的 mqtt.js v4.2.8 版本，在小程序中应用会报 net.createConnection 未定义的谬误，须要回退和应用 4.0.1 版本。
实现后咱们，在 index.js 主页面中间接 import 即可：
import mqtt from '../../utils/mqtt'MQTT 应用
本文将应用 EMQ X Cloud 提供的 收费公共 MQTT 服务器 作为本次测试的 MQTT 服务器地址，服务器接入信息如下：
- Broker: broker.emqx.io
- TCP Port: 1883
- SSL/TLS Port: 8883
更多详情请拜访 EMQ X Cloud 官网，或查看 EMQ X Cloud 文档。
连贯代码
微信小程序应用 WebSocket 的形式连贯到 MQTT 服务器，但连贯的 URL 地址中请应用 wxs 协定名称，连贯及初始化数据的要害代码：
Page({
data: {
client: null,
host: 'broker.emqx.io:8084',
topic: 'testtopic/miniprogram',
msg: 'Hello! I am from WeChat miniprogram',
mqttOptions: {
protocolVersion: 4, //MQTT 连贯协定版本
clientId: 'emqx_cloud_miniprogram',
clean: true,
password: '',
username: '',
reconnectPeriod: 1000, // 1000 毫秒，两次从新连贯之间的距离
connectTimeout: 30 * 1000, // 1000 毫秒，两次从新连贯之间的距离
resubscribe: true // 如果连贯断开并从新连贯，则会再次主动订阅已订阅的主题（默认 true）},
},
connect() {this.data.client = mqtt.connect(`wxs://${this.data.host}/mqtt`, this.data.mqttOptions)
this.data.client.on('connect', () => {
wx.showToast({title: '连贯胜利'})
})
},
})
订阅主题
subscribe() {this.data.client.subscribe(this.data.topic)
wx.showToast({title: '主题订阅胜利'})
},勾销订阅
unsubscribe() {this.data.client.unsubscribe(this.data.topic)
wx.showToast({title: '勾销订阅胜利'})
},音讯公布
publish() {this.data.client.publish(this.data.topic, this.data.msg)
},断开连接
disconnect() {this.data.client.end()
wx.showToast({title: '断开连接胜利'})
},测试
咱们在小程序中简略编写了如下利用界面，该利用具备：创立连贯、订阅主题、收发音讯、勾销订阅、断开连接等性能。
残缺的我的项目示例代码：https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-wechat-miniprogram
应用 MQTT 5.0 客户端工具 – MQTT X 作为另一个客户端进行音讯收发测试。
能够看到 MQTT X 能够失常接管来到来自小程序发送过去的音讯，同样，应用 MQTT X 向该主题发送一条音讯时，也能够看到小程序能失常接管到该音讯。
总结
综上所述，咱们实现了在小程序我的项目中创立 MQTT 连贯，模仿了小程序客户端与 MQTT 服务器进行订阅、收发音讯、勾销订阅以及断开连接的场景。
版权申明：本文为 EMQ 原创，转载请注明出处。
原文链接：https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram
技术支持：如对本文或 EMQ 相干产品有疑难，可拜访 EMQ 问答社区 https://askemq.com 发问，咱们将会及时回复反对。
更多技术干货，欢送关注咱们公众号【EMQ 中文社区】。
