跳到主要内容
版本：Next

WebSocket/Socket 实时通信

目录​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构概述
  5. 详细组件分析
  6. 依赖分析
  7. 性能考虑
  8. 故障排除指南
  9. 结论

简介​

本文说明lmes-web-base项目中基于SignalR的WebSocket通信机制。重点分析了Socket类的设计架构，包括连接管理、事件注册与注销、消息回调映射等核心功能。文档还解析了自动重连逻辑、响应式控制、静默模式等高级特性，并阐述了与后端Hub服务的交互协议和在Vue组件中的安全使用实践。

项目结构​

lmes-web-base项目中的WebSocket通信功能主要位于src/libs/Socket目录下，包含核心的Socket实现和辅助工具。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts
  • src/libs/Socket/toast.ts

Section sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

核心组件​

WebSocket通信的核心组件包括Socket类、事件管理机制、连接状态管理和用户提示系统。这些组件共同实现了稳定可靠的实时通信功能。

Section sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

架构概述​

系统采用基于SignalR的WebSocket通信架构，实现了客户端与服务器之间的双向实时通信。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

详细组件分析​

Socket类设计架构分析​

连接管理与事件注册​

Socket类提供了完整的连接管理和事件注册机制，确保WebSocket连接的稳定性和事件处理的可靠性。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

消息回调映射与注销机制​

Socket类通过callbackMap维护事件回调的映射关系，确保在重连时能够正确恢复事件监听。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

自动重连逻辑分析​

Socket类实现了智能的自动重连机制，包括指数退避重试策略和连接状态监听。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

响应式控制与静默模式​

Socket类支持响应式控制和静默模式，满足不同场景下的使用需求。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

浏览器锁机制分析​

lockWS方法使用浏览器的Locks API来协调多标签页间的WebSocket连接。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts

依赖分析​

WebSocket通信模块依赖于多个外部库和内部组件，形成了完整的依赖关系网。

Diagram sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts
  • src/libs/Socket/toast.ts
  • package.json

Section sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts
  • src/libs/Socket/toast.ts
  • package.json

性能考虑​

WebSocket通信机制在设计时充分考虑了性能优化，包括连接复用、内存管理和错误处理等方面。

连接复用与资源管理​

通过单例模式和连接池管理，减少不必要的连接创建和销毁开销。

内存泄漏预防​

使用Map数据结构存储回调映射，并在组件销毁时及时清理，防止内存泄漏。

错误处理与用户体验​

集成toast消息提示，提供友好的用户反馈，同时记录详细日志便于问题排查。

故障排除指南​

常见连接问题​

  • 连接失败: 检查网络连接和服务器地址
  • 频繁重连: 检查服务器负载和网络稳定性
  • 消息丢失: 检查回调函数注册和注销是否正确

调试技巧​

  • 查看浏览器控制台日志
  • 使用toast消息跟踪连接状态
  • 检查callbackMap中的事件注册情况

多标签页协调​

当多个标签页同时打开时，使用lockWS机制确保只有一个标签页建立WebSocket连接。

Section sources

  • src/libs/Socket/Socket.ts
  • src/libs/Socket/index.ts
  • src/libs/Socket/toast.ts
  • src/provider/notice.ts

结论​

lmes-web-base 通过 SignalR 实现双向通信，Socket 类负责连接管理、事件注册和自动重连，并处理用户提示及多标签页之间的协调。