87. WebSocket实时通信

概述

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向客户端推送数据，实现了真正的实时通信。在现代Web应用中，WebSocket被广泛应用于聊天应用、实时数据监控、协作编辑等场景。本集将深入探讨WebSocket的核心概念、协议原理，以及如何在Vue 3项目中集成和使用WebSocket。我们将学习如何创建WebSocket连接、处理消息收发、实现重连机制，以及如何结合Vue 3的响应式系统实现实时数据更新。

核心知识点

1. WebSocket基础

1.1 WebSocket简介

WebSocket是HTML5引入的一种新的通信协议，它允许浏览器和服务器之间建立持久的连接，实现双向实时通信。与HTTP协议相比，WebSocket具有以下特点：

• 全双工通信：服务器和客户端可以同时发送数据
• 持久连接：连接一旦建立，保持打开状态，避免了HTTP的频繁连接开销
• 低延迟：减少了HTTP请求的头部开销，降低了通信延迟
• 跨域支持：支持跨域通信，通过CORS机制进行控制
• 二进制支持：可以传输文本和二进制数据

1.2 WebSocket协议握手

WebSocket连接的建立过程包括一个HTTP握手阶段：

1. 客户端发送HTTP请求，包含Upgrade头，请求升级到WebSocket协议
2. 服务器响应101 Switching Protocols，确认协议升级
3. 连接建立，开始全双工通信

握手请求示例：

GET /ws-endpoint HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

握手响应示例：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

2. WebSocket API使用

2.1 创建WebSocket连接

// 创建WebSocket连接
const ws = new WebSocket('ws://localhost:8080/ws')

// 连接打开事件
ws.onopen = (event) => {
  console.log('WebSocket连接已打开', event)
  // 发送消息
  ws.send('Hello, WebSocket!')
}

// 接收消息事件
ws.onmessage = (event) => {
  console.log('收到消息:', event.data)
}

// 连接关闭事件
ws.onclose = (event) => {
  console.log('WebSocket连接已关闭', event)
}

// 连接错误事件
ws.onerror = (error) => {
  console.error('WebSocket错误:', error)
}

2.2 发送和接收数据

// 发送文本数据
ws.send('Hello, WebSocket!')

// 发送JSON数据
const data = { type: 'message', content: 'Hello' }
ws.send(JSON.stringify(data))

// 接收数据
ws.onmessage = (event) => {
  // 接收文本数据
  const textData = event.data
  console.log('文本数据:', textData)
  
  // 接收JSON数据
  try {
    const jsonData = JSON.parse(event.data)
    console.log('JSON数据:', jsonData)
  } catch (error) {
    console.error('解析JSON失败:', error)
  }
  
  // 接收二进制数据
  if (event.data instanceof Blob) {
    console.log('二进制数据(Blob):', event.data)
  } else if (event.data instanceof ArrayBuffer) {
    console.log('二进制数据(ArrayBuffer):', event.data)
  }
}

2.3 关闭连接

// 关闭连接
ws.close()

// 带状态码和原因关闭连接
ws.close(1000, '正常关闭')

// WebSocket关闭状态码
// 1000: 正常关闭
// 1001: 端点正在离开
// 1002: 端点由于协议错误而关闭
// 1003: 端点由于不接受的数据类型而关闭
// 1005: 没有状态码的关闭
// 1006: 连接异常关闭
// 1007: 由于不一致的数据而关闭
// 1008: 由于违反政策而关闭
// 1009: 消息过大而关闭
// 1010: 由于缺少扩展而关闭
// 1011: 由于内部错误而关闭
// 1012: 服务重启
// 1013: 服务暂时不可用
// 1014: 无法解析主机
// 1015: TLS握手失败

3. 在Vue 3中使用WebSocket

3.1 基本使用方式

<!-- src/components/ChatComponent.vue -->
<template>
  <div class="chat-container">
    <h2>实时聊天</h2>
    <div class="messages" ref="messagesContainer">
      <div v-for="message in messages" :key="message.id" class="message">
        <div class="message-sender">{{ message.sender }}:</div>
        <div class="message-content">{{ message.content }}</div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>
    <div class="input-area">
      <input 
        type="text" 
        v-model="inputMessage" 
        placeholder="输入消息..." 
        @keyup.enter="sendMessage"
      />
      <button @click="sendMessage">发送</button>
    </div>
    <div class="status">
      连接状态: <span :class="{ 'connected': isConnected, 'disconnected': !isConnected }">
        {{ isConnected ? '已连接' : '未连接' }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'

const messages = ref<any[]>([])
const inputMessage = ref('')
const isConnected = ref(false)
const messagesContainer = ref<HTMLElement | null>(null)
let ws: WebSocket | null = null
let reconnectTimer: number | null = null

// 连接WebSocket
const connectWebSocket = () => {
  try {
    ws = new WebSocket('ws://localhost:8080/chat')
    
    ws.onopen = () => {
      console.log('WebSocket连接已打开')
      isConnected.value = true
      // 清除重连定时器
      if (reconnectTimer) {
        clearTimeout(reconnectTimer)
        reconnectTimer = null
      }
    }
    
    ws.onmessage = (event) => {
      try {
        const message = JSON.parse(event.data)
        messages.value.push(message)
        // 滚动到底部
        scrollToBottom()
      } catch (error) {
        console.error('解析消息失败:', error)
      }
    }
    
    ws.onclose = () => {
      console.log('WebSocket连接已关闭')
      isConnected.value = false
      // 尝试重连
      reconnect()
    }
    
    ws.onerror = (error) => {
      console.error('WebSocket错误:', error)
      isConnected.value = false
    }
  } catch (error) {
    console.error('连接WebSocket失败:', error)
    isConnected.value = false
  }
}

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim() || !ws || ws.readyState !== WebSocket.OPEN) {
    return
  }
  
  const message = {
    id: Date.now(),
    sender: '我',
    content: inputMessage.value.trim(),
    time: new Date().toLocaleTimeString()
  }
  
  ws.send(JSON.stringify(message))
  inputMessage.value = ''
}

// 重连机制
const reconnect = () => {
  if (!reconnectTimer) {
    reconnectTimer = window.setTimeout(() => {
      console.log('尝试重新连接WebSocket...')
      connectWebSocket()
    }, 3000)
  }
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 监听消息变化，自动滚动
watch(messages, () => {
  scrollToBottom()
})

// 组件挂载时连接WebSocket
onMounted(() => {
  connectWebSocket()
})

// 组件卸载时关闭WebSocket
onUnmounted(() => {
  if (ws) {
    ws.close()
    ws = null
  }
  if (reconnectTimer) {
    clearTimeout(reconnectTimer)
    reconnectTimer = null
  }
})
</script>

<style scoped>
.chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.message-sender {
  font-weight: bold;
  color: #409eff;
}

.message-content {
  margin: 5px 0;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
}

.input-area {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}

.status {
  margin-top: 10px;
  font-size: 14px;
}

.connected {
  color: #67c23a;
}

.disconnected {
  color: #f56c6c;
}
</style>

3. WebSocket封装与管理

3.1 封装WebSocket客户端

为了在多个组件中复用WebSocket功能，我们可以封装一个WebSocket客户端类：

// src/utils/websocket.ts
interface WSOptions {
  url: string
  reconnectInterval?: number
  maxReconnectAttempts?: number
  onOpen?: (event: Event) => void
  onMessage?: (data: any) => void
  onClose?: (event: CloseEvent) => void
  onError?: (error: Event) => void
}

export class WSClient {
  private url: string
  private reconnectInterval: number
  private maxReconnectAttempts: number
  private ws: WebSocket | null = null
  private reconnectAttempts: number = 0
  private reconnectTimer: number | null = null
  private isConnecting: boolean = false
  private messageQueue: any[] = []
  private callbacks: {
    onOpen?: (event: Event) => void
    onMessage?: (data: any) => void
    onClose?: (event: CloseEvent) => void
    onError?: (error: Event) => void
  } = {}

  constructor(options: WSOptions) {
    this.url = options.url
    this.reconnectInterval = options.reconnectInterval || 3000
    this.maxReconnectAttempts = options.maxReconnectAttempts || 5
    
    // 保存回调函数
    if (options.onOpen) this.callbacks.onOpen = options.onOpen
    if (options.onMessage) this.callbacks.onMessage = options.onMessage
    if (options.onClose) this.callbacks.onClose = options.onClose
    if (options.onError) this.callbacks.onError = options.onError
  }

  // 连接WebSocket
  connect(): void {
    if (this.ws?.readyState === WebSocket.OPEN || this.isConnecting) {
      return
    }

    this.isConnecting = true
    
    try {
      this.ws = new WebSocket(this.url)
      
      this.ws.onopen = (event) => {
        console.log('WebSocket连接已打开')
        this.isConnecting = false
        this.reconnectAttempts = 0
        this.flushMessageQueue()
        if (this.callbacks.onOpen) {
          this.callbacks.onOpen(event)
        }
      }
      
      this.ws.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data)
          if (this.callbacks.onMessage) {
            this.callbacks.onMessage(data)
          }
        } catch (error) {
          console.error('解析WebSocket消息失败:', error)
        }
      }
      
      this.ws.onclose = (event) => {
        console.log('WebSocket连接已关闭')
        this.isConnecting = false
        if (this.callbacks.onClose) {
          this.callbacks.onClose(event)
        }
        this.tryReconnect()
      }
      
      this.ws.onerror = (error) => {
        console.error('WebSocket错误:', error)
        if (this.callbacks.onError) {
          this.callbacks.onError(error)
        }
      }
    } catch (error) {
      console.error('连接WebSocket失败:', error)
      this.isConnecting = false
      this.tryReconnect()
    }
  }

  // 断开连接
  disconnect(): void {
    if (this.ws) {
      this.ws.close()
      this.ws = null
    }
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer)
      this.reconnectTimer = null
    }
    this.reconnectAttempts = 0
    this.isConnecting = false
  }

  // 发送消息
  send(data: any): void {
    const jsonData = JSON.stringify(data)
    
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(jsonData)
    } else {
      // 连接未打开，加入消息队列
      this.messageQueue.push(jsonData)
      // 尝试连接
      this.connect()
    }
  }

  // 尝试重连
  private tryReconnect(): void {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.log('达到最大重连次数，停止重连')
      return
    }
    
    this.reconnectAttempts++
    console.log(`尝试重连 ${this.reconnectAttempts}/${this.maxReconnectAttempts}...`)
    
    this.reconnectTimer = window.setTimeout(() => {
      this.connect()
    }, this.reconnectInterval)
  }

  // 刷新消息队列
  private flushMessageQueue(): void {
    if (this.ws?.readyState === WebSocket.OPEN && this.messageQueue.length > 0) {
      this.messageQueue.forEach((message) => {
        this.ws?.send(message)
      })
      this.messageQueue = []
    }
  }

  // 获取连接状态
  getReadyState(): number | null {
    return this.ws?.readyState || null
  }

  // 是否连接中
  isConnected(): boolean {
    return this.ws?.readyState === WebSocket.OPEN
  }
}

// 导出单例实例
export const wsClient = new WSClient({
  url: import.meta.env.VITE_WEBSOCKET_URL || 'ws://localhost:8080/ws'
})

3.2 在组件中使用封装的WebSocket客户端

<!-- src/components/ChatComponent.vue -->
<template>
  <!-- 模板内容与之前类似 -->
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { wsClient } from '../utils/websocket'

const messages = ref<any[]>([])
const inputMessage = ref('')
const isConnected = ref(false)
const messagesContainer = ref<HTMLElement | null>(null)

// 处理WebSocket消息
const handleWebSocketMessage = (message: any) => {
  messages.value.push(message)
  scrollToBottom()
}

// 发送消息
const sendMessage = () => {
  if (!inputMessage.value.trim()) return
  
  const message = {
    id: Date.now(),
    sender: '我',
    content: inputMessage.value.trim(),
    time: new Date().toLocaleTimeString(),
    type: 'chat'
  }
  
  wsClient.send(message)
  inputMessage.value = ''
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 监听消息变化
watch(messages, () => {
  scrollToBottom()
})

// 组件挂载时初始化WebSocket
onMounted(() => {
  // 设置消息回调
  wsClient.connect()
  
  // 监听连接状态
  const checkConnectionStatus = () => {
    isConnected.value = wsClient.isConnected()
  }
  
  // 定期检查连接状态
  const statusInterval = setInterval(checkConnectionStatus, 1000)
  
  // 添加消息监听器
  const messageListener = (event: MessageEvent) => {
    try {
      const data = JSON.parse(event.data)
      handleWebSocketMessage(data)
    } catch (error) {
      console.error('解析消息失败:', error)
    }
  }
  
  // 注意：这里需要修改WSClient类，添加添加/移除监听器的方法
  // wsClient.addEventListener('message', messageListener)
  
  onUnmounted(() => {
    clearInterval(statusInterval)
    // wsClient.removeEventListener('message', messageListener)
  })
})
</script>

4. WebSocket与Vuex/Pinia集成

4.1 与Pinia集成

// src/stores/websocket.ts
import { defineStore } from 'pinia'
import { wsClient } from '../utils/websocket'

export const useWebSocketStore = defineStore('websocket', {
  state: () => ({
    messages: [] as any[],
    isConnected: false,
    connectionStatus: 'disconnected' as 'connecting' | 'connected' | 'disconnected' | 'error'
  }),
  
  actions: {
    // 初始化WebSocket
    initWebSocket() {
      this.connectionStatus = 'connecting'
      
      // 设置WebSocket回调
      const client = wsClient
      
      // 连接WebSocket
      client.connect()
      
      // 定期检查连接状态
      const checkStatus = () => {
        this.isConnected = client.isConnected()
        this.connectionStatus = this.isConnected ? 'connected' : 'disconnected'
      }
      
      setInterval(checkStatus, 1000)
      
      // 添加消息监听器
      // 注意：需要修改WSClient类，添加消息监听器管理
      // client.on('message', (message) => {
      //   this.messages.push(message)
      // })
    },
    
    // 发送消息
    sendMessage(message: any) {
      wsClient.send(message)
    },
    
    // 断开连接
    disconnectWebSocket() {
      wsClient.disconnect()
      this.connectionStatus = 'disconnected'
      this.isConnected = false
    }
  }
})

在组件中使用：

<template>
  <!-- 模板内容 -->
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useWebSocketStore } from '../stores/websocket'

const wsStore = useWebSocketStore()

onMounted(() => {
  // 初始化WebSocket
  wsStore.initWebSocket()
})

// 发送消息
const sendMessage = () => {
  wsStore.sendMessage({
    type: 'chat',
    content: 'Hello'
  })
}
</script>

5. WebSocket安全

5.1 使用WSS协议

在生产环境中，应该使用WSS（WebSocket Secure）协议，它基于TLS/SSL加密，确保通信安全。

const ws = new WebSocket('wss://example.com/ws')

5.2 身份验证

WebSocket连接可以通过以下方式进行身份验证：

• URL参数：在URL中添加token参数，如 ws://example.com/ws?token=xxx
• HTTP头部：在握手阶段添加认证头
• 消息认证：在消息中包含认证信息
• Cookie认证：利用浏览器自动携带的Cookie

5.3 跨域安全

WebSocket遵循同源策略，但可以通过CORS机制支持跨域通信。服务器需要设置适当的CORS头，允许客户端访问。

5.4 防止恶意攻击

• 消息大小限制：限制单个消息的大小，防止DoS攻击
• 连接频率限制：限制单个IP的连接数量
• 消息速率限制：限制客户端发送消息的频率
• 输入验证：验证所有接收的消息，防止注入攻击

6. WebSocket替代方案

在某些场景下，WebSocket可能不是最佳选择，可以考虑以下替代方案：

6.1 Server-Sent Events (SSE)

SSE是一种单向通信协议，允许服务器向客户端推送数据，但客户端不能向服务器发送数据。SSE基于HTTP协议，实现简单，适合只需要服务器推送数据的场景。

6.2 Long Polling

长轮询是一种模拟实时通信的技术，客户端发送HTTP请求，服务器保持连接打开，直到有数据可用或超时。适合WebSocket不可用的环境。

6.3 MQTT

MQTT是一种轻量级的发布/订阅消息协议，适合物联网设备和带宽受限的场景。

6.4 SignalR

SignalR是ASP.NET Core中的实时通信库，它自动选择最佳的通信方式（WebSocket、SSE、Long Polling）。

最佳实践

1. 连接管理

• 实现自动重连机制，处理网络波动
• 设置合理的重连间隔和最大重连次数
• 监控连接状态，向用户提供反馈
• 在组件卸载时正确关闭连接

2. 消息处理

• 统一消息格式，包含类型、时间戳等元数据
• 对所有消息进行JSON序列化和反序列化
• 实现消息队列，处理连接未打开时的消息发送
• 对消息进行验证，防止恶意数据

3. 性能优化

• 限制消息大小，避免发送过大的数据
• 批量发送消息，减少网络开销
• 使用二进制数据格式，减少数据大小
• 实现消息压缩，减少传输数据量

4. 安全性

• 在生产环境中使用WSS协议
• 实现适当的身份验证和授权机制
• 限制连接频率和消息速率
• 验证所有输入数据，防止注入攻击

5. 架构设计

• 封装WebSocket客户端，提供统一的API
• 与状态管理库（Pinia/Vuex）集成，管理实时数据
• 实现消息类型系统，便于扩展
• 考虑使用WebSocket网关，处理负载均衡和路由

常见问题与解决方案

1. 问题：WebSocket连接频繁断开

解决方案：

• 检查网络环境，确保网络稳定
• 实现自动重连机制
• 检查服务器配置，调整超时设置
• 检查防火墙设置，确保WebSocket端口开放

2. 问题：消息丢失

解决方案：

• 实现消息确认机制，确保消息送达
• 实现消息队列，处理连接中断时的消息
• 考虑使用可靠的消息传递协议

3. 问题：性能问题

解决方案：

• 优化消息格式，减少数据大小
• 实现消息压缩
• 批量发送消息
• 限制并发连接数

4. 问题：跨域访问被拒绝

解决方案：

• 服务器设置正确的CORS头
• 使用代理服务器
• 在URL中添加适当的参数

5. 问题：浏览器兼容性

解决方案：

• 使用WebSocket polyfill，如Socket.IO
• 考虑使用替代方案，如SSE或Long Polling
• 检查浏览器兼容性，提供降级方案

进一步学习资源

1. WebSocket官方文档
2. WebSocket协议规范
3. Socket.IO官方文档
4. Server-Sent Events文档
5. MQTT协议介绍
6. ASP.NET Core SignalR
7. WebSocket安全最佳实践
8. 实时通信架构设计

课后练习

1. 基础练习：

   • 创建一个简单的WebSocket服务器，支持聊天功能
   • 在Vue 3项目中实现WebSocket客户端，连接到服务器
   • 实现消息发送和接收功能
   • 显示连接状态

2. 进阶练习：

   • 封装WebSocket客户端，实现自动重连机制
   • 与Pinia集成，管理实时消息
   • 实现消息确认机制，确保消息送达
   • 添加用户认证功能

3. 挑战练习：

   • 实现一个实时协作编辑应用，支持多人同时编辑
   • 添加消息压缩和批量发送功能
   • 实现WebSocket网关，支持负载均衡
   • 添加消息持久化，支持历史消息查询
   • 实现离线消息支持

通过本集的学习，你应该能够掌握WebSocket的核心概念和在Vue 3项目中的应用。WebSocket提供了一种高效、低延迟的实时通信方式，能够显著提升应用的用户体验。在实际开发中，需要注意连接管理、消息处理、性能优化和安全性等方面，确保WebSocket应用的稳定运行。