hzdyjs/docs/技术问题解决记录/SSE生产环境配置问题解决方案.md

SSE生产环境配置问题解决方案

🚨 问题描述

在生产环境中，通过nginx配置后，前端无法正常接收SSE（Server-Sent Events）消息推送。

🔍 问题分析

1. 技术架构分析

后端SSE实现：

• 使用Spring Boot的SseEmitter实现
• SSE端点：/resource/sse
• 支持用户认证和Token验证
• 使用Redis进行消息广播

前端SSE实现：

• 使用Vue 3的useEventSource组合式API
• 自动重连机制（10次重试，3秒间隔）
• 消息处理：显示通知和存储到状态管理

nginx代理配置：

• 当前配置缺少专门的SSE代理处理
• 超时设置可能不够长
• 缺少SSE特定的响应头配置

2. 根本原因

1. nginx配置不完整：缺少专门的SSE代理配置
2. 超时设置不足：SSE是长连接，需要更长的超时时间
3. 响应头配置缺失：SSE需要特定的Content-Type和缓存控制
4. 代理优先级问题：SSE路由可能被其他配置覆盖

🛠️ 解决方案

方案一：优化nginx配置（推荐）

1. 添加专门的SSE代理配置

# SSE专用代理配置（重要：必须放在其他API配置之前）
location ^~ /prod-api/resource/sse {
    proxy_pass http://47.121.125.41:8080/resource/sse;
    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;
    
    # SSE特殊配置
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    proxy_buffering off;
    proxy_cache off;
    
    # SSE需要更长的超时时间
    proxy_connect_timeout 60s;
    proxy_send_timeout 86400s;  # 24小时
    proxy_read_timeout 86400s;  # 24小时
    
    # SSE响应头设置
    proxy_set_header Accept "text/event-stream";
    proxy_set_header Cache-Control "no-cache";
    proxy_set_header Connection "keep-alive";
    
    # CORS处理
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,clientid';
    add_header Access-Control-Allow-Credentials true;
    
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

2. 关键配置说明

• proxy_buffering off：禁用nginx缓冲，确保SSE消息实时传输
• proxy_cache off：禁用缓存，避免消息被缓存
• proxy_read_timeout 86400s：设置24小时超时，支持长连接
• proxy_set_header Connection ""：清除Connection头，避免代理问题
• add_header Access-Control-Allow-Credentials true：支持跨域认证

方案二：修改前端配置

1. 环境变量配置

# 推荐配置：通过nginx代理
VITE_APP_BASE_API = '/prod-api'
VITE_APP_SSE = true
VITE_APP_WEBSOCKET = false

2. 备选配置：直接访问后端

# 备选配置：直接访问后端
VITE_APP_BASE_API = 'http://47.121.125.41:8080'
VITE_APP_SSE = true
VITE_APP_WEBSOCKET = false

📋 部署步骤

1. 更新nginx配置

# 备份原配置
cp /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf.backup

# 更新配置文件
vim /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf

# 测试配置
nginx -t

# 重新加载配置
nginx -s reload

2. 更新前端配置

# 进入前端项目目录
cd /path/to/frontend

# 更新环境变量
vim .env.production

# 重新构建
npm run build

# 部署到nginx目录
cp -r dist/* /root/hzdyjsweb9091/dist/

3. 重启服务

# 重启后端服务（如果需要）
systemctl restart your-backend-service

# 检查nginx状态
systemctl status nginx

🔧 故障排查

1. 检查nginx配置

# 测试nginx配置
nginx -t

# 查看nginx错误日志
tail -f /var/log/nginx/error.log
tail -f /var/log/nginx/hzdyjsweb.camasort.com.error.log

# 查看nginx访问日志
tail -f /var/log/nginx/hzdyjsweb.camasort.com.access.log

2. 检查SSE连接

浏览器开发者工具

1. 打开F12开发者工具
2. 切换到Network面板
3. 筛选XHR/Fetch请求
4. 查找SSE连接（通常显示为EventStream）
5. 检查连接状态和响应头

控制台错误信息

// 检查SSE连接状态
console.log('SSE连接状态:', EventSource.readyState);
// 0: CONNECTING, 1: OPEN, 2: CLOSED

3. 测试SSE端点

直接测试后端

curl -H "Authorization: Bearer YOUR_TOKEN" \
     -H "clientid: e5cd7e4891bf95d1d19206ce24a7b32e" \
     http://47.121.125.41:8080/resource/sse

通过nginx测试

curl -H "Authorization: Bearer YOUR_TOKEN" \
     -H "clientid: e5cd7e4891bf95d1d19206ce24a7b32e" \
     http://hzdyjsweb.camasort.com/prod-api/resource/sse

4. 检查后端SSE服务

查看后端日志

# 查看应用日志
tail -f /path/to/backend/logs/application.log

# 查看SSE相关日志
grep -i "sse" /path/to/backend/logs/application.log

检查Redis连接

# 连接Redis
redis-cli

# 检查SSE主题订阅
SUBSCRIBE global:sse

🎯 验证方法

1. 功能验证

1. 登录系统：确保用户已登录
2. 触发SSE消息：通过工作流或其他功能触发消息推送
3. 检查通知：查看是否收到实时通知
4. 检查控制台：查看SSE连接状态和消息

2. 性能验证

1. 连接稳定性：长时间保持连接，检查是否断开
2. 消息延迟：测试消息推送的实时性
3. 并发连接：测试多用户同时连接的情况

3. 监控指标

• SSE连接数
• 消息推送成功率
• 连接断开频率
• 响应时间

📚 相关文档

• nginx SSE代理配置官方文档
• Spring Boot SSE官方文档
• Vue 3 EventSource使用指南

🔄 后续优化

1. 添加SSE连接监控：监控连接状态和性能
2. 实现连接池管理：优化连接资源使用
3. 添加消息重试机制：提高消息推送可靠性
4. 优化nginx配置：根据实际使用情况调整超时和缓冲设置

---

更新时间：2025-01-03
维护人员：系统管理员
文档版本：v1.0