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 ...
随机推荐
- wget 显示网页内容到控制台
wget -q -O - http://www.microsoft.com
- HTML学习（12）列表
HTML包括有序列表ol(ordered list).无序列表ul(unordered list).自定义列表dl(difinition list) 有序列表: <ol start=" ...
- Django项目报错： 禁止访问（403），CSRF验证失败，相应中断
如果想要取消表单的CSRF防护,可以在模板上删除{% csrf_token %}, 并且在相应的视图函数中添加装饰器@csrf_exempt, 代码如下: from django.views.deco ...
- Unity Coroutine详解（一）
Unity 中协程是个非常强大的功能,其作用主要是用于游戏中的延时调用或者执行一连串的有时间间隔的事件流程,例如剧情对话等.简单总结了几点协程相关的知识点,旨在加深记忆,同时为初学者解惑. 1.协程. ...
- 计算几何-UVa10652
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 题意见白书,P2 ...
- APP项目下载及运行
1.首先下载Git 2.再下载安装node.js 3.dos窗口下载node.js依赖jar包 执行命令:npm install 4.从Git上down项目 5.运行项目 在项目根目录下 右键 打开 ...
- SimpleDateFormat 详解
转自:http://www.cnblogs.com/yjhrem/articles/2419717.html String time1="2015-10-06"; SimpleDa ...
- linux shell let, expr 命令详解
linux命令之let.exprshell程序中的操作默认都是字符串操作,在运行数学运算符的时候可能得到意想不到的答案: var=1var=$var+1echo $var 将输出 1+1从这个例子中可 ...
- bit Buffer
在音频流解析过程中,常常会涉及到顺序读取某些bit的操作. #include<stdio.h> typedef struct _BIT_BUF { unsigned char buffer ...
- Markdown编辑器软件安装及问题处理
一.Markdown简介 MarkdownPad是Windows下的一个多功能Markdown编辑器 Markdown是一门编辑语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,可以用来对 ...