一、下载网页实现MQTT的js包
1、从<官网>按照如下图所示步骤下载MQTT的JS包
2、直接从我的云盘获取
链接:https://pan.baidu.com/s/1iTcSBmM_J4ZI9OK58qfe3w
提取码:d92l
复制这段内容后打开百度网盘手机App,操作更方便哦
二、关于js包
paho-mqtt.js
完整功能;paho-mqtt-min.js
不支持SSL
咱们使用的是paho-mqtt.js
。
三、目录结构
1、总体目录结构
2、代码实现
下面使用WebSockets连接到服务器并订阅主题World
。注意要替换自己的服务器IP、自己的用户名和密码,而端口号必须为8083。
订阅主题中的所有消息都将被打印到Javascript控制台。
使用WebSocket和TCP之间转发的网关。
最终代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MQTT WebDemo</title>
<script src="paho-mqtt.js" type="text/javascript"></script> <!-- 引入JS包 -->
<script>
// Create a client instance
client = new Paho.MQTT.Client("×××IP××", Number(8083), "clientId");
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// connect the client
client.connect({onSuccess:onConnect,userName:"clay",password:"11223344"});
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log("onConnect");
client.subscribe("World");
message = new Paho.MQTT.Message("Hello");
message.destinationName = "World";
client.send(message);
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
// called when a message arrives
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.payloadString);
}
</script>>
</head>
<body>
</body>
</html>
四、运行
1、设置MQTT调试助手如下图所示
订阅主题必须是World
扫描二维码关注公众号,回复:
9612882 查看本文章
2、打开index.html网页,并点击F12打开开发者模式如下图所示
在右下角的console可以看到控制台打印信息。