Lichess项目中的TV嵌入页面WebSocket连接问题分析

在Lichess国际象棋平台开发过程中，开发团队发现了一个关于TV嵌入页面的技术问题。该问题表现为控制台报错"Uncaught TypeError: Cannot read properties of undefined (reading 'then')"，经排查发现是由于WebSocket连接机制出现了异常情况。

问题背景

TV嵌入页面是Lichess平台的一个重要功能，允许用户将实时对局嵌入到其他网站中。按照设计，这个页面本应使用HTTP事件流(Event Stream)来获取棋局移动更新，而不应该尝试建立WebSocket连接。

问题根源

经过代码分析，发现问题源于模块依赖链：

1. TV嵌入页面(site.tvEmbed.ts)依赖了公共的miniBoard组件
2. miniBoard组件又引入了socket模块
3. socket模块在导入时会自动初始化WebSocket连接

这种依赖关系导致TV嵌入页面不必要地加载了WebSocket连接逻辑，从而产生了控制台错误。

潜在影响

这个问题不仅影响了TV嵌入页面的功能，还可能带来以下潜在风险：

1. 其他不应该建立WebSocket连接的页面可能也会受到影响
2. 增加了不必要的网络请求和资源消耗
3. 可能影响页面性能和用户体验

解决方案

开发团队通过以下方式解决了这个问题：

1. 重构模块依赖关系，确保TV嵌入页面不会加载不必要的WebSocket连接逻辑
2. 优化代码结构，使WebSocket连接只在真正需要的页面初始化
3. 添加适当的条件判断，防止在不支持的场景下尝试建立连接

技术启示

这个案例给开发者提供了几个重要的经验教训：

1. 模块依赖关系需要谨慎设计，避免不必要的副作用
2. 自动连接机制需要明确的边界条件
3. 对于关键功能组件，应该进行隔离测试以确保不会产生意外行为

通过这次问题的发现和解决，Lichess团队进一步优化了前端架构，提升了平台的稳定性和性能表现。