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 ...
随机推荐
- 题解【POJ3252】Round Numbers
Description The cows, as you know, have no fingers or thumbs and thus are unable to play Scissors, P ...
- 【C语言】用C语言输出“心形”图案
在你们的世界里,是不是觉得程序猿一点浪漫都不懂?其实不是的,程序猿的世界也是很浪漫滴! 傻瓜版 int main() { printf("❤"); ; } 高级版 //版本一:单个 ...
- HTML学习（15）框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <iframe src="//www.taobao.com" name="iframe_a" ...
- selenium + phantomJS 常用方法总结
0x01 初始化: dcap = dict(DesiredCapabilities.PHANTOMJS) #一些属性的设置 dcap["phantomjs.page.settings.lo ...
- EntityFramework使用SqlCe数据库
使用NuGet添加下面3个引用 App.Config的<entityFramework>节点这样配置: <entityFramework> <defaultConnect ...
- python学习之 logging包
1,logging包 python的一个包,专门用来写日志的. 官方一共划分了6个等级的log类型,分别对应重要性等级50,40,30,20,10,0: 级别排序:CRITICAL > ERRO ...
- jmeter的使用---控制器
1.如果(If)控制器.Switch Controller if控制语句,判断字段是否存在,或者符合,执行不同的逻辑 2.简单控制器 一次进件流程,需要不同模块的数据,例如登陆,提交个人信息,信用认证 ...
- appium---切换webview时报错
在上一篇中简单介绍了如何查看webview和切换到webview的方法,可能第一次切换webview的时候会报错“Error: session not created exception: Chrom ...
- Winform遍历窗口的所有控件（几种方式实现）
本文链接:https://blog.csdn.net/u014453443/article/details/85088733 扣扣技术交流群:460189483 C#遍历窗体所有控件或某类型所有控件 ...
- MySQL删除语句比较，清空表数据，重置自增长索引
drop truncate delete 程度从强到弱 1.drop table tbdrop将表格直接删除,没有办法找回 2.truncate (table) tbtruncate 删除表中的所有数 ...