<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title><!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>TEMPLATES</title>
|
<!-- 可选在线mqtt.min.js文件与本地mqtt.min.js文件 -->
|
<!-- <script src=" https://unpkg.com/mqtt@5.3.4/dist/mqtt.min.js"></script>-->
|
<script th:src="@{/js/mqtt.min.js}"></script>
|
</head>
|
<body>
|
<h2>MQTT测试</h2>
|
<form>
|
</form>
|
<!--<button id="disconnectBtn" disabled="disabled" onclick="connectEND()">已断开</button>-->
|
</body>
|
<body>
|
</body>
|
<body>
|
<h1>消息框</h1>
|
<textarea id="messageTextArea" style="resize:none;" cols="80" rows="20"></textarea><br/>
|
</body>
|
<script>
|
connectMQTT();
|
var client; //创建一个客户端对象
|
/* 连接服务器 */
|
function connectMQTT() {
|
// 用户密码
|
var host = "ws://127.0.0.1";
|
var port = "8083";
|
var path = "/mqtt";
|
var url = host + ':' + port + path;
|
var clientID = randomID();
|
var user="";
|
var password="";
|
// URL地址
|
console.log(url); //后台输入URL地址
|
var options = { //创建一个参数对象
|
clientID: clientID, //clientID
|
username: user, //用户名
|
password: password, //用户密码
|
outOfSessionMessages: true
|
};
|
client = mqtt.connect(url, options); //连接服务器
|
console.log(client);
|
console.log(client.connected);
|
client.stream.on('error', function (err) { //连接错误时触发
|
console.error('Connection error:' + err);
|
console.log('连接失败');
|
client.end(); //关闭客户端对象
|
})
|
client.on('connect', function (packet) { //连接服务器后触发
|
client.on('message', message_str) //定义接收消息后触发回调函数
|
var messageTextArea = document.getElementById("messageTextArea"); //textarea添加文本
|
messageTextArea.value += "已连接\n" //textarea添加文本
|
console.log("已连接"); //后台输出已连接
|
var topic = "test"
|
subscribe_topic(topic);
|
})
|
}
|
/* 订阅主题 */
|
function subscribe_topic(topic) {
|
client.subscribe(topic); //定阅主题
|
}
|
|
/* 接收消息函数 */
|
function message_str(topic, message) { //监听消息函数
|
console.log("收到来自主题:" + topic + "的消息:" + message.toString());
|
}
|
|
/* 生成随机clientID */
|
function randomID() {
|
return 'clientID_' + 12345;
|
// return 'clientID_' + Math.random().toString(16).substr(2, 8)
|
}
|
|
</script>
|
</html>
|
