https://www.cnblogs.com/yangfengwu/p/11198572.html
說一下哈,,如果教程哪里看不明白...就去自己百度補充哪一部分,,學習不是死記硬背,需要會學習,永遠沒有學完的知識,要學會會學,會靈活運用.
還有一件事情...你們都不睡覺嗎?現在是3:23 ..... 竟然看的人數在持續增加...
那個..我還是先睡覺吧,,因為我剛想到,做頁面需要先寫DIV的 然后再寫具體MQTT的.....需要兩篇...我先洗洗睡...
咱先不管布局..先直接這樣寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="paho-mqtt.js" type="text/javascript"></script> <!--加載支持MQTT的包-->
<script>
var client;//定義一個全局變量
function onConnect() {// called when the client connects 如果連接上,進入
document.getElementById("buttonConnect").innerHTML = "斷開";//改變顯示的內容
}
function onConnectionLost(responseObject) {// called when the client loses its connection
if (responseObject.errorCode !== 0) {//回復的不是1就是2具體看 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息
console.log("onMessageArrived:"+message.payloadString);
}
function buttonConnectOnclick() {//按鈕點擊事件
client = new Paho.MQTT.Client("47.92.31.46", Number("8083"), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//設置連接斷開回調函數
client.onMessageArrived = onMessageArrived;//設置接收到消息進入的回調函數
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 連接...
}
</script>
</head>
<body>
IP地址: <input type="text" id="ip"> <!--輸入連接的IP地址-->
端口號: <input type="text" value="8083"> <!--輸入連接的端口號,默認顯示8083-->
<button id="buttonConnect" onclick="buttonConnectOnclick()"> 連接 </button><!--一個按鈕,顯示連接,點擊事件是 buttonConnect-->
</body>
</html>
測試下
接着完善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="paho-mqtt.js" type="text/javascript"></script> <!--加載支持MQTT的包-->
<script>
var client;//定義一個全局變量
function onConnect() {// called when the client connects 如果連接上,進入
document.getElementById("buttonConnect").innerHTML = "斷開";//改變顯示的內容
}
function onConnectionLost(responseObject) {//斷開了連接
if (responseObject.errorCode !== 0) {//回復的不是1就是2具體看 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
document.getElementById("buttonConnect").innerHTML = "連接";//改變顯示的內容
}
}
function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息
console.log("onMessageArrived:"+message.payloadString);
}
function buttonConnectOnclick() {//按鈕點擊事件
try{//加上異常捕獲
client = new Paho.MQTT.Client(document.getElementById("ip").value, Number(document.getElementById("port").value), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//設置連接斷開回調函數
client.onMessageArrived = onMessageArrived;//設置接收到消息進入的回調函數
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 連接...
}catch (e) {
alert(e);//打印連接中的錯誤
}
}
</script>
</head>
<body>
IP地址: <input type="text" id="ip"> <!--輸入連接的IP地址-->
端口號: <input type="text" value="8083" id="port"> <!--輸入連接的端口號,默認顯示8083-->
<button id="buttonConnect" onclick="buttonConnectOnclick()"> 連接 </button><!--一個按鈕,顯示連接,點擊事件是 buttonConnect-->
</body>
</html>
測試
OK
接着還要加上用戶名和密碼,,還有訂閱主題,,發布消息
放到下一節
需要先說一下規范,,,所有的都放到一個文件里面.....看着難受
https://www.cnblogs.com/yangfengwu/p/11351182.html