WebSocket仅本地可用，部署至远程服务器后无法接收进度数据

1. 适配Render平台的反向代理配置 #

Render会自动处理SSL终止和反向代理，你需要调整WebSocket服务器的初始化方式，避免硬编码端口并兼容代理环境：

const WebSocket = require('ws');
const http = require('http');

// 先创建HTTP服务器，再挂载WebSocket服务
const server = http.createServer();
const wss = new WebSocket.Server({ server });

// 监听Render分配的端口（通过环境变量获取，不要硬编码8080）
const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

客户端直接使用 wss://example.onrender.com 即可，无需额外指定端口。

2. 排查客户端连接状态 #

在客户端代码中添加连接状态监听，确认连接是否成功建立：

const ws = new WebSocket('wss://example.onrender.com');

ws.addEventListener('open', () => {
  console.log('WebSocket连接已建立');
});

ws.addEventListener('error', (error) => {
  console.error('WebSocket连接错误:', error);
});

ws.addEventListener('close', (event) => {
  console.log('WebSocket连接关闭:', event.code, event.reason);
});

// 原消息监听逻辑增加异常捕获
ws.addEventListener('message', (event) => {
  try {
    const data = JSON.parse(event.data);
    if (data.type === 'progress') {
      console.log(`Progress: ${data.data}%`);
      this.setState({renderProgress: data.data})
    }
  } catch (err) {
    console.error('消息解析失败:', err);
  }
});

3. 修正进度发送逻辑 #

发送消息前必须验证客户端连接状态，避免向未就绪的客户端发送数据：

wss.clients.forEach((client) => {
  // 仅向已处于OPEN状态的客户端发送消息
  if (client.readyState === WebSocket.OPEN) {
    console.log('当前进度值:', progress);
    client.send(JSON.stringify({ type: 'progress', data: progress }));
  }
});

同时确认progress变量是否有正确的数值输出，可通过日志验证。

4. 应对Render实例休眠问题 #

Render免费实例长时间无请求会自动休眠，若ffmpeg任务启动于WebSocket连接之前，可能导致实例未唤醒：

• 在客户端连接后发送一条初始化消息，触发实例唤醒；
• 若业务需要持续稳定服务，可考虑升级到付费实例。

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