js client使用paho-mqtt，官网地址：http://www.eclipse.org/paho/，参考http://www.eclipse.org/paho/clients/js/官网给出例子Getting Started，写出下面简单的测试代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centos7 mosquitto test</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="paho-mqtt-min.js"></script>
<script type="text/javascript">
var hostname = "csxyz.xyz";      //主机IP  106.14.181.32
var hostPort = 9001;             //port
var sub_count = 0;
var client;
function MQTTconnect() {
    client = new Paho.MQTT.Client(hostname, hostPort, "test");
    client.onMessageArrived = onMessageArrived;
    client.connect({onSuccess:onConnect});
    console.log("Host="+ hostname + ", port=" + hostPort);
};
// called when the client connects
function onConnect() {
  console.log("onConnect succeeds");
//  client.subscribe('topic');
  client.subscribe('#');    //订阅所有主题
}
// called when a message arrives
function onMessageArrived(message) {
    var topic = message.destinationName;
    var payload = message.payloadString;
    console.log("onMessageArrived:" + payload);
    sub_count++;
   $('#sub_count').val('收到订阅' + sub_count + '条');
   $('#sub_message').prepend('<li>' + topic + ' = ' + payload + '</li>');
}
function button_onclick(){
    var topic = $('#topicsend').val();
    var text = $('#textsend').val();
    if(topic=='' || text=='')
    {
        alert("noTopic or noText");
        return;
    }
    var message = new Paho.MQTT.Message(text);
    message.destinationName = topic;
    message.qos=0;
    client.send(message);
};
$(document).ready(function() {
    MQTTconnect();
});
</script>
</head>
 
<body>
<h1>mosquitto pub</h1>
topic:<input type='text' id='topicsend' size="60"/> <br>
text :<input type='text' id='textsend' size="60"/>
<input type='button' value="send" id='btn' onclick="button_onclick()"/>
</br>
<h1>mosquitto sub</h1>
<input type='text' id='sub_count' disabled />
<ul id='sub_message' ></ul>
</body>
</html>

html在本地运行，测试结果：

在censtos的apache空间根目录下创建文件夹iot，将index.html和需要包含的js文件拷贝过去，使用浏览器打开csxyz.xyz/iot，也可以得到上面的结果。注意，文件上传的时候是在root用户下，需要更改权限，否则运行会报错的。

javascript-mqtt的更多相关文章

  1. javascript mqtt 发布订阅消息

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

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

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

  3. getting-started-with-mqtt

    来自:https://dzone.com/refcardz/getting-started-with-mqtt SECTION 1 Why MQTT? The Internet of Things ( ...

  4. 未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~

    前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...

  5. 使用javascript连接mqtt协议（自动重连问题）

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

  6. JavaScript使用MQTT

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

  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 ...

  10. 在线聊天室的实现(1)--websocket协议和javascript版的api

    前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...

随机推荐

  1. minitab 转换语言

    在使用minitab的时候,我们会以中文版熟悉界面,但是我们在实际操作的时候就要使用英文版的功能. 那么如何改变其语言环境呢. 很简单: 工具->选项->语言

  2. ViewModel处理View相关事件的多种方式（非技术贴，仅学习总结）

    众所周知,在UWP中,微软为我们提供了一种新的绑定方式:x:bind,它是基于编译时的绑定.在性能方面,运行时绑定Binding与它相比还是有些逊色的.因此针对一些确定的.不需要变更的数据,我们完全有 ...

  3. 不固定个数组，进行一一对应的组合,js将多个数组实现排列组合

    var arr = [ ["a", "b"], ["1", "2"], ["d"] ]; var s ...

  4. Python 中 and 和 or 的短路原则

    对于 and 来说: 如果第一个条件的结论为假,那么 and 前后两个条件组成的表达式计算结果一定为假,后面的条件计算机不会进行计算 对于 or 来说: 如果第一个条件的结论为真,那么 or 前后两个 ...

  5. Python 练习：简单的购物车(二)

    优化了上一个购物车程序:http://www.cnblogs.com/klvchen/p/8577269.html #输入工资salary = input("Please input you ...

  6. Python中的基本数据类型的区别

    set集合和dict字典的区别 唯一区别: set没有对应的value值 相同点: 都无索引,不可进行切片和根据索引进行的操作 两者都是不可哈希的可变类型 两者的内部元素是可哈希的不可变类型 利用哈希 ...

  7. node.js 基础学习

    node.js 是一个 javaScript 运行环境,可以让 js 运行在服务端. 在 nodejs 环境下,可以运行 javascript 基本语法,可以在nodejs 中执行一些无法在浏览器端执 ...

  8. python第四天 三级菜单新思路

    今天是一个坎,在做三级菜单时卡住了,因为想要简洁的代码,就要用到递归函数,卡的不要不要的!不过最后在同学老师的提点帮助下,还是解决了! 2017-5-10发现之前的代码有BUG今天 修改了! 作业要求 ...

  9. 给电脑插上无线网卡，变成路由器----Windows系统承载网络的使用

    1. 以管理员身份运行命令提示符(PowerShell) 2. 启用并设定虚拟wifi网卡 netsh wlan set hostednetwork mode=allow ssid=wifi名称 ke ...

  10. ccf--20160403---路径解析

    本题思路如下: 具体的细节如下:首先去掉字符串中重复出现的/,然后遇到..,就删除栈的最后一个元素,.忽略 下面是代码和题目: 问题描述 试题编号: 201604-3 试题名称: 路径解析 时间限制: ...