第17章 Mosquitto WebSocket支持

芯智工坊2026-04-11 8:02

第17章 WebSocket支持

17.1 WebSocket over MQTT

WebSocket
TCP/MQTT
浏览器
Mosquitto
原生客户端
协议转换
WebSocket帧
MQTT报文

17.2 配置WebSocket

bash 复制代码

# /etc/mosquitto/mosquitto.conf

# MQTT监听器
listener 1883
protocol mqtt

# WebSocket监听器
listener 9001
protocol websockets
allow_anonymous true

# 或者需要认证
listener 9001
protocol websockets
allow_anonymous false
password_file /etc/mosquitto/passwd

17.3 Web客户端实现

HTML示例

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>MQTT Web Client</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
    <h1>MQTT Dashboard</h1>
    <div>
        <input type="text" id="topic" placeholder="Topic">
        <input type="text" id="message" placeholder="Message">
        <button onclick="publish()">Publish</button>
    </div>
    <div id="output"></div>

    <script>
        const client = mqtt.connect('ws://localhost:9001');

        client.on('connect', () => {
            console.log('Connected');
            client.subscribe('sensor/#');
        });

        client.on('message', (topic, message) => {
            const output = document.getElementById('output');
            output.innerHTML += `<p>${topic}: ${message}</p>`;
        });

        function publish() {
            const topic = document.getElementById('topic').value;
            const message = document.getElementById('message').value;
            client.publish(topic, message);
        }
    </script>
</body>
</html>

Vue.js示例

vue 复制代码

<template>
  <div>
    <h1>MQTT Monitor</h1>
    <div v-for="(msg, index) in messages" :key="index">
      {{ msg.topic }}: {{ msg.payload }}
    </div>
  </div>
</template>

<script>
import mqtt from 'mqtt';

export default {
  data() {
    return {
      client: null,
      messages: []
    };
  },
  mounted() {
    this.client = mqtt.connect('ws://localhost:9001');

    this.client.on('connect', () => {
      this.client.subscribe('sensor/#');
    });

    this.client.on('message', (topic, message) => {
      this.messages.push({
        topic,
        payload: message.toString()
      });
    });
  },
  beforeUnmount() {
    this.client.end();
  }
};
</script>

17.4 跨域配置

bash 复制代码

# 需要反向代理处理跨域

# Nginx配置
location /mqtt {
    proxy_pass http://localhost:9001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

17.5 实时应用案例

传感器
Mosquitto
WebSocket客户端
原生客户端
Web仪表板
实时图表
地图监控

17.6 本章小结

掌握了Mosquitto的WebSocket配置和Web客户端开发。