哈喽，大家好，我是叶子。
在现代Web应用中，实时通信已成为提升用户体验的关键技术。无论是即时聊天、实时通知还是协同编辑，都需要高效稳定的实时通信方案。本文将深入介绍如何在Vue 3项目中基于SockJS和STOMP协议实现一个功能完整的WebSocket通信服务。
技术选型背景
为什么选择SockJS + STOMP组合？
在前端实时通信方案中，我们选择了以下技术组合：
- SockJS：提供WebSocket模拟功能，在浏览器不支持WebSocket时自动降级为HTTP长轮询
- STOMP：简单的文本定向消息协议，为WebSocket提供消息帧格式和订阅模式
- Vue 3 + TypeScript：提供类型安全和响应式编程体验
这种组合既保证了现代浏览器的性能优势，又兼容了旧版浏览器的可用性。
核心架构设计
WebSocket服务类设计
我们设计了一个高度封装的WebSocketService类，集中管理所有实时通信逻辑：
export class WebSocketService {
// 连接状态管理
private client: Client | null = null
private subscriptions: StompSubscription[] = []
// 消息回调系统
private messageCallbacks: ((msg: WebSocketMessage) => void)[] = []
// 连接重试机制
private connectionAttempts = 0
private maxConnectionAttempts = 5
// 认证管理
private satoken: string | null = null
}
关键技术实现
1. 多环境连接配置
针对不同环境提供灵活的连接配置：
const getWebSocketURL = (satoken: string): string => {
if (process.env.NODE_ENV === 'development') {
// 开发环境支持多地址配置
return `http://192.168.112.20:8090/llm/ws?satoken=${satoken}`
} else if (process.env.NODE_ENV === 'production') {
// 生产环境使用统一API网关
return `${app.api}/llm/ws?satoken=${satoken}`
}
}
2. 稳定的连接管理
实现自动重连和连接状态监控：
this.client = new Client({
webSocketFactory: () => socket,
reconnectDelay: 5000, // 5秒重连间隔
heartbeatIncoming: 4000, // 心跳检测
heartbeatOutgoing: 4000,
onStompError: (frame) => {
console.error('STOMP 协议错误:', frame.headers.message)
},
onWebSocketClose: () => {
this.handleDisconnect() // 统一处理断开连接
}
})
3. 双重消息频道订阅
同时处理公共通知和私有消息：
// 公共通知频道
const notificationSub = this.client?.subscribe(
'/topic/notifications',
this.handleNotificationMessage,
{ 'subscription-type': 'notification' }
)
// 私有消息频道
const privateSub = this.client?.subscribe(
'/user/p2p/private',
this.handlePrivateMessage,
{ 'subscription-type': 'private' }
)
4. 用户状态通知系统
实现用户上下线实时通知：
if (resdata.type == 1) { // 上线通知
ElNotification({
title: '上线通知',
type: 'success',
message: `${userName}刚刚上线`,
position: 'bottom-right',
duration: 3000
})
}
if (resdata.type == 0) { // 下线通知
ElNotification({
title: '下线通知',
type: 'danger',
message: `有人刚刚下线`,
position: 'bottom-right',
duration: 3000
})
}
5. 消息回调系统
提供灵活的消息处理机制：
// 注册消息回调
registerCallback(callback: (msg: WebSocketMessage) => void) {
this.messageCallbacks.push(callback)
// 返回取消订阅函数
return () => {
this.messageCallbacks = this.messageCallbacks.filter(cb => cb !== callback)
}
}
// 通知所有回调
private notifyCallbacks(message: WebSocketMessage) {
this.messageCallbacks.forEach(cb => cb(message))
}
最佳实践与优化策略
1. 连接生命周期管理
// 组件卸载时自动清理
onUnmounted(() => {
websocketService.disconnect()
})
// 页面可见性变化时重连
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
websocketService.reconnect()
}
})
2. 消息队列与重发机制
对于关键消息，实现发送队列和确认机制：
async sendMessageWithRetry(destination: string, message: WebSocketMessage, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
if (await this.sendMessage(destination, message)) {
return true
}
await new Promise(resolve => setTimeout(resolve, 1000 * i)) // 指数退避
}
return false
}
3. 类型安全的通信协议
定义完整的TypeScript类型：
export interface WebSocketMessage {
id: number
fromUser: number
toUser: number
type: number // 0-文本 1-文件
ext?: string // 文件扩展名
content: string
timestamp: number
}
// 消息类型常量
export const MessageType = {
TEXT: 0,
FILE: 1
} as const
实际应用场景
该方案已成功应用于多个生产项目：
- 即时聊天系统：支持一对一和群组聊天
- 实时协作平台：多人协同编辑和实时光标位置同步
- 监控仪表盘：实时数据更新和告警通知
- 在线游戏：多玩家状态同步和实时交互
遇到的挑战与解决方案
1. 网络不稳定问题
问题：移动网络环境下连接容易中断
解决方案：
- 实现自动重连机制
- 添加心跳检测保持连接活跃
- 使用指数退避算法避免重连风暴
2. 多标签页状态同步
问题：同一用户打开多个标签页时消息重复
解决方案：
- 使用BroadcastChannel API同步标签页状态
- 服务端标记已读状态
3. 大文件传输优化
问题：WebSocket不适合直接传输大文件
解决方案：
- 大文件使用分片上传
- 通过WebSocket只传输文件元数据和进度信息
性能优化建议
- 消息压缩：对文本消息进行Gzip压缩
- 批量处理：对高频小消息进行批量发送
- 连接共享：多个组件复用同一WebSocket连接
- 内存管理：及时清理不再使用的消息回调
总结
本文介绍的WebSocket实时通信方案具有以下优势：
- 兼容性强：通过SockJS支持各种浏览器环境
- 协议规范：使用STOMP提供清晰的消息模式
- 稳定可靠：内置重连机制和心跳检测
- 扩展灵活：模块化设计易于扩展新功能
- 类型安全：完整TypeScript支持提高开发效率
这种实现方式为现代Web应用提供了稳定可靠的实时通信基础，开发者可以根据具体业务需求进一步扩展功能。
欢迎在评论区分享你在实时通信项目中的经验与挑战！
