生产环境同时运行Next.js与Yjs WebSocket启动命令问题

1. 补全Yjs WebSocket服务的启动参数 #

开发环境你指定了HOST=localhost PORT=1234，但生产环境启动命令npx y-websocket缺少这两个关键配置：

• 默认情况下，y-websocket的HOST是0.0.0.0（允许外部访问），但如果前端代码硬编码了localhost，在生产环境中浏览器会把localhost解析为用户本地机器，而非你的服务器，导致连接失败。
• 修改生产启动命令，明确指定HOST和PORT：

  concurrently "next start" "HOST=0.0.0.0 PORT=1234 npx y-websocket" --kill-others
  

2. 修正前端Yjs客户端的连接地址 #

开发环境用ws://localhost:1234没问题，但生产环境必须替换为服务器的公网IP或域名：

// 替换你的Yjs连接代码
const provider = new WebsocketProvider(
  'ws://你的服务器公网IP或域名:1234',
  'your-room-name',
  doc,
);

更灵活的方式是用环境变量配置：

• 在.env.production中添加：

  NEXT_PUBLIC_YJS_WS_URL=ws://你的服务器公网IP或域名:1234
  

• 代码中引用变量：

  const provider = new WebsocketProvider(
    process.env.NEXT_PUBLIC_YJS_WS_URL,
    'your-room-name',
    doc,
  );
  

3. 配置跨域规则（若域名/端口不一致） #

如果Next.js生产域名和Yjs服务的地址不同，浏览器同源策略会阻止连接，需给Yjs服务配置CORS：

• 创建y-websocket.config.js文件：

  module.exports = {
    cors: {
      origin: "https://你的Next.js生产域名", // 允许的前端域名
      methods: ["GET", "POST"]
    }
  };
  

• 修改启动命令加载配置：

  concurrently "next start" "HOST=0.0.0.0 PORT=1234 npx y-websocket --config ./y-websocket.config.js" --kill-others
  

4. 检查服务器端口开放状态 #

确保服务器的1234端口已开放：

• 云服务器需在安全组中添加入站规则，允许TCP端口1234的外部访问；
• 本地服务器需关闭防火墙对1234端口的限制。

5. 验证Yjs服务可用性 #

启动生产环境后，用wscat测试服务是否正常：

# 先安装wscat
npm install -g wscat
# 连接测试
wscat -c ws://你的服务器公网IP:1234

若能成功连接，说明服务无问题，需排查前端代码的地址配置。

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