2. MQTT over WebSocket桥接

任务目标

配置MQTT网关（以Mosquitto为例）启用WebSocket监听，使浏览器客户端能够通过WebSocket协议完成MQTT消息的订阅与发布，实现浏览器与MQTT Broker之间的双向通信。

环境依赖

• Mosquitto Broker（支持WebSocket，版本≥1.6）
• Node.js（用于运行测试客户端）
• npm包：mqtt（MQTT客户端库，支持WebSocket连接）

实现步骤

1. 配置Mosquitto启用WebSocket

创建或修改Mosquitto配置文件（如mosquitto.conf），添加以下配置：

# 传统MQTT TCP监听（可选，保留默认1883端口）
listener 1883

# WebSocket监听端口
listener 9001
protocol websockets

# 允许匿名访问（测试用）
allow_anonymous true

启动Mosquitto：mosquitto -c mosquitto.conf

2. 浏览器客户端实现

创建index.html，使用MQTT.js库通过WebSocket连接Broker：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MQTT over WebSocket 测试</title>
    <script src="https://unpkg.com/mqtt@5.3.5/dist/mqtt.min.js"></script>
</head>
<body>
    <h3>MQTT WebSocket 桥接测试</h3>
    <div>
        <input id="topic" placeholder="订阅主题" value="test/topic">
        <button onclick="subscribe()">订阅</button>
    </div>
    <div style="margin-top:10px;">
        <input id="publishTopic" placeholder="发布主题" value="test/topic">
        <input id="message" placeholder="消息内容" value="Hello MQTT">
        <button onclick="publish()">发布</button>
    </div>
    <div id="messages" style="margin-top:20px;border:1px solid #ccc;padding:10px;min-height:100px;"></div>

    <script>
        // 通过WebSocket连接MQTT Broker
        const client = mqtt.connect('ws://localhost:9001');

        client.on('connect', function () {
            document.getElementById('messages').innerHTML += '<p style="color:green;">已连接WebSocket</p>';
        });

        client.on('message', function (topic, message) {
            const msgDiv = document.getElementById('messages');
            msgDiv.innerHTML += '<p>收到消息 - 主题: ' + topic + ', 内容: ' + message.toString() + '</p>';
        });

        function subscribe() {
            const topic = document.getElementById('topic').value;
            client.subscribe(topic, function (err) {
                if (!err) {
                    document.getElementById('messages').innerHTML += '<p style="color:blue;">已订阅: ' + topic + '</p>';
                }
            });
        }

        function publish() {
            const topic = document.getElementById('publishTopic').value;
            const msg = document.getElementById('message').value;
            client.publish(topic, msg);
            document.getElementById('messages').innerHTML += '<p>已发布到 ' + topic + ': ' + msg + '</p>';
        }
    </script>
</body>
</html>

3. 验证方法

1. 启动Mosquitto（确保WebSocket端口9001已监听）
2. 用浏览器打开index.html，页面显示“已连接WebSocket”
3. 在“订阅主题”输入框填写test/topic，点击“订阅”，页面显示“已订阅”
4. 在“发布主题”和“消息内容”中分别填写test/topic和测试消息，点击“发布”
5. 观察消息区域：应同时显示“已发布”记录和“收到消息”记录，说明消息经Broker路由后通过WebSocket回传至浏览器

Node.js命令行验证（可选）

若需无浏览器环境验证，可安装mqtt包后运行：

npm install mqtt
node -e "
const mqtt = require('mqtt');
const client = mqtt.connect('ws://localhost:9001');
client.on('connect', () => {
    console.log('WebSocket连接成功');
    client.subscribe('test/topic');
    client.publish('test/topic', 'Node测试消息');
});
client.on('message', (topic, msg) => {
    console.log('收到:', topic, msg.toString());
    client.end();
});
"

预期输出：控制台依次打印“WebSocket连接成功”和“收到: test/topic Node测试消息”。

判定标准

• 浏览器页面能成功建立WebSocket连接（显示连接成功提示）
• 订阅操作无报错，且发布消息后能在同一页面收到该消息的回传
• 若使用Node.js验证，命令行输出与上述预期一致