前端使用mqtt通信的两种方式

　推荐使用mosquitto来创建一个mqtt客户端，Eclipse Mosquitto的安装步骤如下：

• 下载 Eclipse Mosquitto。

• 安装。在安装过程中，把Mosquitto安装成服务，尽量不要在安装目录中有空格。

• 设置Broker的IP和Port。打开mosquitto.conf，如果不存在该文件，可创建，然后在文件尾部追加行，具体操作是：listener 1883和127.0.0.1。其中，1883是端口，127.0.0.1是IP。 Mosquitto若支持客户端无账号密码验证连接，需要配置mosquitto.conf。打开mosquitto.conf，在尾部添加allow_anonymous true即可。

• 使用Paho MQTT JavaScript Client库：

前端 HTML 通过使用 MQTT 客户端库来实现与 MQTT 设备的通信。以下是一个简单的例子，演示如何连接到 MQTT 代理，并接收来自主题的消息：

// 连接到 MQTT 代理
var client = new Paho.MQTT.Client("broker.hivemq.com", { port: 8883 });
                            
// 连接到 MQTT 代理时执行的回调函数
client.onConnectionStateChange = function(newState) {
    console.log("Connected state: " + newState);
};
                            
// 连接到 MQTT 代理时执行的回调函数
client.onMessageArrvial = function(message) {
    console.log("Received message: " + message.payloadString);
};
                            
// 连接到 MQTT 代理
client.connect({ onSuccess: onConnect });
                            
// 连接到 MQTT 代理后执行的回调函数
function onConnect() {
    console.log("Connected to MQTT broker.");
    client.subscribe("test/topic", { onSuccess: onSubscribe });
}
                            
// 订阅主题后执行的回调函数
function onSubscribe() {
    console.log("Subscribed to test/topic.");
    client.publish("test/topic", "Hello, world!");
}

在这个例子中，我们连接到名为 broker.hivemq.com 的 MQTT 代理，使用 WebSocket 端口号 8883。我们定义了两个回调函数：onConnectionStateChange 和 onMessageArrival。前者在连接状态改变时被调用，后者在接收到消息时被调用。 在 onConnect 函数中，我们订阅了名为 test/topic 的主题，并在 onSubscribe 函数中发布了一条消息到该主题。你可以根据你的需求修改这些代码，例如更改连接的参数、订阅不同的主题或者发布不同的消息。

• 使用WebSocket-MQTT桥接库：

WebSocket是一种用于实时通信的协议，可以与MQTT代理进行通信。可以使用JavaScript中的WebSocket API来创建WebSocket连接，并使用MQTT协议进行通信。可以使用现有的WebSocket-MQTT桥接库，例如mqtt.js或paho-mqtt.js。

WebSocket-MQTT桥接库是在WebSocket和MQTT之间提供转换的中间件。可以使用WebSocket-MQTT桥接库来创建WebSocket连接，并将消息发送到MQTT代理。一些常用的WebSocket-MQTT桥接库包括mqtt.js、paho-mqtt.js和mqttws31.js。 以下是一个使用WebSocket和WebSocket-MQTT桥接库的示例代码：

// 引入WebSocket和WebSocket-MQTT桥接库
const WebSocket = require('websocket').client;
const mqtt = require('mqtt');
                            
// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');
                            
// 连接到MQTT代理
const client = mqtt.connect('mqtt://localhost:1883', {
    clientId: 'websocket-client-setId'
});
                            
// 连接到MQTT代理后执行的回调函数
client.on('connect', function() {
    console.log('Connected to MQTT broker.');
    // 订阅主题
    client.subscribe('test/topic', { onSuccess: onSubscribe });
});
                            
// 订阅主题后执行的回调函数
function onSubscribe() {
    console.log('Subscribed to test/topic.');
    // 发布消息到主题
    client.publish('test/topic', 'Hello, world!');
}

这个例子中，我们首先引入了WebSocket和WebSocket-MQTT桥接库。然后，我们创建了一个WebSocket连接，并使用WebSocket-MQTT桥接库连接到MQTT代理。在连接到MQTT代理后，我们订阅了一个名为test/topic的主题，并在onSubscribe回调函数中发布了一条消息到该主题。你可以根据你的需求修改这些代码，例如更改连接的参数、订阅不同的主题或者发布不同的消息。 /event-stream，并返回一条数据消息。

需要注意的是，这些例子中的代码仅仅是一个基本的例子，实际的代码可能更加复杂和完整。例如，你可能需要处理错误、添加按钮来触发连接和发布等操作，或者根据具体的需求进行修改和优化。