- เพิ่ม Script ใน tag <header> จาก CDNJS
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js"></script>
- สร้าง Client Instance ของ Paho MQTT ด้วยคำสั่ง
let client = new Paho.Client("<broker-url>", Number(<port>), "<client-id>");
- สร้างฟังก์ชั่น onConnect ทำการเชื่อมต่อและ subscribe ไปยัง topic ด้วยคำสั่ง
const onConnect = () => {
console.log("Connected");
console.log("Subscribing to topic: <topic-name>");
client.subscribe("<topic-name>");
}
- สร้างฟังก์ชั่น onConnectionLost เพื่อแสดงสถานะหากถูกตัดการเชื่อมต่อ
const onConnectionLost = responseObject => {
if(responseObject !== 0){
console.log("ConnectionLost:"+responseObject.errorMessage);
}
}
- สร้างฟังก์ชั่น onMessageArrived เพื่อแสดงข้อความที่ได้รับ
const onMessageArrived = message => {
console.log("MessageArrived: " + message.payloadString);
}
}
- เรียกใช้ฟังก์ชัน connect, onConnect, onConnectionLost และ onMessageArrived
client.connect({
onSuccess: onConnect
}
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
- แหล่งอ้างอิง https://www.youtube.com/watch?v=rlnhd67PV-M
