如何在客户端渲染的React PWA中实现服务端发起MQTT请求？

你要实现的是用Nginx作为MQTT over WebSocket（wss）的反向代理，让前端PWA只和Nginx通信，再由Nginx转发请求到MQTT容器。以下是具体步骤和关键配置：

1. 配置Nginx反向代理规则 #

在Nginx的HTTPS server块中添加针对MQTT WebSocket的代理规则，核心是处理WebSocket的HTTP升级协议，并保证长连接不被中断：

server {
    listen 443 ssl;
    server_name your-domain.com; # 替换成你的域名

    # 你的SSL证书配置（certificate、certificate_key等）

    location /mqtt {
        # 转发到MQTT容器的WebSocket监听地址
        # 如果MQTT容器用非加密ws协议，用http://mqtt-container:8083
        # 如果MQTT容器本身用wss，用https://mqtt-container:8884
        proxy_pass http://mqtt-container:8083;

        # WebSocket必须的HTTP头配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # 传递客户端真实IP等信息（可选）
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # MQTT长连接超时设置，避免Nginx主动断开连接
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

2. 调整前端MQTT.js连接配置 #

把原来直接连接MQTT服务器的地址，改成Nginx提供的wss路径：

import mqtt from 'mqtt';

// 替换成你的域名，不需要加8883端口，因为Nginx监听443
const client = mqtt.connect('wss://your-domain.com/mqtt', {
    clientId: 'pwa-client-' + Math.random().toString(16).substr(2, 8),
    // 你的MQTT认证信息（username、password等）
});

3. 确保容器网络连通 #

• 如果用Docker Compose部署，把Nginx和MQTT容器放在同一个默认网络中，这样Nginx可以通过容器名（比如上面的mqtt-container）直接访问MQTT服务。
• 如果是手动创建容器，需要显式把两个容器加入同一个Docker网络。

4. 确认MQTT服务器开启WebSocket支持 #

不同MQTT服务器的配置略有差异：

• Mosquitto：在配置文件中添加WebSocket监听

  listener 8083
  protocol websockets
  
  # 如果需要容器内的wss（可选，一般由Nginx做SSL终止即可）
  # listener 8884
  # protocol websockets
  # certfile /path/to/cert.pem
  # keyfile /path/to/key.pem
  

• EMQX：默认开启了ws（8083）和wss（8884）监听，无需额外配置。

推荐搜索关键词 #

• Nginx反向代理MQTT WebSocket
• Docker Nginx MQTT容器代理配置
• MQTT.js 通过Nginx代理连接
• Nginx WebSocket长连接超时设置

内容的提问来源于stack exchange，提问作者Thomas Riley