WebSocket 客户端开发：浏览器实战

原创

于 2025-01-05 15:30:22 发布 · 634 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #前端 #React

在前两篇文章中,我们深入探讨了 WebSocket 的基础原理和服务端开发。今天,让我们把目光转向客户端,看看如何在浏览器中构建强大的 WebSocket 客户端。我曾在一个实时协作项目中,通过优化 WebSocket 客户端的重连机制和消息队列,使得用户即使在网络不稳定的情况下也能保持良好的体验。

基础架构设计

一个可靠的 WebSocket 客户端需要考虑以下几个关键点：

连接管理
消息处理
重连机制
心跳检测
错误处理

让我们从基础架构开始：

// websocket-client.js
class WebSocketClient {
  constructor(url, options = {}) {
    this.url = url
    this.options = {
      reconnectInterval: 1000,
      maxReconnectAttempts: 5,
      heartbeatInterval: 30000,
      ...options
    }

    this.handlers = new Map()
    this.messageQueue = []
    this.reconnectAttempts = 0
    this.isConnecting = false
    this.heartbeatTimer = null

    this.connect()
  }

  // 建立连接
  connect() {
    if (this.isConnecting) return

    this.isConnecting = true

    try {
      this.ws = new WebSocket(this.url)
      this.setupEventListeners()
    } catch (error) {
      console.error('Connection error:', error)
      this.handleReconnect()
    }
  }

  // 设置事件监听
  setupEventListeners() {
    this.ws.onopen = () => {
      console.log('Connected to WebSocket server')
      this.isConnecting = false
      this.reconnectAttempts = 0

      // 启动心跳
      this.startHeartbeat()

      // 处理队列中的消息
      this.processMessageQueue()

      // 触发连接事件
      this.emit('connect')
    }

    this.ws.onclose = () => {
      console.log('Disconnected from WebSocket server')
      this.cleanup()
      this.handleReconnect()

      // 触发断开事件
      this.emit('disconnect')
    }

    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error)
      this.emit('error', error)
    }

    this.ws.onmessage = (event) => {
      try {
        const message = JSON.parse(event.data)
        this.handleMessage(message)
      } catch (error) {
        co