iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在uniapp项目中使用mqtt
  • 858
分享到

如何在uniapp项目中使用mqtt

2024-04-02 19:04:59 858人浏览 安东尼
摘要

目录一、uniapp插件市场的参考插件二、具体引入过程1.安装MQtt和uuid2.页面引入mQtt并调用3.运行结果由于要取一些实时数据并在手机app上展示,就想到用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 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>

3.运行结果

数据实时变化。

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

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

--结束END--

本文标题: 如何在uniapp项目中使用mqtt

本文链接: https://www.lsjlt.com/news/126180.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在uniapp项目中使用mqtt
    目录一、uniapp插件市场的参考插件二、具体引入过程1.安装mqtt和uuid2.页面引入mqtt并调用3.运行结果由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即...
    99+
    2022-11-12
  • 怎么在uniapp项目中使用mqtt
    这篇文章将为大家详细讲解有关怎么在uniapp项目中使用mqtt,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、uniapp插件市场的参考插件  https://ext.dcloud.net.cn/pl...
    99+
    2023-06-15
  • uniapp项目如何运行在h5端
    随着移动互联网的快速发展,越来越多的企业开始关注和使用跨端开发技术。Uniapp作为一款集成了Vue.js和小程序开发能力的跨平台开发框架,已经在许多企业中得到了广泛的应用。Uniapp支持运行在不同的平台上,如微信小程序、支付宝小程序、百...
    99+
    2023-05-22
  • 聊聊uniapp项目中怎么使用Axios
    Uniapp 是基于 Vue.js 的跨平台开发框架,可以同时构建 iOS、Android 和 Web 应用,而 Axios 是一款流行的基于 Promise 的 HTTP 库。虽然 Uniapp 可以使用 Vue.js 自带的 $http...
    99+
    2023-05-14
  • 如何在 Java 中使用 MQTT
    MQTT 是一种基于发布/订阅模式的 轻量级物联网消息传输协议 ,可在严重受限的硬件设备和低带宽、高延迟的网络上实现稳定传输。它凭借简单易实现、支持 QoS、报文小等特点,占据了物联网协议的半壁江山。...
    99+
    2023-09-04
    java 物联网 iot MQTT 客户端
  • 如何在Spring Boot中使用MQTT
    目录为什么选择MQTT MQTT, 启动! 使用方式 Client模式 创建工厂类 创建工具类 Spring Integration 总结 为什么选择MQTT MQTT的定义相信很...
    99+
    2022-11-12
  • Arrays.asList()如何在Java项目中使用
    本篇文章给大家分享的是有关Arrays.asList()如何在Java项目中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Arrays.asList() 是将数组作为列表。...
    99+
    2023-05-31
    java arrays.aslist() ava
  • jshell如何在java9项目中使用
    jshell如何在java9项目中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。下载袭来是个pkg文件,双击安装,默认装到了/Library/Java这里,java9的...
    99+
    2023-05-31
    java9 ava jshell
  • zookeeper如何在java项目中使用
    这篇文章将为大家详细讲解有关zookeeper如何在java项目中使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、zookeeper的基本原理数据模型,如下:ZooKeeper数据模型...
    99+
    2023-05-31
    zookeeper java ava
  • 如何在java项目中使用redis
    本篇文章给大家分享的是有关如何在java项目中使用redis,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、首先下载jar包放到你的工程中2、练习package c...
    99+
    2023-05-31
    redis java ava
  • memcached如何在java项目中使用
    memcached如何在java项目中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Memcached是一个高性能的分布式内存对象缓存系统,本文介绍了jav...
    99+
    2023-05-31
    java memcached ava
  • 如何在Android项目中使用ImageView
    这期内容当中小编将会给大家带来有关如何在Android项目中使用ImageView,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。首先创建一个叫MatrixImageView的类去继承ImageView,然...
    99+
    2023-05-31
    android age imageview
  • Polly如何在c#项目中使用
    今天就跟大家聊聊有关Polly如何在c#项目中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Polly是一个C#实现的弹性瞬时错误处理库它可以帮助我们做一些容错模式处理,比如:超...
    99+
    2023-06-14
  • Mock.js在Vue项目中如何使用
    本篇内容主要讲解“Mock.js在Vue项目中如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Mock.js在Vue项目中如何使用”吧!Mock.js 初体验安装:npm ins...
    99+
    2023-07-02
  • 如何在React项目中使用AntDesign
    目录0.前言1.AntDesign是什么?2.AntDesign如何使用?3.如何具体使用AntDdesign的组件3-1.如何使用 antd 的Table组件3-2.如何使用 an...
    99+
    2022-11-13
  • BufferedReader如何在Java项目中使用
    这期内容当中小编将会给大家带来有关 BufferedReader如何在Java项目中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。BufferedReader 介绍BufferedReader 是缓冲...
    99+
    2023-05-31
    java bufferedreader buf
  • 如何在Java项目中使用Lombok
    本文章向大家介绍如何在Java项目中使用Lombok的基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了面向对象理论,允许...
    99+
    2023-06-06
  • IntentService如何在Android项目中使用
    IntentService如何在Android项目中使用 ?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Android IntentService详解一、Int...
    99+
    2023-05-31
    android intentservice roi
  • EditText如何在Android项目中使用
    EditText如何在Android项目中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1.获取光标选中的文字EditText view = (EditTe...
    99+
    2023-05-31
    android edittext roi
  • AutoCompleteTextView如何在Android项目中使用
    这期内容当中小编将会给大家带来有关AutoCompleteTextView如何在Android项目中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。自动编辑文本框(AutoCompleteTextVie...
    99+
    2023-05-31
    android roi autocompletetextview
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作