一個基于原生 WebSocket 的封裝庫，實現了自動重連、心跳檢測等功能，用于在前端應用中穩定地與后端 WebSocket 服務通信。下面從設計思路、關鍵功能等方面進行詳細分析：
設計思路
這個封裝庫采用單例模式設計，全局維護一個 WebSocket 實例，通過狀態管理和事件監聽實現高可用的通信連接。主要特點包括：
集成了心跳機制檢測連接狀態
實現了自動重連邏輯
提供了簡潔的 API 接口
支持自定義配置參數（如重連次數、心跳間隔等）
關鍵功能分析
- 初始化與連接管理
init: (receiveMessage: Function | null) => {// 檢查瀏覽器支持if (!('WebSocket' in window)) {console.error('瀏覽器不支持WebSocket')return null}// 構建連接URL，攜帶用戶認證信息socket.connectURL = `ws://${location.host}/api/websocket/connect?Authorization=${useUserStore().token}`// 創建WebSocket實例并綁定事件socket.websocket = socket.websocket || new WebSocket(socket.connectURL)// 綁定事件處理函數...
}
這部分代碼完成了：
瀏覽器兼容性檢查
連接 URL 構建，從用戶狀態中獲取認證 token
WebSocket 實例的創建和事件綁定
- 心跳檢測機制
heartbeat: () => {if (socket.heartbeatTimer) {clearInterval(socket.heartbeatTimer)}socket.heartbeatTimer = setInterval(() => {if (socket.heartbeatCurrent > socket.heartbeatCount) {clearInterval(socket.heartbeatTimer)socket.reconnect()} else {socket.send('ping')socket.heartbeatCurrent++}}, socket.heartbeatInterval)
}
心跳機制的工作流程：
定期發送 “ping” 消息
接收到 “pong” 響應時重置計數器
連續多次未收到響應時觸發重連
使用指數退避算法避免頻繁重連
- 自動重連實現
reconnect: () => {if (socket.isReconnect) {socket.reconnectTimer = setTimeout(() => {if (socket.reconnectCurrent >= socket.reconnectCount) {socket.isReconnect = falsereturn}socket.reconnectCurrent++console.log('websocket正在重新連接')socket.init(null)}, socket.reconnectInterval)}
}
重連機制的關鍵點：
限制最大重連次數，避免無限重試
使用定時器控制重連間隔
保持重連狀態的跟蹤
- 消息處理
websocket.onmessage = (e: MessageEvent) => {const { data } = e// 心跳檢測if (data === 'pong') {socket.heartbeatCurrent = 0return}if (receiveMessage) {receiveMessage(data)}
}
消息處理邏輯：
區分心跳響應和業務消息
通過回調函數將消息傳遞給上層應用
)
` 和 `{}` 創建對象)
