Nginx代理WebSocket实现实时监控看板需正确配置升级请求头、禁用缓冲、延长超时并透传Upgrade/Connection头，确保后端WebSocket端点可用且Nginx不重定向或拦截该路径。
用 Nginx 代理 WebSocket 实现监控看板实时刷新，关键在于正确配置升级请求头、保持长连接、避免超时中断。只要后端服务本身支持 WebSocket，Nginx 只需做透明转发，无需业务逻辑介入。
确保后端服务已暴露 WebSocket 接口
监控看板前端（如 Vue/React 页面）通常通过 ws:// 或 wss:// 连接后端服务，比如：new WebSocket("wss://dashboard.example.com/api/ws/metrics")
后端需提供真实可用的 WebSocket 端点（如基于 Spring Boot 的 /api/ws/metrics，或 Node.js 的 ws 服务），且能处理 Upgrade: websocket 请求。
Nginx 配置必须包含 WebSocket 关键指令
WebSocket 依赖 HTTP 协议升级机制，Nginx 默认会关闭非标准响应头和短连接，因此需显式设置：
- 保留并透传 Upgrade 和 Connection 头：防止 Nginx 过滤掉协议升级必需字段
- 将 Connection 设为 upgrade：让 Nginx 知道这是 WebSocket 升级请求
- 禁用 proxy_buffering：避免 Nginx 缓存流式数据导致延迟或断连
-
调大超时时间：WebSocket 是长连接，需延长
proxy_read_timeout和proxy_send_timeout
示例配置片段：
location /api/ws/ {
proxy_pass http://backend;
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;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
<pre class="brush:php;toolbar:false;">proxy_buffering off;
proxy_cache off;
proxy_redirect off;
proxy_read_timeout 86400; # 保持连接最长 24 小时
proxy_send_timeout 86400;
}
注意 HTTPS/WSS 场景下的证书与协议一致性
若前端使用 wss://，Nginx 必须启用 SSL，并确保证书有效；后端可走 HTTP（内网）或 HTTPS（跨域/安全要求高时）。不要让 WebSocket 请求被重定向或拦截——Nginx 不应返回 301/302，也不应在该路径下配置 return 404 或 deny all。
验证是否生效的简单方法
打开浏览器开发者工具 → Network → 刷新页面 → 查找 WebSocket 连接（Status 显示 101 Switching Protocols），点击查看详情中的 Response Headers，确认含 Upgrade: websocket 和 Connection: upgrade；再在 Console 中执行 ws = new WebSocket("wss://...")，观察 ws.readyState 是否变为 1（OPEN）。
