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在本地运行,测试结果:
在censtos的apache空间根目录下创建文件夹iot,将index.html和需要包含的js文件拷贝过去,可以得到上面的结果。注意,文件上传的时候是在root用户下,需要增加可执行权限,否则运行会报错的。