您的位置：首页 > 编程语言 > Qt开发

tempgauge测试-MQTT Over WebSocket

2015-12-09 23:33 393 查看

测试环境：

操作系统：ubuntu 12.04 32位
软件：
MQTT Broker:HiveMQ
MQTT Client:The Paho Javascript Client
下载地址: http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/

MQTT Client：mosquitto_pub
下载地址：http://mosquitto.org/download/

tempgauge

Read a topic from MQTT and
display the value on a gauge.

首先在ubuntu上搭建HiveMQ环境
在这里选择HiveMQ作为MQTT Broker是因为HiveMQ原生支持WebSocket，而且软件很容易安装。
One
of the big new features of the HiveMQ 1.4 release is definitely the native support for MQTT over Websockets. Every modern browser on any device is now a potential full-fledged MQTT client. With real publish/subscribe in the browser, web apps can take full
advantage of highly scalable messaging with a very low bandwidth footprint.

安装HiveMQ:
下载HiveMQ: http://www.hivemq.com/downloads/
安装HiveMQ需要安装jre
sudo apt-get install openjdk-7-jre

解压之后
Change directory to HiveMQ directory

cd hivemq-3.0.2/

然后使用mqtt over websocket的配置文件
cp conf/examples/configuration/config-sample-mqtt-and-websockets.xml ./conf/config.xml
Execute startup script:

./bin/run.sh
就ok了

下面是测试的html文件index.html

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="tempgauge-master/vendor/jquery.min.js" type="text/javascript"></script>
<script src="tempgauge-master/vendor/mqttws31.js" type="text/javascript"></script>
<script src="tempgauge-master/vendor/tween-min.js" type="text/javascript"></script>
<script src="tempgauge-master/vendor/steelseries-min.js" type="text/javascript"></script>
<title>Temp</title>
<script type="text/javascript">
var tempGauge;
var client = new Messaging.Client("127.0.0.1", 8000,
"myclientid_" + parseInt(Math.random() * 100, 10));
/*
var client = new Messaging.Client("10.0.0.11", 1883,"4001");
*/

client.onConnectionLost = function (responseObject) {
alert("connection lost: " + responseObject.errorMessage);
tempGauge.setLedColor(steelseries.LedColor.RED_LED); //change status LED to RED on broker disconnection

};

client.onMessageArrived = function (message) {
tempGauge.setValue(message.payloadString);
};

var options = {
timeout: 3,
onSuccess: function () {
alert("Connected");
// Connection succeeded; subscribe to our topic
client.subscribe('temp/random', {qos: 0});
tempGauge.setLedColor(steelseries.LedColor.GREEN_LED); //change status LED to GREEN on broker connection

},
onFailure: function (message) {
alert("Connection failed: " + message.errorMessage);
tempGauge.setLedColor(steelseries.LedColor.RED_LED); //change status LED to RED on broker disconnection

}
};

function init() {
// by @jpmens, Sep 2013
// from @bordignons Sep 2013
// original idea.. http://www.desert-home.com/2013/06/how-to-use-steelseries-gauges-with.html // with help.. http://harmoniccode.blogspot.com.au/ // and code.. https://github.com/HanSolo/SteelSeries-Canvas 
tempGauge = new steelseries.Radial('gaugeCanvas', {
gaugeType: steelseries.GaugeType.TYPE4,
minValue:-15,
maxValue:50,
size: 400,
frameDesign: steelseries.FrameDesign.STEEL,
knobStyle: steelseries.KnobStyle.STEEL,
pointerType: steelseries.PointerType.TYPE6,
lcdDecimals: 0,
section: null,
area: null,
titleString: 'Temperature',
unitString: 'C',
threshold: 100,
lcdVisible: true,
lcdDecimals: 2
});
tempGauge.setValue(''); //gives a blank display 'NaN' until broker has connected
tempGauge.setLedColor(steelseries.LedColor.RED_LED); //set the LED RED until connected

/* Connect to MQTT broker */
client.connect(options);
}

</script>
</head>
<body onload="init();">
<div>
<canvas id=gaugeCanvas width=200 height=200>No canvas in your browser...sorry...</canvas>
<p>Publish to the "temp/random" topic to change the gauge. A local
process runs every 15 seconds to update the value by adding a random
value in the range +/-2 degrees.</p>
<p>mosquitto_pub -h test.mosquitto.org -t temp/random -m 23.0</p>
<p>From <a href="https://github.com/jpmens/tempgauge">https://github.com/jpmens/tempgauge</a>
</div>
</body>
</html>

然后命令行执行mosquitto_pub -h 127.0.0.1 -t temp/random -m 23.0
就会看到网页实时显示了23

第一个测试大功告成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航