Web頁面通過MQTT協議與伺服器互動,Mosca安裝測試
阿新 • • 發佈:2018-12-13
在伺服器上安裝node的執行環境和mosca庫
yum install nodejs
yum install zeromq-devel
mkdir devel
cd devel
npm install --save mosca
node mqttserver.js
mqttserver.js原始碼如下:
var mosca = require('mosca'); var MqttServer = new mosca.Server({ port: 6000, http: { port: 9080, bundle: true, static: './' } }); MqttServer.on('ready', function(){ console.log('mqtt is running...'); //MqttServer.authenticate = authenticate; }); MqttServer.on('clientConnected', function(client){ console.log('client connected', client.id); }); MqttServer.on('clientDisconnected', function (client) { console.log('Client Disconnected := ', client.id); }); MqttServer.on('subscribed', function (topic, client) { console.log("Subscribed :=", topic, client.id); }); MqttServer.on('unsubscribed', function (topic, client) { console.log('unsubscribed := ', topic, client.id); }); MqttServer.on('published', function(packet, client) { if (typeof (client) == "undefined") return; else console.log('client ', client.id, ' publish :', 'topic ='+packet.topic+ ',message = '+ packet.payload.toString()); }); MqttServer.on("error", function (err) { console.log(err); });
index.html原始碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" id="msg"/> <input type="button" value="訂閱主題" onclick="subscribe()"/> <input type="button" value="傳送訊息" onclick="send()"/> <input type="button" value="取消訂閱" onclick="unsubscribe()"/> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"></script> <script> var hostname = '192.168.1.2', port = 9080, clientId = 'clientmao2080', timeout = 5, keepAlive = 50, cleanSession = false, ssl = false, userName = 'admin', password = 'password', topic = 'vulsun'; client = new Paho.MQTT.Client(hostname, port, clientId); 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); } }; client.connect(options); function onConnect() { console.log("onConnected"); } client.onConnectionLost = onConnectionLost; client.onMessageArrived = onMessageArrived; function onConnectionLost(responseObject) { console.log(responseObject); if (responseObject.errorCode !== 0) { console.log("onConnectionLost:"+responseObject.errorMessage); console.log("連線已斷開"); } } function onMessageArrived(message) { console.log("收到訊息:"+message.payloadString); } function send(){ var s = document.getElementById("msg").value; if(s.length > 0){ message = new Paho.MQTT.Message(s); message.destinationName = topic; client.send(message); document.getElementById("msg").value = ""; console.log("訊息傳送成功"+s); } else { alert("傳送的訊息不能為空"); } } var count = 0; function subscribe(){ client.subscribe(topic, { qos: 2}); console.log("訂閱主題:"+topic); } function unsubscribe(){ client.unsubscribe(topic); console.log("取消訂閱主題:"+topic); } </script> </html>
這樣就可以與伺服器進行即時訊息的互動了,並且沒有跨域的問題。