多用户协作时嵌入Vue的Etherpad实例频繁断开连接求助

问题描述 #

在Vue组件中通过iframe嵌入多台Etherpad编辑器实例，单用户操作正常，但多用户协作时所有用户都会收到断开连接弹窗；某用户点击「强制重新连接」后，弹窗会出现在其他用户端，最终仅一人可同时编辑。组件代码示例：

<!-- Etherpad.vue (页面组件) -->
<div>
  <iframe src="https://mydomain.in/p/1505-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
  <iframe src="https://mydomain.in/p/1506-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
  <iframe src="https://mydomain.in/p/1507-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
</div>

环境信息 #

• Vue：2.6.11
• Node.js：13.14.0
• Etherpad版本：1.8.16
• Web服务器：Nginx
• 浏览器：Chrome
• 认证方式：自定义JWT验证（通过iframe URL传递）
• Etherpad数据库：PostgreSQL（独立部署）
• 部署架构：Etherpad与Vue同域，Nginx反向代理，根路径服务Vue，/p/路径转发至Etherpad节点

已尝试操作 #

• 本地跨浏览器测试正常
• 不同公网IP用户测试出现断开弹窗
• 查阅资料提及需调整连接限制，但未找到明确配置项
• 输入单句也会触发问题，排除长文本粘贴导致的异常

调试方向与解决方案 #

1. 修复Nginx反向代理的WebSocket转发配置 #

Etherpad依赖WebSocket实现实时协作，Nginx默认未正确处理WebSocket升级请求，需在/p/的location配置中添加WebSocket支持：

location /p/ {
    proxy_pass http://your-etherpad-node-ip:9001; # 替换为你的Etherpad节点地址
    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;
    # 增加超时时间，避免连接被Nginx主动断开
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;
}

修改后重启Nginx生效。

2. 调整Etherpad的连接与会话配置 #

编辑Etherpad根目录下的settings.json文件，修改以下参数：

• 放宽单Pad连接限制：

  "maxClientsPerPad": 100, # 根据协作人数调整，默认可能较低
  

• 优化WebSocket心跳参数：避免因网络波动误判断开

  "socketIo": {
    "pingTimeout": 30000, # 心跳超时时间，单位毫秒
    "pingInterval": 10000 # 心跳发送间隔，单位毫秒
  }
  

• 开启反向代理信任：

  "trustProxy": true, # 告知Etherpad通过反向代理获取真实客户端IP
  

修改后重启Etherpad服务。

3. 解决JWT认证的会话冲突问题 #

• 每个用户使用唯一JWT Token：当前所有iframe共享同一个token=uuid，Etherpad会识别为同一用户多端登录，导致会话互踢。需为每个协作用户生成独立的JWT，包含唯一的用户ID标识。
• 区分协作用户的userName：所有iframe的userName=jo会导致Etherpad无法区分不同协作用户，需为每个用户设置唯一的userName（如用户真实姓名或ID）。

4. 排查浏览器Cookie与会话问题 #

• 检查Etherpad的Cookie配置：确保settings.json中的sessionCookieName与Vue应用的Cookie名称无冲突，同时设置合理的cookieSameSite属性：

  "sessionCookieName": "etherpad_session",
  "cookieSameSite": "Lax", # 根据同域场景调整，可选Lax/None/Strict
  

• 验证iframe的Cookie共享：在浏览器开发者工具的Application标签下，检查iframe对应的Cookie是否正常加载，无跨域或权限问题。

5. 查看日志定位具体错误 #

• Etherpad日志：查看logs/etherpad.log，重点关注连接断开、认证失败、会话冲突相关的错误信息。
• Nginx日志：检查access.log和error.log，确认WebSocket请求是否被正确转发，无4xx/5xx错误。
• 浏览器控制台：打开开发者工具的Console标签，查看是否有WebSocket连接失败、认证错误的提示。

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