uniapp实现MQTT消息队列传送消息_uniapp mqtt

uniapp安装mqtt和uuid

        在uniapp项目根目录下分别运行安装mqtt和uuid的命令行，因为后面会用uuid生成mqtt的clientId，所以这边就一起安装了。

 
 
npm install mqtt@3.0.0
 
npm install uuid

MQTT公共服务器

        实现MQTT消息队列互传需要服务端和客户端，如果仅是想学习消息是如何传送的，不涉及复杂业务的话，服务端可以使用 MQTT Broker的公共服务器：The Top 1 Free Public MQTT Broker | EMQ (emqx.com)

        使用方法在后面客户端连接时会提到。

MQTT本地搭建服务器

        但是想自己本地搭建MQTT服务器的话，不建议在windows下搭建，超级多错误还没解决办法（大佬请指教）

1. emqx已经启动，erlang闪退.
2. 启动失败Node ‘emqx@127.0.0.1’ not responding to pings.
3. escript: exception error: no match of right hand side value false.

        搭建本地服务器可以自己搜索文章和教程来看。

MQTT客户端下载

        MQTTX 下载

       下载教程可看(81条消息) MQTT 图形化客户端-MQTTX安装使用教程_mqtt x_程序之大道至简的博客-CSDN博客

用户名和密码可以自己设置，也可以不设置

         此时只是单个客户端（订阅者）发送和接收消息，还不算消息互传。所以接下来是uniapp订阅相同的主题。

uniapp代码样例

//在根目录下创建utils文件夹，再创建mqtt.js文件
//mqtt ip是公共服务器的地址
export const MQTT_IP = 'broker.emqx.io:8083/mqtt'//mqtt地址端口
const MQTT_USERNAME = 'public'//mqtt用户名
const MQTT_PASSWORD = 'public'//密码
 
export const MQTT_OPTIONS = {
    connectTimeout: 5000,
    clientId: '',
    username: MQTT_USERNAME,
    password: MQTT_PASSWORD,
    clean: false
}

//index.vue的代码
<template>
	<view class="content">
		{{topic}}
	</view>
</template>
 
<script>
  import { v4 } from 'uuid';
    import {
        MQTT_IP,
        MQTT_OPTIONS
    } from '@/utils/mqtt.js';
    var mqtt = require('mqtt/dist/mqtt.js')
    var client
    export default {
        data() {
            return {
                topic: 'test-testmqtt' //要订阅的主题，我的是test-testmqtt(如果名字取的简单有可能会收到别人发送的消息)
            }
        },
        mounted() {
			this.connect() //连接
			console.log(11)
        },
        methods: {
            connect() {
                MQTT_OPTIONS.clientId = v4()
                var that = this
                // #ifdef H5
                client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                // #ifdef MP-WEIXIN||APP-PLUS
                client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                client.on('connect', function() {
                    console.log('连接成功')
                    client.subscribe(that.topic, function(err) {
                        if (!err) {
                            console.log('订阅成功')
                        }
                    })
                }).on('reconnect', function(error) {
                    console.log('正在重连...', that.topic)
                }).on('error', function(error) {
                    console.log('连接失败...', error)
                }).on('end', function() {
                    console.log('连接断开')
                }).on('message', function(topic, message) {
					// console.log(topic, message)
                    console.log('接收推送信息：', message.toString())
                })
            }
        }
    }
</script>
 
<style>
 
</style>

         这个时候uniapp运行起来就能在终端看见

        然后在mqttx发送消息，终端就会收到

         此时两个订阅者之间能消息互通就实现了。

 本文参考了

(81条消息) uniapp连接MQTT_uniapp mqtt_啟大大的博客-CSDN博客