12 網頁中MQTT通訊
(2023/12/04)
MQTT伺服器為：wss://test.mosquitto.org:8081
使用網站提供的程式(網頁檔)
<html>
<head>
<title>test Ws mqtt.js</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<script>
var client = mqtt.connect("wss://test.mosquitto.org:8081") // you add a ws:// url here
client.on('connect', ()=>{
console.log('connected.');
client.subscribe("mee")
client.on("message", function (topic, payload) {
console.log(payload);
console.log([topic, payload].join(": "));
// client.end()
});
client.publish("mee", "hello");
});
</script>
</body>
</html>
測試端
採用上面程式，修改伺服器網址 wss://test.mosquitto.org:8081
把程式放到虛擬機來【輸入網址】測試
另外開啟HIVEMQ的網頁版： https://www.hivemq.com/demos/websocket-client/
也可以透過 p5.js Web Editor 來測試
執行上面程式後，HIVEMQ的網頁版有收到資料
MQTT伺服器改為尤大大的MQTTGO為：wss://broker.mqttgo.io:8084/mqtt
使用上面的網頁程式及P5均有成功
MQTT伺服器改為Web:Bit的：
因為這次要來控制凱比機器人，使用WebbitX凱比來寫程式，所以要用到Web:Bit的MQTT伺服器
何服器網址 wss://mqtt1.webduino.io:443/mqtt
Username： webduino、Passeord： webduino
使用法蘭斯的MQTT做測試： https://fustyles.github.io/webduino/webduino_mqtt.html
網頁程式如下：
<html>
<head>
<title>test Ws mqtt.js</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<script>
let options = {
username: 'webduino', // 可讀寫的測試帳戶
password: 'webduino' // 測試帳戶的密碼
}
var client = mqtt.connect(
// test.mosquitto.org 的 wss 使用 8081 埠
"wss://mqtt1.webduino.io:443/mqtt",
options // 連接時指定選項登入
);
client.on('connect', ()=>{
console.log('connected.');
client.subscribe("mee")
client.on("message", function (topic, payload) {
console.log(payload);
console.log([topic, payload].join(": "));
// client.end()
});
client.publish("mee", "hello");
});
</script>
</body>
</html>
可以用 p5.js Web Editor 測試 ，再修改內容
