通过使用支持 MQTT 协议的 JavaScript 库，例如 Eclipse Paho JavaScript Client 或 MQTT.js。这些库允许在浏览器中建立 MQTT 客户端并与 MQTT Broker 通信。
如何在 Web 浏览器中创建 MQTT 客户端？
1. 使用 Eclipse Paho JavaScript Client
- Paho 是一个由 Eclipse 基金会提供的轻量级 JavaScript MQTT 客户端，支持浏览器环境。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MQTT Browser Client</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/mqttws31.min.js"></script>
</head>
<body>
<h1>MQTT Web Client</h1>
<script>
// 创建客户端实例
const client = new Paho.MQTT.Client("broker.emqx.io", 8083, "clientId_" + Math.random());
// 设置回调函数
client.onConnectionLost = function (responseObject) {
if (responseObject.errorCode !== 0) {
console.log("Connection Lost: " + responseObject.errorMessage);
}
};
client.onMessageArrived = function (message) {
console.log("Message Arrived: " + message.payloadString);
};
// 连接到 MQTT Broker
client.connect({
onSuccess: function () {
console.log("Connected to broker");
// 订阅主题
client.subscribe("test/topic");
// 发布消息
const message = new Paho.MQTT.Message("Hello MQTT");
message.destinationName = "test/topic";
client.send(message);
},
onFailure: function (error) {
console.log("Connection Failed: " + error.errorMessage);
}
});
</script>
</body>
</html>
2. 使用 MQTT.js
- MQTT.js 是一个功能更强的 MQTT 客户端库，支持 Node.js 和浏览器端。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MQTT.js Browser Client</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT.js Web Client</h1>
<script>
// 创建客户端实例
const client = mqtt.connect("ws://broker.emqx.io:8083/mqtt");
// 连接成功事件
client.on("connect", () => {
console.log("Connected to broker");
// 订阅主题
client.subscribe("test/topic", (err) => {
if (!err) {
// 发布消息
client.publish("test/topic", "Hello MQTT from MQTT.js");
}
});
});
// 消息到达事件
client.on("message", (topic, message) => {
console.log(`Message Arrived on topic ${topic}: ${message.toString()}`);
});
// 连接断开事件
client.on("close", () => {
console.log("Connection closed");
});
</script>
</body>
</html>
注意事项
- WebSocket 支持：
- 浏览器中的 MQTT 客户端通常使用 WebSocket 协议（
ws://或wss://），而不是原生 MQTT 协议（tcp://）。 - 确保你的 MQTT Broker 开启了 WebSocket 支持。例如，常见的 MQTT Broker 如 EMQX、Mosquitto 等都支持 WebSocket。
- 跨域问题：
- 浏览器可能遇到跨域问题（CORS）。确保 MQTT Broker 的 WebSocket 服务支持跨域请求，或者正确配置服务器的 CORS 策略。
- 安全性：
- 在生产环境中，建议使用安全的 WebSocket 通信（
wss://），并通过认证机制（如用户名、密码或证书）保护通信安全。
适用场景
- 实时消息推送：如通知系统、实时仪表盘。
- 物联网（IoT）：使用浏览器管理设备状态和数据。
- 教育和演示：快速搭建基于 MQTT 的 Web 应用程序。