js 连接mqtt

在JavaScript中连接MQTT服务器通常需要使用MQTT客户端库，因为Web浏览器原生并不支持MQTT协议。一个流行的库是mqtt.js，但它主要用于Node.js环境。然而，对于浏览器环境，可以使用mqtt.js的浏览器版本，或者利用WebSocket API直接连接到支持MQTT over WebSocket的服务器（大多数现代MQTT服务器都支持这种方式）。

以下是一个使用mqtt.js（通过WebSocket在浏览器中）连接到MQTT服务器的示例。请注意，为了在浏览器中运行，可能需要通过CDN或构建工具（如Webpack）来引入mqtt.js的浏览器版本。

首先，需要在HTML文件中引入mqtt.js。如果使用的是npm和Webpack，可以直接在JavaScript文件中import它。但如果只是想快速测试，可以使用CDN链接：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>MQTT Client Example</title>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.3.7/mqtt.min.js"></script>  
</head>  
<body>  
    <script>  
        // MQTT服务器地址  
        var mqttUrl = 'wss://broker.hivemq.com/mqtt'; // 使用wss协议进行加密连接  
        // MQTT连接选项  
        var options = {  
            clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),  
            clean: true,  
            connectTimeout: 4000,  
            reconnectPeriod: 1000,  
            rejectUnauthorized: false // 如果MQTT服务器使用的是自签名证书，则需要设置为false  
        };  
  
        // 创建一个MQTT客户端实例  
        var client = mqtt.connect(mqttUrl, options);  
  
        // 连接成功  
        client.on('connect', function () {  
            console.log('Connected');  
            // 订阅主题  
            client.subscribe('topic/test', function (err) {  
                if (!err) {  
                    console.log('Subscribed');  
                }  
            });  
  
            // 发送消息  
            client.publish('topic/test', 'Hello MQTT');  
        });  
  
        // 接收消息  
        client.on('message', function (topic, message) {  
            // message is Buffer  
            console.log(message.toString());  
            client.end(); // 接收完消息后断开连接  
        });  
  
        // 连接失败  
        client.on('error', function (err) {  
            console.log('Connection error: ', err);  
        });  
  
        // 连接关闭  
        client.on('close', function () {  
            console.log('Connection closed');  
        });  
  
        // 如果需要，可以在某个时间点断开连接  
        // client.end();  
    </script>  
</body>  
</html>

注意：

1. 上面的示例使用了wss://协议来连接到MQTT服务器，这意味着它是通过WebSocket Secure（即WebSocket的加密版本）进行连接的。如果连接的MQTT服务器不支持wss://，可能需要将其更改为ws://（但请注意，这样做会牺牲安全性）。

2. clientId是每个MQTT客户端的唯一标识符。在上面的示例中，使用了Math.random()来生成一个随机的客户端ID，但在生产环境中，可能希望使用更有意义的ID。

3. 示例中使用的MQTT服务器是broker.hivemq.com，这是一个公共的MQTT服务器，可以用它来测试MQTT客户端。但是，对于生产环境，应该使用自己的MQTT服务器。

4. 如果MQTT服务器使用的是自签名证书，可能需要将rejectUnauthorized选项设置为false，但这会导致连接不安全。在生产环境中，应该使用由受信任的证书颁发机构签名的证书。