首页> Uniapp教程

如何在uniapp项目中使用mqtt

withpy 2021-05-17

简介本文给大家分享uniapp中引入mqtt的全过程,在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,文中给大家介绍mqtt和uuid安装过程,感兴趣的朋友跟随小编一起学习下吧

由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯。

下面附上uniapp中引入mqtt的全过程:

一、uniapp插件市场的参考插件

  https://ext.dcloud.net.cn/plugin?id=854

二、具体引入过程

1.安装mqtt和uuid

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

npm install mqtt@3.0.0
npm install uuid

Ps.

①我这里和uniapp提供的插件安装的mqtt版本一样,我也尝试装了最新的版本,会报错,emmmmm...........

②如果没有pakage.json,安装是会提示报错,但是不影响安装使用。如果想方便一点,下次拉代码直接安装的话,可以自己在项目根目录下加一个pakage.json文件,添加如下内容:

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "mqtt": "^3.0.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {},
  "scripts": {}
}

2.页面引入mqtt并调用

①mqtt连接配置,放在/utils/mqtt.js里面,全局可用。

export const MQTT_IP = '192.168.9.128: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
}

②vue页面引用mqtt

mqtt里面的clientId用uuid生成唯一标识码,防止不同页面订阅不同主题时数据出现粘连。

<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: '' //要订阅的主题
            }
        },
        mounted() {this.connect() //连接
        },
        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('接收推送信息:', message.toString())
                })
            }
        }
    }
</script>

相关文章

  • 在Java中使用Jwt的示例代码

    这篇文章主要介绍了在Java中使用Jwt的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • java 流与 byte[] 的互转操作

    这篇文章主要介绍了java 流与 byte[] 的互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • C#操作Word打印的示例

    这篇文章主要介绍了C#操作Word打印的示例,帮助大家利用c#打印文件,提高办公效率,感兴趣的朋友可以了解下

  • 在IDEA中使用Linux命令的操作方法

    这篇文章主要介绍了在IDEA中使用Linux命令的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  • python实现QQ空间自动点赞功能

    这篇文章主要为大家详细介绍了python实现QQ空间自动点赞功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  • MFC实现学生选课系统

    这篇文章主要为大家详细介绍了MFC实现学生选课系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下