在uniapp项目中使用mqtt代码示例

本篇文章小编给大家分享一下在uniapp项目中使用mqtt代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

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

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

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

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

二、具体引入过程

1.安装mqtt和uuid

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

npm install [email protected]

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生成唯一标识码，防止不同页面订阅不同主题时数据出现粘连。

3.运行结果

数据实时变化。