javascript-mqtt
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的更多相关文章
- javascript mqtt 发布订阅消息
js client使用paho-mqtt,官网地址:http://www.eclipse.org/paho/,参考http://www.eclipse.org/paho/clients/js/官网给出 ...
- 使用 WebSocket 客户端连接 MQTT 服务器
简介 近年来随着 Web 前端的快速发展,浏览器新特性层出不穷,越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现,Web 应用的即时通信方式 WebSocket 得到了广泛的应用. WebSock ...
- getting-started-with-mqtt
来自:https://dzone.com/refcardz/getting-started-with-mqtt SECTION 1 Why MQTT? The Internet of Things ( ...
- 未读消息(小红点),前端与 RabbitMQ实时消息推送实践,贼简单~
前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...
- 使用javascript连接mqtt协议(自动重连问题)
因为之前是在rabbitmq的插件"RabbitMQ Web MQTT plugin "中看到使用了mqttws31.js的实例,由于对mqttws31不了解,网上下载了连接成功, ...
- JavaScript使用MQTT
1.MQTT Server使用EMQTTD开源库,自行安装配置: 2.JS使用Websocket连接通信. 3.JS的MQTT库为paho-mqtt,git地址:https://github.com/ ...
- TCP/IP, WebSocket 和 MQTT
按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...
- MQTT 消息 发布 订阅
当连接向一个mqtt服务器时,clientId必须是唯一的.设置一样,导致client.setCallback总是走到 connectionLost回调.报connection reset.调查一天才 ...
- MQTT和WebSocket
严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的. MQTT和TCP.WebSocket的关系可以用下图一目了然: 参考资料: http://www.zhihu.com/q ...
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
随机推荐
- 【19】中间者模式(Mediator Pattern)
一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 二. 中介者模式的介绍 2.1 ...
- hive的行列转换
行转列(把多个行合并) 比如把: id tag 1 12 1 23 2 67 2 78 2 76 行转列之后: id tag 1 12,23 2 67,78,76 使用函数为:concat_w ...
- 初学HTML-5
表格标签:用来给一堆数据添加表格语义. 格式:<table> <tr> <td></td> </tr> </table> tab ...
- 【pygame游戏编程】第一篇-----创建一个窗口
下面我们一起来创建一个背景为蓝色的窗口作为游戏编程的开始: import sys import pygame def creat_screen(): #初始化pygame pygame.init() ...
- Oracle 11g数据库的创建
由于是自己自学Oracle,如果有问题,请大家指出,谢谢! Oracle提供了DBCA来创建数据库,对于初学者来说使用DBCA创建数据库简化了很多工作和设置,直接在交互界面即可实现所有的功能. 然而对 ...
- Python 利用Python操作excel表格之xlwt介绍
利用Python操作excel表格之xlwt介绍 by:授客 QQ:1033553122 直接上代码 案例1 #!/usr/bin/env python # -*- coding:utf-8 ...
- Django ModelForm 小实例1
1.models.py ASSET_STATUS = ( (str(1), u"使用中"), (str(2), u"未使用"), (str(3), u" ...
- OneAlert 携手 BearyChat(倍洽)快速构建 IT 运维 on-call 机制
OneAlert 是北京蓝海讯通科技股份有限公司旗下产品,中国第⼀个 SaaS 模式的免费的云告警平台,集成国内外主流监控/⽀撑系统,实现⼀个平台上集中处理所有 IT 事件,提升 IT 可靠性.并且能 ...
- [20171031]rman xxx Failure.txt
[20171031]rman xxx Failure.txt --//简单测试 List Failure, Advise Failure and Repair Failure命令在11g下,也许以后工 ...
- linux调度器源码分析 - 概述(一)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 引言 调度器作为操作系统的核心部件,具有非常重要的意义,其随着linux内核的更新也不断进行着更新.本系列文章通 ...