Vue 是一款由尤雨溪及其团队开发的渐进式 Javascript 前端框架。该框架具备数据双向绑定、组件化、响应式和轻量等特点,搭配其脚手架 Vue CLI 使得开发者更加容易上手,大大减少了学习成本。同时其配备一个专用的状态管理模式 Vuex ,在这里可以集中管理所有组件的状态。

MQTT 是一种基于发布/订阅模式的 轻量级物联网消息传输协议。该协议提供了一对多的消息分发和应用程序的解耦,具备很小的传输消耗和协议数据交换、最大限度减少网络流量和三种不同消息服务质量等级,满足不同投递需求的优势。

本文主要介绍如何在 Vue 项目中使用 MQTT,实现客户端与 MQTT 服务器的连接、订阅、收发消息、取消订阅等功能。

项目初始化
新建项目
参考链接如下:

使用 Vue CLI 创建 Vue 项目
通过引用 Vue.js 创建 Vue 项目
示例:

1 vue create vue-mqtt-test

安装 MQTT 客户端库

  1. 通过命令行安装:可以使用 npm 或 yarn 命令,二者选一

    1 npm install mqtt --save
    1 yarn add mqtt
  2. 通过 CDN 引入
    1 <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  3. 下载到本地,然后使用相对路径引入
    1 <script src="/your/path/to/mqtt.min.js"></script>

MQTT 的使用
连接 MQTT 服务器
本文将使用 EMQ X 提供的 免费公共 MQTT 服务器,该服务基于 EMQ X 的 MQTT 物联网云平台 创建。服务器接入信息如下:

Broker: broker.emqx.io
TCP Port: 1883
Websocket Port: 8083
连接关键代码:

 1 <script>
2 import mqtt from 'mqtt'
3
4 export default {
5 data() {
6 return {
7 connection: {
8 host: 'broker.emqx.io',
9 port: 8083,
10 endpoint: '/mqtt',
11 clean: true, // 保留会话
12 connectTimeout: 4000, // 超时时间
13 reconnectPeriod: 4000, // 重连时间间隔
14 // 认证信息
15 clientId: 'mqttjs_3be2c321',
16 username: 'emqx_test',
17 password: 'emqx_test',
18 },
19 subscription: {
20 topic: 'topic/mqttx',
21 qos: 0,
22 },
23 publish: {
24 topic: 'topic/browser',
25 qos: 0,
26 payload: '{ "msg": "Hello, I am browser." }',
27 },
28 receiveNews: '',
29 qosList: [
30 { label: 0, value: 0 },
31 { label: 1, value: 1 },
32 { label: 2, value: 2 },
33 ],
34 client: {
35 connected: false,
36 },
37 subscribeSuccess: false,
38 }
39 },
40
41 methods: {
42 // 创建连接
43 createConnection() {
44 // 连接字符串, 通过协议指定使用的连接方式
45 // ws 未加密 WebSocket 连接
46 // wss 加密 WebSocket 连接
47 // mqtt 未加密 TCP 连接
48 // mqtts 加密 TCP 连接
49 // wxs 微信小程序连接
50 // alis 支付宝小程序连接
51 const { host, port, endpoint, ...options } = this.connection
52 const connectUrl = `ws://${host}:${port}${endpoint}`
53 try {
54 this.client = mqtt.connect(connectUrl, options)
55 } catch (error) {
56 console.log('mqtt.connect error', error)
57 }
58 this.client.on('connect', () => {
59 console.log('Connection succeeded!')
60 })
61 this.client.on('error', error => {
62 console.log('Connection failed', error)ß
63 })
64 this.client.on('message', (topic, message) => {
65 this.receiveNews = this.receiveNews.concat(message)
66 console.log(`Received message ${message} from topic ${topic}`)
67 })
68 },
69 }
70 }
71 </script>

订阅主题

 1 doSubscribe() {
2 const { topic, qos } = this.subscription
3 this.client.subscribe(topic, qos, (error, res) => {
4 if (error) {
5 console.log('Subscribe to topics error', error)
6 return
7 }
8 this.subscribeSuccess = true
9 console.log('Subscribe to topics res', res)
10 })
11 },

取消订阅

1 doUnSubscribe() {
2 const { topic } = this.subscription
3 this.client.unsubscribe(topic, error => {
4 if (error) {
5 console.log('Unsubscribe error', error)
6 }
7 })
8 }

消息发布

1 doPublish() {
2 const { topic, qos, payload } = this.publication
3 this.client.publish(topic, payload, qos, error => {
4 if (error) {
5 console.log('Publish error', error)
6 }
7 })
8 }

断开连接

 1 destroyConnection() {
2 if (this.client.connected) {
3 try {
4 this.client.end()
5 this.client = {
6 connected: false,
7 }
8 console.log('Successfully disconnected!')
9 } catch (error) {
10 console.log('Disconnect failed', error.toString())
11 }
12 }
13 }

总结
综上所述,我们实现了在 Vue 项目中创建 MQTT 连接,模拟了客户端与 MQTT 服务器进行订阅、收发消息、取消订阅以及断开连接的场景。

Vue 作为三大主流的前端框架之一,既能够在浏览器端使用,也能够在移动端使用,结合 MQTT 协议及 MQTT 物联网云服务 可以开发出很多有趣的应用,比如客服聊天系统或实时监控物联网设备信息的管理系统。
————————————————
版权声明:本文为CSDN博主「EMQX」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/emqx_broker/article/details/108769925

在 Vue 项目中使用 MQTT的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  5. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  6. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  10. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

随机推荐

  1. Solon v2.1.4 发布。支持 java、kotlin、groovy!

    本次发布,重点测试和验证了在 java.kotlin.groovy 三种 jvm 语言里,开箱即用的特性.并发布 Solon Initializr: https://solon.noear.org/s ...

  2. Cesium 椭球大地测量EllipsoidGeodesic(十二)

    首先发现一个问题,这段代码会报错,原因是"DeveloperError: Expected value to be greater than or equal to0.0125, actua ...

  3. RocketMQ - 消费者概述

    消费流程 消费者组: 一个逻辑概念,在使用消费者时需要指定一个组名.一个消费者组可以订阅多个Topic. 消费者实例: 一个消费者组程序部署了多个进程,每个进程都可以称为一个消费者实例. 订阅关系: ...

  4. a^b(位运算&快速幂)

    题目链接 题目: 题解:很简单.经典的的一道快速幂的题 注意一下用LL型就ok. 代码: 1 #include <map> 2 #include <set> 3 #includ ...

  5. Vs出现调试问题

    当前不会命中断点还未为文档加载任何符号--问题探究 项目运行后断点位置出现以下问题: 原因: 对项目点击进行了发布,导致这里自动切换成了release 切换成debug就正常了

  6. centos7 安装MariaDB数据库

    1.添加 MariaDB yum源 #添加MariaDB.repo配置文件 vim /etc/yum.repos.d/MariaDB.repo #添加内容 [mariadb] name = Maria ...

  7. Day 13 13.2 requests之请求参数与请求体

    请求参数与请求体参数 一.什么是params参数(请求参数) get 方法是可以向服务器发送信息的,除了可以请求需要的页面之外,也可以发送我们指定的内容,这就是通过 params 参数实现的 requ ...

  8. element-ui的collapse中嵌套table表格 的 高度跳跃 问题

    <script src="//unpkg.com/vue@2.6.10/dist/vue.js"></script><script src=" ...

  9. Altium Designer Winter 09 — 01 — 快速创建项目

    新建项目 新建原理图 导入所需的库 添加元器件和接插件 连接导线 自动标注.修改元件属性 编译前--修改项目属性 编译,查看消息 生成网表.BOM.简易BOM,打印文件

  10. Android MVP框架 详细代码

    android mvp的好处,网上一搜一大堆,相对于一开始普通的在activity中处理所有的不管是网络请求还是页面渲染,最大的好处是简洁了,废话不多说,看代码 这里网络请求使用了两种,一种是自己封装 ...