javascript-mqtt

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

<!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用户下，需要更改权限，否则运行会报错的。

转载于:https://www.cnblogs.com/braveheart007/p/9844638.html

javascript-mqtt相关推荐

Beginners Guide To The MQTT Protocol
原文:http://www.steves-internet-guide.com/mqtt/ Beginners Guide To The MQTT Protocol What is MQTT? MQT ...
使用 WebSocket 客户端连接 MQTT 服务器/vue 项目使用mqtt消息队列实现推送
简介近年来随着 Web 前端的快速发展,浏览器新特性层出不穷,越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现,Web 应用的即时通信方式 WebSocket 得到了广泛的应用. WebSock ...
未读消息（小红点），前端与 RabbitMQ 实时消息推送实践，贼简单~
前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...
物联网初探-开发技术栈
概述大体上来说,一个典型的物联网项目主要由云.管.端三大部分组成. 端,即终端,它负责真实世界的感知和控制,是物联网的最底层: 管,即管道,它是物联网的网络核心,一切数据和指令均靠管道来传输,它是物 ...
Bookmarks(三)
Bookmarks 书签栏 tooltips提示效果,支持点击与经过显示,位置和效果可以自定义 - CSDN博客疯狂的小萝卜头 - 博客园 [Kettle从零开始]第九弹之Kettle定时任务介绍 ...
JavaScript使用MQTT
目录 1.安装MQTT服务器 2.启动emqx,woesocket 3.编写服务端(发布) 4.编写客户端(订阅接收) 5.效果展示目的:前端接收mqtt消息,例如实时展示位置信息等. 1.安装MQ ...
物联网协议对比（HTTP、websocket、XMPP、COAP、MQTT和DDS协议）
目录 1.HTTP和websocket 2.XMPP 3.COAP 4.MQTT协议 5.DDS 对于物联网,最重要的是在互联网中设备与设备的通讯,现在物联网在internet通信中比较常见的通讯协议 ...
一文读懂物联网 MQTT 协议之基础特性篇
一.前言上个月有个读者问我物联网 MQTT 协议实战相关的问题,我说后面会搞,没想到不知不觉一个月了,太忙了,再怎么忙答应的事情还是要给读者一个交代,所以就有了此文. 二.MQTT 协议概要 2.1 ...
websocket连接mqtt实现发布及订阅主题
2019独角兽企业重金招聘Python工程师标准>>> 环境:linux(ubuntu.Centos7),websocket,mosquitto-1.4.10,libwebsocke ...
MQTT协议通俗讲解
参考 Reference v3.1.1 英文原版中文翻译版其他资源网站 MQTT官方主页 Eclipse Paho 项目主页测试工具 MQTT Spy(基于JDK) Chrome插件 MQTT ...

javascript-mqtt

javascript-mqtt相关推荐

最新文章

热门文章