JS通过mqtt连接Activemq收发数据
最近因为一些业务的需要，测试了一下JS通过mqtt连接Activemq服务器收发数据的功能，这里做一个简单的记录，activemq服务器的话请自行安装配置，我这里的版本是apache-activemq-5.15.3。有兴趣的话可以下载demo
demo地址 提取码：ah9b
一、测试页面如下所示
未连接页面
连接成功后
收发数据
二、测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chat Example Using MQTT Over WebSockets</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.responsive.css" rel="stylesheet" />
<style type="text/css">
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">ActiveMQ MQTT WebSocket Chat Example</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div id="connect">
<div class="page-header">
<h2>Server Login</h2>
</div>
<form class="form-horizontal" id="connect_form">
<fieldset>
<div class="control-group">
<label>Host</label>
<div class="controls">
<input name="host" id="connect_host" value="192.168.1.204" type="text" />
</div>
</div>
<div class="control-group">
<label>Port</label>
<div class="controls">
<input name="url" id="connect_port" value="61614" type="text" />
</div>
</div>
<div class="control-group">
<label>Client ID</label>
<div class="controls">
<input id="connect_clientId" placeholder="id" value="example" type="text" />
</div>
</div>
<div class="control-group">
<label>User ID</label>
<div class="controls">
<input id="connect_user" placeholder="User ID" value="zy" type="text" />
</div>
</div>
<div class="control-group">
<label>Password</label>
<div class="controls">
<input id="connect_password" placeholder="User Password" value="Zy123" type="password" />
</div>
</div>
<div class="control-group">
<label>Destination</label>
<div class="controls">
<input id="destination" placeholder="Destination" value="linka" type="text" />
</div>
</div>
<div class="form-actions">
<button id="connect_submit" type="submit" class="btn btn-large btn-primary">Connect</button>
</div>
</fieldset>
</form>
</div>
<div id="connected" style="display:none">
<div class="page-header">
<h2>Chat Room</h2>
</div>
<div id="messages"></div>
<form class="well form-search" id="send_form">
<button class="btn" type="button" id="disconnect" style="float:right">Disconnect</button>
<input class="input-medium" id="send_form_input" placeholder="Type your message here" class="span6" />
<button class="btn" type="submit">Send</button>
</form>
</div>
</div>
<div class="span4">
<div class="page-header">
<h2>Debug Log</h2>
</div>
<pre id="debug"></pre>
</div>
</div>
</div>
<!-- Scripts placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/mqttws31.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
$("#connect_clientId").val("example-" + Math.floor(Math.random() * 100000));
if (!window.WebSocket) {
console.log("不支持websocket");
} else {
var client, destination;
$("#connect_form").submit(function() {
var host = $("#connect_host").val();
var port = $("#connect_port").val();
var clientId = $("#connect_clientId").val();
var user = $("#connect_user").val();
var password = $("#connect_password").val();
destination = $("#destination").val();
// Messaging为mqttws31.js定义的对象
client = new Messaging.Client(host, Number(port), clientId);
console.log(client);
client.onConnect = onConnect;
client.onMessageArrived = onMessageArrived;
client.onConnectionLost = onConnectionLost;
client.connect({
userName: user,
password: password,
onSuccess: onConnect,
onFailure: onFailure
});
return false;
});
// the client is notified when it is connected to the server.
var onConnect = function(frame) {
debug("connected to MQTT");
$("#connect").fadeOut({ duration: "fast" });
$("#connected").fadeIn();
client.subscribe(destination);
};
// this allows to display debug logs directly on the web page
var debug = function(str) {
$("#debug").append(document.createTextNode(str + "\n"));
};
$("#disconnect").click(function() {
client.disconnect();
$("#connected").fadeOut({ duration: "fast" });
$("#connect").fadeIn();
$("#messages").html("");
return false;
});
// 发送数据
$("#send_form").submit(function() {
var text = $("#send_form_input").val();
if (text) {
message = new Messaging.Message(text);
message.destinationName = destination;
client.send(message);
$("#send_form_input").val("");
}
return false;
});
function onFailure(failure) {
debug("failure");
debug(failure.errorMessage);
}
function onMessageArrived(message) {
var p = document.createElement("p");
var t = document.createTextNode(message.payloadString);
p.appendChild(t);
$("#messages").append(p);
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
debug(client.clientId + ": " + responseObject.errorCode + "\n");
}
}
}
});
//]]>
</script>
</body>
</html>
