mqtt.mini.js 使用
html文件里直接调用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mqtt.min.js 测试</title>
<style>
.divblock {
display: inline-block;
padding: 20px;
border: 2px solid #00ff00;
border-radius: 6px;
margin: 20px 0px;
user-select: none;
} .divblock:active {
background-color: #455072;
border: 1px solid #0044ff;
}
</style>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> <!-- 引处MQTT.MINI.JS库文件 -->
</head> <body>
<div>4路开关模块</div>
<div class="divblock" onclick="Onmqtttest()">mqtt 发送</div>
</body> <script>
// Create a client instance
var options = {
//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
clientId: 'mqttjs_' + (Math.random() * 1000000).toString()
}
//console.log(options.clientId); //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
var client = mqtt.connect("ws://gzlema.cn:8083/mqtt", options) // you add a ws:// url here //建立连接
client.on('connect', function () {
console.log("connect success!")
//订阅主题 presence
client.subscribe('presence', function (err) {
if (!err) {
console.log("subscribe success!")
} else {
//打印错误
console.log(err)
}
})
}) //如果连接错误，打印错误
client.on('error', function (err) {
console.log(err)
client.end()
}) //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
client.on('message', function (topic, message) {
// message is Buffer,此处就是打印消息的具体内容
console.log('-> ' + message.toString())
}) // 用户程序点击事件
function Onmqtttest() {
message = "message from browser with websocket"; // 消息内容
//发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
client.publish('presence', 'Hello mqtt ' + message)
}
</script> </html>
mqtt.mini.js 使用的更多相关文章
- MQTT.js browser node 均支持
npm - mqtt 官网手册 https://www.npmjs.com/package/mqtt#weapp 简书用户 使用笔记 https://www.jianshu.com/p/4fd95ca ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...
- 移动端js调取手机相册和拍照功能
前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...
- bootStrap table 和 JS 开发过程中遇到问题汇总
1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...
- 使用 WebSocket 客户端连接 MQTT 服务器
简介 近年来随着 Web 前端的快速发展,浏览器新特性层出不穷,越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现,Web 应用的即时通信方式 WebSocket 得到了广泛的应用. WebSock ...
- 图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- js压缩图片并上传，不失真，保证图片清晰度
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- html5+js压缩图片上传
最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
随机推荐
- python笔记17
1.今日内容 迭代器(3*) 生成器(4*) 装饰器(5*) 项目结构 logging模块 2.内容回顾 & 作业 2.1 内容回顾 2.1.1 函数(内置/自定义) 基本函数结构 def f ...
- jmeter的使用---用户变量
用户变量有以下方式: 一.外部引入:csv引入参数 二.sample传递参数:http请求的body参数 三.定义用户变量:全局变量 (1)用户定义的变量 name,和value 一对一 (2)用 ...
- 左偏树 （p3261) 对我来说是一道进阶题
题意:有n座城池,m个人: 每座城池有一个耐久度: 每座城池有一个父亲城池(肯定会形成一棵树),还有flag base (这个看题意) 每个人有一个战力值和一个开始进攻的城池序号: 问:1.每个城池能 ...
- linux搭建常用命令
nohup java -jar floodlight.jar >log.txt 运行jar,日志打印到log.txt中netstat -lnp|grep 88 查看 ...
- Opencv模块
参考博客:https://blog.csdn.net/u012679707/article/details/79505279
- VIM - ex 命令行的窗口切换
1. 概述 操作 vim 同时编辑多个文件 约定 ctrl 使用按键 ctrl + w 时, 写作 ^W 思路 我记得这个由两个机制 ex 命令与缓冲区 分屏 2. 场景 文件 file1 file2 ...
- jumpserver sudo 权限控制模板
sudo 权限控制,常用 ALL,!/bin/bash,!/bin/tcsh,!/bin/su,!/usr/bin/passwd,!/usr/bin/passwd root,!/bin/vim /et ...
- C语言当中int,float,double,char这四个有什么区别？
区别在以下方面: 一.定义方面: 1.int为整数型,用于定义整数类型的数据 . 2.float为单精度浮点型,能准确到小数点后六位 . 3.double为双精度浮点型,能准确到小数点都十二位 . 4 ...
- Kali国内源更新sources.list
Kali国内源更新sources.list 更新源,个人推荐中科大leafpad /etc/apt/sources.list #中科大 deb http://mirrors.ustc.ed ...
- linux日常运维工作
Linux的使用环境也日趋成熟,各种开源产品络绎不绝,大有百花齐放的盛景,那么当Linux落地企业,回归工作时,我们还要面对这Linux运维方面的诸多问题,今天我们特意组织一场有关Linux 在企业运 ...