vue结合mqtt
时间:2020-05-23
本文章向大家介绍vue结合mqtt,主要包括vue结合mqtt使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、初始化一个vue项目
vue init webpack vuemqtt
npm install
npm run dev
二、安装mqtt
npm install mqtt --save
三、编写vue组件
1 <template> 2 <div id="app"> 3 <p>mqtt收到的数据:</p> 4 <p>{{this.msg}}</p> 5 </div> 6 </template> 7 8 <script> 9 10 import mqtt from 'mqtt' 11 12 var client 13 const options = { 14 connectTimeout: 40000, 15 clientId: '', 16 username: 'admin', 17 password: 'admin', 18 clean: true 19 } 20 client = mqtt.connect('ws://120.79.x.x:8083',options) //此处不应该为1883,应该在mosquitto消息服务器中配置8003端口为websocket 21 export default { 22 data() { 23 return { 24 msg: '--' 25 } 26 }, 27 28 created() { 29 this.mqttMsg() 30 }, 31 32 methods: { 33 mqttMsg() { 34 client.on('connect', (e) => { 35 console.log("连接成功!!!") 36 client.subscribe('data/receive', { qos: 0 }, (error) => { 37 if (!error) { 38 console.log('订阅成功') 39 } else { 40 console.log('订阅失败') 41 } 42 }) 43 44 }) 45 // 接收消息处理 46 client.on('message', (topic, message) => { 47 console.log('收到来自', topic, '的消息', message.toString()) 48 this.msg = message.toString() 49 }) 50 } 51 } 52 53 54 } 55 </script> 56 <style scoped> 57 </style>
注意:在mosquitto消息服务器中配置websocket并监听8083 查看详情
原文地址:https://www.cnblogs.com/nuister/p/12944041.html
- PhalGo-Viper获取配置
- Dubbo 源码解析 —— 集群容错架构设计
- PhalGo-ADM思想
- 数据库中间件 Sharding-JDBC 源码分析 —— JDBC实现与读写分离
- Pytorch 0.3.0 发布:新增张量函数,支持模型移植
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 执行
- PhalGo-初识PhalGO
- 【学术】如何在神经网络中选择正确的激活函数
- PhalGo-Echo路由
- PhalGo-介绍
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— 分布式主键
- [喵咪Golang(2)]安装和Helloworld
- LSTM的简单介绍,附情感分析应用
- 使用实体嵌入的结构化数据进行深度学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring JDBC 框架,我的学习笔记
- 磁盘扩容
- 如何在MySQL中创建存储过程
- 磁盘扩容
- PyCharm安装疯狂打字机插件
- Java Lombok 常用注解
- Python 基础 安装 简单的输入输出 运行一个py程序
- Python 基础 数据类型 变量常量
- Java 快速排序 关于起始方向的选择问题 为什么一定要从右边开始
- Java 使用异或进行数组元素交换时的坑 返回0的原因
- Spring BindingResult获取不到结果可能的原因之一 参数顺序 没有紧挨着校验参数
- 残差收缩网络:一种深度学习故障诊断算法
- Solr学习笔记 - 关于近实时搜索
- Solr学习笔记 - 关于timeAllowed
- Solr学习笔记 - 关于cache