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 使用的更多相关文章

  1. MQTT.js browser node 均支持

    npm - mqtt 官网手册 https://www.npmjs.com/package/mqtt#weapp 简书用户 使用笔记 https://www.jianshu.com/p/4fd95ca ...

  2. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  3. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  4. 移动端js调取手机相册和拍照功能

    前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...

  5. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  6. 使用 WebSocket 客户端连接 MQTT 服务器

    简介 近年来随着 Web 前端的快速发展,浏览器新特性层出不穷,越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现,Web 应用的即时通信方式 WebSocket 得到了广泛的应用. WebSock ...

  7. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  8. js压缩图片并上传,不失真,保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

随机推荐

  1. 寒假安卓app开发学习记录(6)

    今天把之前学过的内容复习了一遍,然后用了大概一个小时的时间看了看教学视频. 学到的主要内容是如何调试Android程序,以及Android的应用以及打包过程.   调试: 依次点击Run“-”Atta ...

  2. MySQL学习(五)事务隔离

    文章部分图片和总结来自参考资料,侵删 概述 MySQL的可重复读隔离级别,事务T启动的时候会创建一个视图read-view,之后事务T执行期间,即使有其他事务修改了数据,事务T看到的仍然跟在启动时看到 ...

  3. 小匠第一周期打卡笔记-Task01

    一.线性回归 知识点记录 线性回归输出是一个连续值,因此适用于回归问题.如预测房屋价格.气温.销售额等连续值的问题.是单层神经网络. 线性判别模型 判别模型 性质:建模预测变量和观测变量之间的关系,亦 ...

  4. # E. Mahmoud and Ehab and the xor-MST dp/数学+找规律+xor

    E. Mahmoud and Ehab and the xor-MST dp/数学/找规律 题意 给出一个完全图的阶数n(1e18),点由0---n-1编号,边的权则为编号间的异或,问最小生成树是多少 ...

  5. hdu 1281 棋盘游戏(二分图)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1281 每行每列作为节点,给可以放车的点将对应的行列连边,最多可放置的车即为建二分图后的最大匹配,跑一边 ...

  6. JS高级---为内置对象添加原型方法

    为内置对象添加原型方法 我们能否为系统的对象的原型中添加方法, 相当于在改变源码   我希望字符串中有一个倒序字符串的方法 //我希望字符串中有一个倒序字符串的方法 String.prototype. ...

  7. liunx详解-1

    一 文件系统 根目录结构 root root用户家目录 home 其他用户家目录 etc 系统配置目录 bin sbin 可执行二进制文件目录,sbin只有root可访问 opt 软件安装目录 usr ...

  8. 8.10-Day1T2圈(circle)

    圈(circle) 题目大意 一开始看这道题,觉得有点像备用钥匙那道题,需要离散化, 把一个球的两个点分开看... 但是..其中的规律我推不出来 (不是很难,只是蒟蒻好久都没有自己独立思考了) 题解 ...

  9. PHP 操作oracle数据库,select,insert into ,delete,update等

    建完数据库,下面就是操作数据库啦 程序的根源无非是增删改查 首先最基础的查询 public function obtainduo(){ header("content-type:text/h ...

  10. python 网页中文显示Unicode码

    print repr(a).decode("unicode–escape") 注:a是要输出的结果,