WebSocket - 技术栈

一、前言

WebSocket是一种让网页和服务器实时双向通信的协议，特别适合需要即时推送的场景。它通过TCP连接建立持久会话，握手后就能直接传输数据，比传统轮询更高效。

核心优势

‌实时性‌：服务器可主动推送数据，延迟极低
‌双向通信‌：客户端和服务器都能随时发消息
‌低开销‌：数据包头部仅2-10字节，比HTTP请求轻量
‌二进制支持‌：可传输图片、视频等二进制内容

典型应用场景

实时聊天和消息推送
在线游戏数据同步
股票行情实时更新
协作工具的多人编辑

注意事项

需要服务器和浏览器支持
长连接会占用服务器资源
需做好安全防护，防止未授权访问

二、应用

WebSocket 在 Vue3 中的应用主要涉及实时双向通信，适用于聊天、数据监控等场景。以下结合Composition API 和常见架构提供实现方案。

‌1.基础集成与自定义 Composable‌

在 Vue3 中，可通过 ref、:ml-text[onMounted] 等生命周期钩子直接操作 WebSocket。例如，使用 :ml-text[useWebSocket] 自定义 Composable 封装连接逻辑，包括消息收发和自动重连机制。‌‌

javascript 复制代码

// composables/useWebSocket.js
import { ref, onBeforeUnmount } from 'vue'
export default function useWebSocket(url) {
  const messages = ref([])
  const isConnected = ref(false)
  let ws = null
  const connect = () => {
    ws = new WebSocket(url)
    ws.onopen = () => {
      isConnected.value = true
    }
    ws.onmessage = (event) => {
      messages.value.push(JSON.parse(event.data))
    }
    ws.onclose = () => {
      isConnected.value = false
      // 自动重连逻辑
      setTimeout(connect, 3000)
    }
    ws.onerror = (error) => {
      console.error('WebSocket error:', error)
    }
  }
  const send = (message) => {
    if (ws?.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify(message))
    }
  }
  onBeforeUnmount(() => {
    ws?.close()
  })
  return { messages, isConnected, connect, send }
}

在组件中使用：

javascript 复制代码

<script setup>
import useWebSocket from '@/composables/useWebSocket'
const { messages, isConnected, send } = useWebSocket('wss://your-url')
</script>
<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
    <button @click="send({ type: 'test' })">Send</button>
  </div>
</template>

2.‌状态管理集成‌

与 Pinia 集成时，可将 WebSocket 连接逻辑移至 Store，通过 onMounted 初始化并利用 send 方法分发动作

javascript 复制代码

// stores/websocket.js
import { defineStore } from 'pinia'
export const useWebSocketStore = defineStore('websocket', {
  state: () => ({
    messages: [],
    isConnected: false
  }),
  actions: {
    connect(url) {
      const ws = new WebSocket(url)
      ws.onopen = () => {
        this.isConnected = true
      }
      ws.onmessage = (event) => {
        this.messages.push(JSON.parse(event.data))
      }
      // ...其他事件处理
    },
    sendMessage(message) {
      // 发送逻辑
    }
  }
})

‌高级功能与性能优化‌：包括自动重连、心跳检测和WebWorker 数据处理。‌‌

‌自动重连与心跳 ‌：在 onclose 事件中触发重连，并设置定时器发送 ping 消息维持连接。
‌WebWorker 处理‌：对于复杂数据处理，可将 WebSocket 消息传递给 Worker 线程避免阻塞主线程。
‌错误处理 ‌：捕获 onerror 并记录日志，结合重连策略提升稳定性。

‌实际应用场景 ‌：如实时文件传输监控，需结合分片上传、进度计算等算法。‌‌服务端通过 WebSocket 广播进度，前端解析并更新 UI，同时使用 speedCalculator 类动态计算传输速度。