欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何在uniapp项目中使用mqtt

程序员文章站 2022-03-10 16:15:46
由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯。下面附上uniapp中引入mqtt的全过程:一、uniapp插件市场的参考插件  二、具体引入过程1.安装mqtt和uuid在u...

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

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

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

  

二、具体引入过程

1.安装mqtt和uuid

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

如何在uniapp项目中使用mqtt

如何在uniapp项目中使用mqtt

ps.

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

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

2.页面引入mqtt并调用

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

②vue页面引用mqtt

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

3.运行结果

数据实时变化。

如何在uniapp项目中使用mqtt

以上就是uniapp中使用mqtt的方法分享。

以上就是如何在uniapp项目中使用mqtt的详细内容,更多关于uniapp使用mqtt的资料请关注其它相关文章!