<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>登录</title>
<p>登录操作 输入为 密码</p>
<style>
#message {
height: 520px;
border-bottom: 1px solid gray;
padding: 20px 30px;
}
#container {
margin: 0 auto;
width: 720px;
border: 1px solid gray
}
input {
width: 300px;
height: 36px;
border: 1px solid gray;
background: none;
outline: none;
}
input:focus {
border-color: yellow;
}
button {
height: 36px;
}
</style>
<div id="container">
<div id="message">
</div>
<div>
<input type="text" id="msg" placeholder="输入内容..."/>
<button onclick="send()">发送消息</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"
type="text/javascript"></script>
<script>
//一。基本参数 备用
var payload = new Object();//传递信息的对象
var hostname = '192.168.1.54',
port = 8083,
clientId = '1',//个人账号（相当qq账号）
timeout = 10,
keepAlive = 20,
cleanSession = false,
ssl = false,
userName = 'zhangsan',
password = '123456',
qos = 2,
topic = '/mo/wftdlx/login';//订阅主题 /公司/提交人/状态/20191021165410
//{"serial":1,"companyId":1,"title":"标题","content":"内容","statusId":0,"createId":22,"createTime":"2019-10-21 16:47:05"}
//核心：client 以 mqtt 的方式连接 emq服务器
client = new Paho.MQTT.Client(hostname, port, clientId);
//1.建立客户端实例
var options = {
invocationContext: {
host: hostname,
port: port,
path: client.path,
clientId: clientId
},
timeout: timeout,
keepAliveInterval: keepAlive,
cleanSession: cleanSession,
useSSL: ssl,
userName: userName,
password: password,
onSuccess: onConnect,
onFailure: function (e) {
console.log(e);
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";
console.log(s);
}
};
client.connect(options);
function onConnect() {//连接服务器 并 订阅主题
var qos = 2;//订阅等级(表现为接收离线的信息)
console.log("onConnected");
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnected()}";
console.log(s);
client.subscribe(topic +"/123123123123" +"/reply", {qos: Number(qos)});
}
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
//注册消息接收处理事件
function onConnectionLost(responseObject) {
console.log(responseObject);
s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";
console.log(s);
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:" + responseObject.errorMessage);
console.log("连接已断开");
}
}
//接收信息：payloadString是发送的信息对象
function onMessageArrived(message) {
var payloadString = message.payloadString;
payload = JSON.parse(payloadString); //可以将json字符串转换成json对象
document.getElementById('message').innerHTML += "=========="+payloadString + '<br/>';
}
//发送信息：s是发送的信息对象
function send() {
var s = document.getElementById("msg").value;
if (s) {
var qos = 2;//发送等级
//如果服务器接收到终端publish某主题的消息，payload为空且retain值是true，则会删除这条持久化的消息。
//如果服务器接收到终端publish某主题的消息，payload为空且retain值是false，则不会删除这条持久化的消息。
var retain = true;//是否b
payload.userName ="wjf";
payload.password = s;
payload.securityCode = "123123123123";
var payloadString = JSON.stringify(payload); //可以将json对象转换成json对符串
//放入消息负载中
message = new Paho.MQTT.Message(payloadString);
message.destinationName = topic;
message.qos = Number(qos);
message.retained = retain;
//发送消息
client.send(message);
document.getElementById('message').innerHTML += s + '<br/>';
}
}
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</head>
<body>
</body>
</html>
<!--
1.qq账号注册 （增加数据库，id自增）
2.添加好友 （两个人添加订阅）
3.聊天（本页面）
4.信息提醒
官方文档： https://docs.emqx.io/tutorial/v3/zh/client_dev/javascript.html==》快速开始 ==》客户端编程初步==》javascript
百度搜索："mqtt的html"
管理监控api：https://docs.emqx.io/broker/v3/cn/rest.html
authorization： UserName：be088d0c594e6 PassWord：Mjg5NTM0OTcwMTcxMTY0MjM4MzY4NzI3NjA3MjgxNTgyMDI
一级路径：http://192.168.1.54:8080
-->
<!-- -->
浙公网安备 33010602011771号