01

MQTT 与 WebSocket 的融合是物联网（IoT）领域的主流通信方案，核心逻辑是让 MQTT 协议运行在 WebSocket 传输层之上（即 MQTT over WebSocket）。

这种组合既保留了 MQTT 轻量级、低带宽、适配设备端通信的核心优势，又借助 WebSocket 对浏览器/网页端的天然友好性，同时解决了多数网络环境下仅放行 HTTP/WebSocket 端口的网络穿透问题。

本文将从融合原理、部署实现、多端接入、场景价值四个维度，拆解这套方案的落地方法：

02

核心原理：协议分层与分工

MQTT 是基于 TCP/IP 栈的应用层协议，专为设备通信设计；WebSocket 是 HTTP 之上的双向长连接协议，主打浏览器与服务端的实时通信。

二者结合的本质可概括为：
WebSocket 负责打通端到端的网络传输通道，MQTT 负责定义设备间通信的业务规则。

简单来说，WebSocket 解决“数据怎么传”的问题，MQTT 解决“数据传什么、怎么约定”的问题。

03

部署实现：基于 EMQX 的服务端配置

EMQX 是开源高性能 MQTT 消息服务器（Broker），原生支持 MQTT over WebSocket，是物联网场景的首选落地工具。

以下是服务端的核心配置步骤：

3.1 核心参数配置

EMQX 默认开启 WebSocket 监听，无需额外开启，关键配置项可参考如下（修改 emqx.conf 配置文件）：

# 非加密 WebSocket（ws://）监听器配置
listeners.ws.default {
  bind = "0.0.0.0:8083"  # 绑定所有网卡的8083端口，对应MQTT TCP的1883端口
  max_connections = 1024000  # 最大并发连接数，适配大规模设备接入
}

# 加密 WebSocket（wss://）监听器配置
listeners.wss.default {
  bind = "0.0.0.0:8084"  # 加密连接绑定8084端口，对应MQTT TCP的8883端口
  ssl_options {
    certfile = "/etc/emqx/certs/emqx.pem"  # SSL证书文件路径
    keyfile = "/etc/emqx/certs/emqx.key"   # SSL私钥文件路径
  }
}

3.2 启动与验证

1. 启动 EMQX 服务；
2. 访问 EMQX 控制台（默认地址：http://localhost:18083）；
3. 在控制台中查看 WebSocket 监听器状态，确认端口正常监听。

04

多端客户端接入实践

根据终端类型（网页前端、嵌入式设备、后端服务）的不同，接入方式略有差异，但核心是使用支持 MQTT over WebSocket 的客户端库。

4.1 网页前端接入（浏览器端）

浏览器无原生 MQTT 支持，但可通过 WebSocket 连接 EMQX 的 8083 端口，借助 mqtt.js 库实现 MQTT 通信：

步骤1：安装依赖

# 安装mqtt.js客户端库
npm install mqtt --save

步骤2：核心代码实现（附详细注解）

import mqtt from 'mqtt';

// 建立MQTT over WebSocket连接
const client = mqtt.connect('ws://localhost:8083/mqtt', {
  clientId: 'web-client-123',  // 客户端唯一标识，需自定义避免重复
  username: 'admin',           // EMQX默认用户名
  password: 'public',          // EMQX默认密码
  keepalive: 60,               // 心跳间隔（秒），保持连接活跃
});

// 连接成功回调
client.on('connect', () => {
  console.log('WebSocket + MQTT 连接成功');

  // 订阅设备状态主题：监听空调状态
  client.subscribe('device/aircon/status', (err) => {
    if (!err) console.log('订阅device/aircon/status主题成功');
  });

  // 发布控制指令：向空调发送调温指令（26℃）
  client.publish('device/aircon/control', JSON.stringify({ temp: 26 }));
});

// 接收消息回调：处理订阅主题的消息
client.on('message', (topic, payload) => {
  console.log(`收到主题 ${topic} 的消息：${payload.toString()}`);
});

关键注意点

WebSocket 连接地址的路径必须是 /mqtt（EMQX 等主流 Broker 的统一约定），缺少该路径会导致连接失败。

4.2 嵌入式设备接入（如ESP32/Linux设备）

嵌入式设备可通过 C/Python 等语言的 MQTT 客户端库（如 emqx-mqtt-c、paho-mqtt），基于 WebSocket 连接 Broker。

以下是 C 语言（emqx-mqtt-c）的核心示例（附注解）：

#include "emqx_mqtt_c.h"

int main() {
  // 初始化MQTT客户端对象
  mqtt_client_t client;
  mqtt_client_init(&client);

  // 配置连接参数
  mqtt_client_set_port(&client, 8083);          // 指定WebSocket端口
  mqtt_client_set_protocol(&client, MQTT_PROTOCOL_WS); // 协议类型：WebSocket
  mqtt_client_set_host(&client, "localhost");   // Broker地址
  mqtt_client_set_client_id(&client, "device-aircon-456"); // 设备唯一标识

  // 建立连接
  if (mqtt_client_connect(&client) == 0) {
    printf("设备通过WebSocket连接MQTT Broker成功\n");

    // 发布设备状态：上报当前温度26℃
    mqtt_client_publish(&client, "device/aircon/status", "{\"temp\":26}", 0, 0);
  }
  return 0;
}

4.3 后端服务接入（以Python为例）

后端服务可通过 paho-mqtt 库，基于 WebSocket 协议连接 Broker，实现设备管理、消息转发等能力：

import paho.mqtt.client as mqtt

# 连接成功回调函数
def on_connect(client, userdata, flags, rc):
  # rc=0表示连接成功，非0为异常码
  print(f"WebSocket + MQTT 连接成功，状态码：{rc}")
  # 订阅所有设备主题（通配符#表示匹配所有子主题）
  client.subscribe("device/#")

# 接收消息回调函数
def on_message(client, userdata, msg):
  # 打印收到的主题和消息内容
  print(f"收到主题 {msg.topic} 的消息：{msg.payload.decode()}")

# 创建客户端实例，指定transport为websockets
client = mqtt.Client(client_id="server-client-789", transport="websockets")
# 绑定回调函数
client.on_connect = on_connect
client.on_message = on_message
# 设置认证信息
client.username_pw_set("admin", "public")
# 连接Broker（地址+端口+心跳超时时间）
client.connect("localhost", 8083, 60)

# 持续监听消息（阻塞式，保持服务运行）
client.loop_forever()