DigitalOcean应用平台部署Socket.IO遇ERR_SSL_PROTOCOL_ERROR求助

问题根源 #

DigitalOcean应用平台（DO App Platform）采用反向代理架构，所有外部请求通过平台统一的HTTPS端口（443）转发到对应组件，不需要暴露组件的内部端口（如5000、8080）。你的连接失败核心原因：

• 客户端错误使用了本地开发的端口（8080）
• Socket.IO未适配平台的反向代理环境
• 后端硬编码了端口而非使用平台动态分配的端口变量

步骤1：调整后端配置 #

1.1 信任DO平台的反向代理

在Express初始化后添加以下代码，让Socket.IO正确识别平台转发的HTTPS请求头：

app.set('trust proxy', true);

1.2 修改Socket.IO配置适配代理

更新Socket.IO初始化代码，添加路径约束、强制WebSocket传输，并确保CORS规则匹配前端域名：

const server = http.createServer(app);
const io = new Server(server, {  
  cors: {    
    origin: ["https://example.com"], // 替换为你的前端自定义域名
    credentials: true  
  },
  path: '/socket.io', // 固定Socket.IO的请求路径
  transports: ['websocket'], // 强制使用WebSocket协议，避免轮询兼容性问题
  allowEIO3: false // 禁用旧版协议，提升安全性
});

// 保留你的现有中间件代码
const wrap = (middleware: any) => (socket: any, next: any) => middleware(socket.request, {}, next);
io.use(wrap(sessionMiddleware));
io.use(wrap(passport.initialize()));
io.use(wrap(passport.session()));
io.use(wrap(isLoggedIn));
fishingSocket(io, fishingController);

// 监听平台分配的端口，本地开发默认用5000
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

1.3 确认后端路由前缀配置

确保你的后端API路由正确挂载到/api前缀下：

// 所有API路由统一使用/api前缀
app.use('/api', yourApiRouter);

步骤2：调整客户端连接配置 #

更新React客户端的Socket.IO连接代码，移除端口号，使用平台提供的HTTPS端点：

const webSocket = io('https://example.com/api', {  
  withCredentials: true,
  path: '/socket.io', // 与后端Socket.IO的path参数保持一致
  transports: ['websocket']
});

注：如果你的环境变量SERVICE_ENDPOINT已设置为https://example.com/api，直接替换为process.env.SERVICE_ENDPOINT即可。

步骤3：配置DO应用平台的路由规则 #

在DO App Platform控制台的应用设置中添加路由规则：

• 路径：/api/*
• 目标：选择你的后端组件
• 协议：HTTPS

这条规则会将所有https://example.com/api/*的请求转发到后端组件的内部端口。

验证步骤 #

1. 部署修改后的代码到DO平台
2. 访问https://example.com/api确认API服务正常
3. 打开浏览器控制台，检查WebSocket连接日志（应显示wss://example.com/api/socket.io的成功连接记录）

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