1、MQTT Server使用EMQTTD开源库,自行安装配置;
2、JS使用Websocket连接通信。
3、JS的MQTT库为paho-mqtt,git地址:https://github.com/eclipse/paho.mqtt.javascript.git
 
代码如下:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script> <script>
var hostname = '127.0.0.1', //'192.168.1.2',
port = 8083,
clientId = 'client-mao2080',
timeout = 5,
keepAlive = 100,
cleanSession = false,
ssl = false,
// userName = 'mao2080',
// password = '123',
topic = '/World';
client = new Paho.MQTT.Client(hostname, port, clientId);
//建立客户端实例
var options = {
invocationContext: {
host: hostname,
port: port,
path: client.path,
clientId: clientId
},
timeout: timeout,
keepAliveInterval: keepAlive,
cleanSession: cleanSession,
useSSL: ssl,
// userName: userName,
// password: password,
onSuccess: onConnect,
onFailure: function (e) {
console.log(e);
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";
console.log(s);
}
};
client.connect(options);
//连接服务器并注册连接成功处理事件
function onConnect() {
console.log("onConnected");
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnected()}";
console.log(s);
client.subscribe(topic);
} client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
client.onMessageArrived = onMessageArrived; //注册消息接收处理事件
function onConnectionLost(responseObject) {
console.log(responseObject);
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";
console.log(s);
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:" + responseObject.errorMessage);
console.log("连接已断开");
}
} function onMessageArrived(message) {
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onMessageArrived()}";
console.log(s);
console.log("收到消息:" + message.payloadString);
} function send() {
var s = document.getElementById("msg").value;
if (s) {
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (s) + ", from: web console}";
message = new Paho.MQTT.Message(s);
message.destinationName = topic;
client.send(message);
document.getElementById("msg").value = "";
}
} var count = 0; function start() {
window.tester = window.setInterval(function () {
if (client.isConnected) {
var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) +
", from: web console}";
message = new Paho.MQTT.Message(s);
message.destinationName = topic;
client.send(message);
}
}, 1000);
} function stop() {
window.clearInterval(window.tester);
} Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</head> <body>
<input type="text" id="msg" />
<input type="button" value="Send" onclick="send()" />
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />
</body> </html>
 

JavaScript使用MQTT的更多相关文章

  1. 使用javascript连接mqtt协议(自动重连问题)

    因为之前是在rabbitmq的插件"RabbitMQ Web MQTT plugin "中看到使用了mqttws31.js的实例,由于对mqttws31不了解,网上下载了连接成功, ...

  2. 采用MQTT协议实现android消息推送(2)MQTT服务端与客户端软件对比、android客户端示列表

    1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...

  3. MQTT研究之EMQ:【EMQX使用中的一些问题记录(2)】

    我的测试环境: Linux: CentOS7 EMQX:V3.2.3 题外话: 这里主要介绍Websocket的支持问题. 对ws的支持比较正常,但是对wss的支持,调了较长的时间,没有成功. Jav ...

  4. uniapp中mqtt的基本使用

    参考文档: [1] https://www.hivemq.com/blog/mqtt-client-library-mqtt-js/ [2] https://www.tabnine.com/code/ ...

  5. paho_c_pub 使用方法

    Latest Paho Status (2) 摘自:http://modelbasedtesting.co.uk/ I last wrote about the state of Paho in Oc ...

  6. javascript mqtt 发布订阅消息

    js client使用paho-mqtt,官网地址:http://www.eclipse.org/paho/,参考http://www.eclipse.org/paho/clients/js/官网给出 ...

  7. TCP/IP, WebSocket 和 MQTT

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...

  8. MQTT 消息 发布 订阅

    当连接向一个mqtt服务器时,clientId必须是唯一的.设置一样,导致client.setCallback总是走到 connectionLost回调.报connection reset.调查一天才 ...

  9. MQTT和WebSocket

    严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的.   MQTT和TCP.WebSocket的关系可以用下图一目了然:   参考资料: http://www.zhihu.com/q ...

随机推荐

  1. (数据科学学习手札74)基于geopandas的空间数据分析——数据结构篇

    本文对应代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 geopandas是建立在GEOS.GDAL.P ...

  2. YUM安装软件提示[Errno 14] curl#6 - "Could not resolve host: mirrors.cloud.aliyuncs.com; 未知的错误"

    报错如下: 翻译过来就是 所以问题很简单: 第一种情况:本地DNS服务错误 第二种情况:远程主机挂了 第三种情况:远程主机地址配置错误 第一种解决方法:换DNS 首先验证一下是不是本地DNS错误 从上 ...

  3. C语言指针及占据内存空间

    第一.了解内存空间 本文章文字有点多,会有点枯燥,配合图文一起看可以缓解枯燥,耐心阅读哦!!! 先了解内存地址,才更好的理解指针! 我们可以把内存想象为成一列很长很长的货运火车,有很多大小相同的车厢, ...

  4. Oracle笔记(1)--emp表查询(1)

    (1)截取函数--TRUNC() 的用法 SELECT  TRUNC(789.652) 截取小数, TRUNC(789.652,2) 截取两位小数, TRUNC(789.652,-2) 取整 FROM ...

  5. supervisor管理tomcat

    操作目的:用supervisor工具管理tomcat服务 配置环境,安装服务,以及多实例 脚本编辑: 前提 机器的opt目录下必须有jdk-8u131-linux-x64_.rpm 以及apache- ...

  6. HDU_1556_线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=1556 直接用了技巧来做. #include<iostream> #include<cstdio ...

  7. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

  8. 深入JVM垃圾回收机制,值得你收藏

    JVM可以说是为了Java开发人员屏蔽了很多复杂性,让Java开发的变的更加简单,让开发人员更加关注业务而不必关心底层技术细节,这些复杂性包括内存管理,垃圾回收,跨平台等,今天我们主要看看JVM的垃圾 ...

  9. Go语言实现:【剑指offer】从上往下打印二叉树

    该题目来源于牛客网<剑指offer>专题. 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 不需分层,一维数组. Go语言实现: /** * Definition for a bi ...

  10. Lnmp环境源码包编辑安装

    最近做了一个小工具可以方便的部署LNMP环境,有兴趣的同学可以尝试下: 这是一个集成的shell脚本,脚本将会自动安装好LNMP环境相关软件: 使用步骤 1.下载脚本源码到本地 git clone h ...