uniapp使用mqtt 小记

221 阅读1分钟

mqtt文档
下载 mqtt

npm i mqtt

建议使用 4.1.0

npm i mqtt@4.1.0

在想要使用的文件中引入,mqtt的引入方法有很多种,并且好像不同版本有不同的引入方法,我试了好几种,最后4.1.0使用下面这种方式

import * as mqtt from 'mqtt/dist/mqtt.min';

下面是一个示例
可以使用官方提供的测试接口试一试 "wxs://broker.emqx.io:8084/mqtt" 如果成功 说明前端应该没什么问题了 下面各个参数说明请查看官方文档了解 ,尤其注意clientId必须是唯一

initmqtt(id) {

		const host = "wxs://broker.emqx.io:8084/mqtt"
		const options = {
			keepalive: 60,
			clientId: id,
                        protocolId: 'MQTT',
                        protocolVersion: 4,
                        username: "user",
                        password: "user",
                        clean: true,
                        reconnectPeriod: 1000,
                        connectTimeout: 30 * 1000,
                        }
                        const client = mqtt.connect(host, options)
                        client.on('connect', () => {
                                console.log('成功', id)
                                // Subscribe
                                client.subscribe(id, {
                                        qos: 0,
                                        retain: false
                                })

                        })
                        client.on('message', (topic, message, packet) => {
                                console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
                    })
                    client.on('error', (error) => {
                            console.log('连接失败:', error)
                    })
                    client.on('reconnect', (error) => {
                            console.log('正在重连:', error)
                    })
            }

如果出现域名校验 在开发环境可以先 勾选不校验

image.png

配置合法域名 登录小程序后台后,找到 开发设置 -> 服务器域名 进行服务器配置,在 socket 合法域名处输入格式如 wss://xxx.emqx.io,此处不带端口号。