天天看點

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    此域名已不是我在使用了(2019-6-16注)
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' οnclick="button_onclick()"/>
</br>
<h1>mosquitto sub</h1>
<input type='text' id='sub_count' disabled />
<ul id='sub_message' ></ul>
</body>
</html>
           

html在本地運作,測試結果:

javascript mqtt 釋出訂閱消息

在censtos的apache空間根目錄下建立檔案夾iot,将index.html和需要包含的js檔案拷貝過去,可以得到上面的結果。注意,檔案上傳的時候是在root使用者下,需要增加可執行權限,否則運作會報錯的。

轉載于:https://www.cnblogs.com/shawn-meng/p/8595045.html

繼續閱讀