数据实时更新方案优化完整技术文档

客户端层: Vue组件 → WebSocket Manager → 心跳/重连模块
                              ↓
网络层:   WebSocket Connection (wss://)
                              ↓
服务端层: WebSocket Server → 消息队列 → 数据源

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 页面隐藏,降低频率
    interval = 30000
  } else {
    // 页面可见,恢复正常
    interval = 5000
  }
})

// 浅比较
function shallowDiff(oldData, newData) {
  const changes = {}
  for (let key in newData) {
    if (oldData[key] !== newData[key]) {
      changes[key] = newData[key]
    }
  }
  return changes
}

// 深比较
function deepDiff(oldData, newData, path = '') {
  // 递归对比嵌套对象
  // 返回变化路径列表
}

let pendingUpdates = []
let rafId = null

function scheduleUpdate(update) {
  pendingUpdates.push(update)
  if (!rafId) {
    rafId = requestAnimationFrame(flushUpdates)
  }
}

function flushUpdates() {
  pendingUpdates.forEach(update => update())
  pendingUpdates = []
  rafId = null
}

class LRUCache {
  constructor(capacity) {
    this.capacity = capacity
    this.cache = new Map()
  }

  get(key) {
    if (!this.cache.has(key)) return null
    const value = this.cache.get(key)
    // 更新访问顺序
    this.cache.delete(key)
    this.cache.set(key, value)
    return value
  }

  put(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key)
    }
    this.cache.set(key, value)
    // 超出容量删除最旧的
    if (this.cache.size > this.capacity) {
      const firstKey = this.cache.keys().next().value
      this.cache.delete(firstKey)
    }
  }
}

let lastTime = 0
const fps = 30
const interval = 1000 / fps

function animate(time) {
  if (time - lastTime > interval) {
    // 执行动画
    lastTime = time
  }
  requestAnimationFrame(animate)
}

<template>
  <div class="websocket-demo">
    <div class="status-bar">
      <span class="status" :class="statusClass">
        {{ statusText }}
      </span>
      <span class="message-count">
        消息数: {{ messageCount }}
      </span>
    </div>

    <div class="data-display">
      <div
        class="data-item"
        v-for="item in dataList"
        :key="item.id"
      >
        <span class="label">{{ item.label }}:</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>

    <div class="controls">
      <button @click="connect">连接</button>
      <button @click="disconnect">断开</button>
      <button @click="send">发送测试</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// WebSocket管理类
class WebSocketManager {
  constructor(url, options = {}) {
    this.url = url
    this.ws = null
    this.reconnectAttempts = 0
    this.maxReconnectAttempts = options.maxReconnectAttempts || 10
    this.reconnectDelay = options.reconnectDelay || 1000
    this.heartbeatInterval = options.heartbeatInterval || 30000
    this.heartbeatTimer = null
    this.reconnectTimer = null
    this.messageQueue = []
    this.maxQueueSize = options.maxQueueSize || 1000
    this.listeners = {
      onOpen: [],
      onClose: [],
      onError: [],
      onMessage: []
    }
  }

  // 连接WebSocket
  connect() {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      console.log('WebSocket已连接')
      return
    }

    try {
      this.ws = new WebSocket(this.url)
      this.bindEvents()
    } catch (error) {
      console.error('WebSocket连接失败:', error)
      this.handleReconnect()
    }
  }

  // 绑定事件
  bindEvents() {
    this.ws.onopen = () => {
      console.log('WebSocket连接成功')
      this.reconnectAttempts = 0
      this.startHeartbeat()
      this.flushMessageQueue()
      this.emit('onOpen')
    }

    this.ws.onclose = (event) => {
      console.log('WebSocket连接关闭:', event.code, event.reason)
      this.stopHeartbeat()
      this.emit('onClose', event)

      // 非正常关闭,尝试重连
      if (event.code !== 1000) {
        this.handleReconnect()
      }
    }

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

    this.ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)

        // 处理心跳响应
        if (data.type === 'pong') {
          console.log('收到心跳响应')
          return
        }

        this.emit('onMessage', data)
      } catch (error) {
        console.error('消息解析失败:', error)
      }
    }
  }

  // 发送消息
  send(data) {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data))
    } else {
      // 离线消息加入队列
      if (this.messageQueue.length < this.maxQueueSize) {
        this.messageQueue.push(data)
      } else {
        console.warn('消息队列已满,丢弃消息')
      }
    }
  }

  // 刷新消息队列
  flushMessageQueue() {
    while (this.messageQueue.length > 0) {
      const message = this.messageQueue.shift()
      this.send(message)
    }
  }

  // 断开连接
  disconnect() {
    this.stopHeartbeat()
    clearTimeout(this.reconnectTimer)
    if (this.ws) {
      this.ws.close(1000, '主动断开')
      this.ws = null
    }
  }

  // 重连处理
  handleReconnect() {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.error('达到最大重连次数,停止重连')
      return
    }

    this.reconnectAttempts++
    // 指数退避算法
    const delay = Math.min(
      this.reconnectDelay * Math.pow(2, this.reconnectAttempts),
      30000
    )

    console.log(`${delay}ms后进行第${this.reconnectAttempts}次重连`)

    this.reconnectTimer = setTimeout(() => {
      console.log('开始重连...')
      this.connect()
    }, delay)
  }

  // 开始心跳
  startHeartbeat() {
    this.stopHeartbeat()
    this.heartbeatTimer = setInterval(() => {
      this.send({ type: 'ping', timestamp: Date.now() })
    }, this.heartbeatInterval)
  }

  // 停止心跳
  stopHeartbeat() {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer)
      this.heartbeatTimer = null
    }
  }

  // 监听事件
  on(event, callback) {
    if (this.listeners[event]) {
      this.listeners[event].push(callback)
    }
  }

  // 移除监听
  off(event, callback) {
    if (this.listeners[event]) {
      const index = this.listeners[event].indexOf(callback)
      if (index > -1) {
        this.listeners[event].splice(index, 1)
      }
    }
  }

  // 触发事件
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(callback => callback(data))
    }
  }
}

// 组件状态
const wsManager = ref(null)
const status = ref('disconnected') // disconnected/connecting/connected/error
const messageCount = ref(0)
const dataList = ref([
  { id: 1, label: '在线用户', value: 0 },
  { id: 2, label: '今日订单', value: 0 },
  { id: 3, label: '实时销售额', value: 0 }
])

// 状态样式
const statusClass = computed(() => {
  return {
    'status-disconnected': status.value === 'disconnected',
    'status-connecting': status.value === 'connecting',
    'status-connected': status.value === 'connected',
    'status-error': status.value === 'error'
  }
})

// 状态文字
const statusText = computed(() => {
  const map = {
    disconnected: '未连接',
    connecting: '连接中...',
    connected: '已连接',
    error: '连接错误'
  }
  return map[status.value] || '未知'
})

// 连接WebSocket
const connect = () => {
  if (!wsManager.value) {
    // 注意: 这里使用模拟的ws地址,实际使用时需要替换为真实地址
    wsManager.value = new WebSocketManager('ws://localhost:8080/ws', {
      maxReconnectAttempts: 10,
      reconnectDelay: 1000,
      heartbeatInterval: 30000
    })

    // 监听事件
    wsManager.value.on('onOpen', () => {
      status.value = 'connected'
    })

    wsManager.value.on('onClose', () => {
      status.value = 'disconnected'
    })

    wsManager.value.on('onError', () => {
      status.value = 'error'
    })

    wsManager.value.on('onMessage', (data) => {
      messageCount.value++
      updateData(data)
    })
  }

  status.value = 'connecting'
  wsManager.value.connect()
}

// 断开连接
const disconnect = () => {
  if (wsManager.value) {
    wsManager.value.disconnect()
    status.value = 'disconnected'
  }
}

// 发送测试消息
const send = () => {
  if (wsManager.value) {
    wsManager.value.send({
      type: 'test',
      message: 'Hello WebSocket',
      timestamp: Date.now()
    })
  }
}

// 更新数据
const updateData = (data) => {
  if (data.type === 'data_update') {
    dataList.value.forEach(item => {
      if (data[item.label]) {
        item.value = data[item.label]
      }
    })
  }
}

onMounted(() => {
  // 自动连接
  // connect()
})

onUnmounted(() => {
  disconnect()
})
</script>

<style scoped>
.websocket-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 5px;
  margin-bottom: 20px;
}

.status {
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 3px;
}

.status-disconnected {
  background: #666;
  color: #fff;
}

.status-connecting {
  background: #ff9800;
  color: #fff;
  animation: pulse 1s infinite;
}

.status-connected {
  background: #4caf50;
  color: #fff;
}

.status-error {
  background: #f44336;
  color: #fff;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.message-count {
  color: #00f6ff;
  font-size: 14px;
}

.data-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.data-item {
  background: rgba(0, 246, 255, 0.1);
  border: 2px solid #00f6ff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.label {
  display: block;
  color: #aaa;
  font-size: 14px;
  margin-bottom: 10px;
}

.value {
  display: block;
  color: #00f6ff;
  font-size: 28px;
  font-weight: bold;
}

.controls {
  display: flex;
  gap: 10px;
}

.controls button {
  flex: 1;
  padding: 12px;
  background: #00f6ff;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls button:hover {
  background: #00d9e6;
  transform: translateY(-2px);
}

.controls button:active {
  transform: translateY(0);
}
</script>

<template>
  <div class="polling-demo">
    <div class="info-panel">
      <div class="info-item">
        <span class="label">轮询状态:</span>
        <span class="value" :class="pollingClass">
          {{ pollingText }}
        </span>
      </div>
      <div class="info-item">
        <span class="label">当前间隔:</span>
        <span class="value">{{ currentInterval }}ms</span>
      </div>
      <div class="info-item">
        <span class="label">请求次数:</span>
        <span class="value">{{ requestCount }}</span>
      </div>
      <div class="info-item">
        <span class="label">页面状态:</span>
        <span class="value">{{ visibilityText }}</span>
      </div>
    </div>

    <div class="data-panel">
      <div
        class="data-card"
        v-for="item in dataItems"
        :key="item.id"
      >
        <div class="card-title">{{ item.title }}</div>
        <div class="card-value">{{ item.value }}</div>
        <div class="card-time">{{ item.updateTime }}</div>
      </div>
    </div>

    <div class="controls">
      <button @click="startPolling">开始轮询</button>
      <button @click="stopPolling">停止轮询</button>
      <button @click="fetchNow">立即请求</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 智能轮询管理器
class PollingManager {
  constructor(options = {}) {
    this.intervals = {
      active: options.activeInterval || 5000,      // 激活状态
      inactive: options.inactiveInterval || 30000, // 非激活状态
      background: options.backgroundInterval || 60000, // 后台运行
      error: options.errorInterval || 10000        // 错误重试
    }
    this.currentInterval = this.intervals.active
    this.timer = null
    this.isPolling = false
    this.errorCount = 0
    this.maxErrorCount = options.maxErrorCount || 5
    this.fetchFunction = options.fetchFunction
    this.onSuccess = options.onSuccess
    this.onError = options.onError

    // 监听页面可见性
    this.setupVisibilityListener()
  }

  // 开始轮询
  start() {
    if (this.isPolling) return
    this.isPolling = true
    this.poll()
  }

  // 停止轮询
  stop() {
    this.isPolling = false
    this.clearTimer()
  }

  // 执行轮询
  async poll() {
    if (!this.isPolling) return

    try {
      const result = await this.fetchFunction()
      this.errorCount = 0
      this.currentInterval = this.intervals.active

      if (this.onSuccess) {
        this.onSuccess(result)
      }
    } catch (error) {
      console.error('轮询请求失败:', error)
      this.errorCount++

      // 错误重试采用递增间隔
      if (this.errorCount < this.maxErrorCount) {
        this.currentInterval = this.intervals.error * this.errorCount
      } else {
        console.error('达到最大错误次数,停止轮询')
        this.stop()
      }

      if (this.onError) {
        this.onError(error)
      }
    }

    // 继续下一次轮询
    if (this.isPolling) {
      this.timer = setTimeout(() => this.poll(), this.currentInterval)
    }
  }

  // 清除定时器
  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  }

  // 监听页面可见性
  setupVisibilityListener() {
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // 页面隐藏,降低轮询频率
        this.currentInterval = this.intervals.inactive
        console.log('页面隐藏,降低轮询频率到', this.currentInterval)
      } else {
        // 页面可见,恢复正常频率
        this.currentInterval = this.intervals.active
        console.log('页面可见,恢复轮询频率到', this.currentInterval)

        // 立即执行一次
        if (this.isPolling) {
          this.clearTimer()
          this.poll()
        }
      }
    })
  }

  // 更新轮询间隔
  setInterval(interval) {
    this.currentInterval = interval
    if (this.isPolling) {
      this.clearTimer()
      this.poll()
    }
  }
}

// 组件状态
const pollingManager = ref(null)
const isPolling = ref(false)
const currentInterval = ref(5000)
const requestCount = ref(0)
const isVisible = ref(!document.hidden)
const dataItems = ref([
  { id: 1, title: '订单量', value: 1234, updateTime: '00:00:00' },
  { id: 2, title: '销售额', value: 56789, updateTime: '00:00:00' },
  { id: 3, title: '访问量', value: 9012, updateTime: '00:00:00' }
])

// 轮询状态样式
const pollingClass = computed(() => {
  return isPolling.value ? 'status-active' : 'status-inactive'
})

// 轮询状态文字
const pollingText = computed(() => {
  return isPolling.value ? '运行中' : '已停止'
})

// 页面可见性文字
const visibilityText = computed(() => {
  return isVisible.value ? '可见' : '隐藏'
})

// 模拟数据请求
const fetchData = async () => {
  // 模拟网络延迟
  await new Promise(resolve => setTimeout(resolve, 500))

  // 模拟数据
  return {
    order: Math.floor(Math.random() * 10000),
    sales: Math.floor(Math.random() * 100000),
    visit: Math.floor(Math.random() * 50000)
  }
}

// 开始轮询
const startPolling = () => {
  if (!pollingManager.value) {
    pollingManager.value = new PollingManager({
      activeInterval: 5000,
      inactiveInterval: 30000,
      backgroundInterval: 60000,
      fetchFunction: fetchData,
      onSuccess: (data) => {
        requestCount.value++
        updateData(data)
      },
      onError: (error) => {
        console.error('请求失败:', error)
      }
    })
  }

  pollingManager.value.start()
  isPolling.value = true
}

// 停止轮询
const stopPolling = () => {
  if (pollingManager.value) {
    pollingManager.value.stop()
    isPolling.value = false
  }
}

// 立即请求
const fetchNow = async () => {
  try {
    const data = await fetchData()
    requestCount.value++
    updateData(data)
  } catch (error) {
    console.error('请求失败:', error)
  }
}

// 更新数据
const updateData = (data) => {
  const time = new Date().toLocaleTimeString()

  dataItems.value[0].value = data.order
  dataItems.value[0].updateTime = time

  dataItems.value[1].value = data.sales
  dataItems.value[1].updateTime = time

  dataItems.value[2].value = data.visit
  dataItems.value[2].updateTime = time
}

// 监听页面可见性
const handleVisibilityChange = () => {
  isVisible.value = !document.hidden
}

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

onUnmounted(() => {
  stopPolling()
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>

<style scoped>
.polling-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.info-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 8px;
}

.info-item {
  text-align: center;
}

.label {
  display: block;
  color: #aaa;
  font-size: 12px;
  margin-bottom: 5px;
}

.value {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

.status-active {
  color: #4caf50;
}

.status-inactive {
  color: #666;
}

.data-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.data-card {
  background: rgba(0, 246, 255, 0.1);
  border: 2px solid #00f6ff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 246, 255, 0.3);
}

.card-title {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 10px;
}

.card-value {
  color: #00f6ff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-time {
  color: #666;
  font-size: 12px;
}

.controls {
  display: flex;
  gap: 10px;
}

.controls button {
  flex: 1;
  padding: 12px;
  background: #00f6ff;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.controls button:hover {
  background: #00d9e6;
  transform: translateY(-2px);
}
</style>

<template>
  <div class="lru-cache-demo">
    <div class="cache-info">
      <div class="info-item">
        <span>缓存容量:</span>
        <span>{{ capacity }}</span>
      </div>
      <div class="info-item">
        <span>已缓存:</span>
        <span>{{ cacheSize }}</span>
      </div>
      <div class="info-item">
        <span>命中率:</span>
        <span>{{ hitRate }}%</span>
      </div>
    </div>

    <div class="cache-list">
      <div
        class="cache-item"
        v-for="(value, key) in cacheData"
        :key="key"
      >
        <span class="key">{{ key }}</span>
        <span class="value">{{ JSON.stringify(value) }}</span>
      </div>
    </div>

    <div class="test-controls">
      <input v-model="testKey" placeholder="输入key" />
      <input v-model="testValue" placeholder="输入value" />
      <button @click="setCache">设置</button>
      <button @click="getCache">获取</button>
      <button @click="clearCache">清空</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// LRU缓存类
class LRUCache {
  constructor(capacity) {
    this.capacity = capacity
    this.cache = new Map()
    this.hits = 0
    this.misses = 0
  }

  get(key) {
    if (!this.cache.has(key)) {
      this.misses++
      return null
    }

    this.hits++
    const value = this.cache.get(key)
    // 更新访问顺序(删除后重新插入到末尾)
    this.cache.delete(key)
    this.cache.set(key, value)
    return value
  }

  set(key, value) {
    // 如果key已存在,先删除
    if (this.cache.has(key)) {
      this.cache.delete(key)
    }

    // 插入新数据
    this.cache.set(key, value)

    // 超出容量,删除最旧的(第一个)
    if (this.cache.size > this.capacity) {
      const firstKey = this.cache.keys().next().value
      this.cache.delete(firstKey)
    }
  }

  has(key) {
    return this.cache.has(key)
  }

  delete(key) {
    return this.cache.delete(key)
  }

  clear() {
    this.cache.clear()
    this.hits = 0
    this.misses = 0
  }

  size() {
    return this.cache.size
  }

  getHitRate() {
    const total = this.hits + this.misses
    return total > 0 ? Math.round((this.hits / total) * 100) : 0
  }

  entries() {
    return Array.from(this.cache.entries())
  }
}

// 组件状态
const capacity = ref(5)
const lruCache = new LRUCache(capacity.value)
const cacheData = ref({})
const testKey = ref('')
const testValue = ref('')

// 缓存大小
const cacheSize = computed(() => lruCache.size())

// 命中率
const hitRate = computed(() => lruCache.getHitRate())

// 设置缓存
const setCache = () => {
  if (!testKey.value) return

  lruCache.set(testKey.value, testValue.value || Date.now())
  updateCacheData()
  testKey.value = ''
  testValue.value = ''
}

// 获取缓存
const getCache = () => {
  if (!testKey.value) return

  const value = lruCache.get(testKey.value)
  if (value !== null) {
    alert(`缓存命中: ${value}`)
  } else {
    alert('缓存未命中')
  }
  updateCacheData()
}

// 清空缓存
const clearCache = () => {
  lruCache.clear()
  updateCacheData()
}

// 更新缓存数据显示
const updateCacheData = () => {
  const entries = lruCache.entries()
  cacheData.value = Object.fromEntries(entries)
}
</script>

<style scoped>
.lru-cache-demo {
  padding: 20px;
  background: #0a0e27;
  border-radius: 10px;
  color: #fff;
}

.cache-info {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  background: rgba(0, 246, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.info-item span:first-child {
  color: #aaa;
  font-size: 12px;
}

.info-item span:last-child {
  color: #00f6ff;
  font-size: 20px;
  font-weight: bold;
}

.cache-list {
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.cache-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: rgba(0, 246, 255, 0.05);
  border-left: 3px solid #00f6ff;
  margin-bottom: 8px;
  border-radius: 3px;
}

.key {
  color: #00f6ff;
  font-weight: bold;
}

.value {
  color: #fff;
  font-family: monospace;
}

.test-controls {
  display: flex;
  gap: 10px;
}

.test-controls input {
  flex: 1;
  padding: 10px;
  background: rgba(0, 246, 255, 0.1);
  border: 1px solid #00f6ff;
  border-radius: 5px;
  color: #fff;
  outline: none;
}

.test-controls button {
  padding: 10px 20px;
  background: #00f6ff;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.test-controls button:hover {
  background: #00d9e6;
  transform: translateY(-2px);
}
</style>

负责大屏数据实时更新方案设计，采用WebSocket+轮询混合策略，保证数据实时性和系统稳定性。
封装WebSocket管理器，实现心跳保活、断线重连(指数退避算法)、消息队列缓冲等机制。
优化轮询策略，基于Page Visibility API实现智能频率调整，激活状态5秒/隐藏状态30秒，减少60%无效请求。
实现LRU缓存算法，接口响应缓存命中率达85%，页面加载速度提升40%。
采用RAF批量更新机制，配合diff算法精准更新DOM，数据更新性能提升3倍，页面帧率稳定60fps。

主导数据可视化大屏实时更新架构设计，解决海量数据实时推送、长连接稳定性、前端渲染性能等核心问题。

技术方案:
1. WebSocket实时推送
   - 心跳保活机制: 30秒ping/pong，3次超时判定断开
   - 断线重连策略: 指数退避算法，最多10次重连
   - 消息队列缓冲: 离线消息缓存1000条，重连后批量推送
   - 增量更新: 只推送变化数据，减少70%传输量

2. 智能轮询优化
   - Page Visibility API: 页面隐藏降频到30秒，可见恢复5秒
   - 请求合并: 多接口批量请求，减少HTTP开销
   - 错误重试: 递增间隔(10s/20s/30s)，最多5次
   - 降频策略: 非激活状态请求量减少85%

3. 缓存策略
   - LRU算法: 容量100条，命中率85%
   - IndexedDB: 历史数据本地存储，支持离线查询
   - 过期控制: 默认60秒，可配置

4. 性能优化
   - diff算法精准更新: 只修改变化的DOM
   - RAF批量更新: 16.6ms内合并多次更新
   - transform优化: 避免reflow，使用GPU加速

解决难点:
- WebSocket频繁断开: 心跳+重连机制，连接成功率99.5%
- 数据更新卡顿: RAF+diff算法，帧率稳定60fps
- 无效请求过多: 智能轮询，请求量减少60%

项目成果: 支持10万+数据点实时更新，页面流畅无卡顿，连接稳定性提升80%，获客户高度认可。

担任数据可视化大屏实时更新方案技术负责人，从0到1设计实施完整的数据流架构，
解决10万+数据点实时推送、长时间运行稳定性、前端渲染性能等核心技术挑战。

【技术架构设计】
采用WebSocket主推+轮询备份的混合策略，保证数据实时性的同时兼顾稳定性:

1. WebSocket实时推送层
   核心机制:
   - 心跳保活: 客户端30秒ping，服务端pong响应，3次超时判定断线
   - 智能重连: 指数退避算法(1s→2s→4s→8s...最大30s)，最多10次
   - 消息缓冲: 离线期间消息入队(最大1000条)，重连后批量推送
   - 增量推送: 服务端只推变化数据，客户端diff合并，传输量减少70%
   - 频率控制: 服务端限流(10条/秒)，客户端节流(RAF批量更新)

2. 智能轮询备用层
   动态调频策略:
   | 状态 | 间隔 | 触发条件 |
   |------|------|----------|
   | 激活 | 5s | 页面可见 |
   | 隐藏 | 30s | 切换标签 |
   | 后台 | 60s | 最小化 |
   | 错误 | 递增 | 失败重试 |

   优化手段:
   - Page Visibility API监听页面状态
   - 请求合并: 7个接口→1个聚合接口
   - 响应缓存: LRU算法，命中率85%
   - 批量处理: RAF统一调度数据更新

3. 多级缓存体系
   L1缓存-内存LRU:
   - 容量: 100条热点数据
   - 算法: 双向链表+哈希表，O(1)读写
   - 命中率: 85%，响应时间<1ms

   L2缓存-IndexedDB:
   - 容量: 50MB历史数据
   - 支持: 离线查询、范围检索
   - 异步操作，不阻塞UI

4. 前端渲染优化
   更新策略:
   - Diff算法: 浅比较+深比较，精准定位变化
   - RAF批量更新: 16.6ms内多次数据变化合并为一次DOM操作
   - Virtual DOM: Vue3响应式系统自动diff
   - 局部更新: key属性精确定位，避免全量渲染

   动画优化:
   - transform/opacity替代left/top/width/height
   - will-change预声明优化属性
   - contain: layout隔离渲染区域
   - 使用GPU加速(translateZ(0))

【解决的关键难点】
难点1: WebSocket频繁断连
现象: 大屏7*24小时运行，每2-3小时断开一次，影响数据实时性
分析: 网络波动、服务器超时、NAT穿透失败
方案:
- 心跳保活(30s ping/pong)保持TCP连接活跃
- 断线立即感知(onclose事件)
- 指数退避重连(避免雪崩)
- 消息队列保证数据不丢失
效果: 连接成功率从75%→99.5%

难点2: 数据更新导致页面卡顿
现象: 每秒100+数据更新，页面帧率降至20-30fps，操作卡顿
分析: 频繁DOM操作触发reflow/repaint
方案:
- RAF节流: 16.6ms内合并所有更新
- Diff精准更新: 只修改变化的DOM节点
- Transform优化: 使用GPU加速的CSS属性
- 虚拟滚动: 长列表只渲染可见区域
效果: 帧率稳定60fps，CPU占用<15%

难点3: 轮询造成服务器压力
现象: 100个并发大屏，每5秒轮询一次，服务器QPS达2000+
分析: 大量轮询请求，其中60%页面实际不可见
方案:
- Visibility API监听页面状态
- 隐藏状态降频到30秒
- 多接口请求合并
- 响应数据缓存(LRU)
效果: 服务器QPS降至800，减少60%

【项目成果】
- 数据实时性: 延迟<500ms，实时率99.9%
- 系统稳定性: 7*24小时连续运行无宕机，连接成功率99.5%
- 渲染性能: 10万数据点实时更新，帧率稳定60fps
- 资源占用: CPU<15%，内存<200MB
- 开发效率: 封装通用SDK，其他项目开箱即用

方案已应用于公司5+个大屏项目，支撑智慧城市、工业监控、数据中心等场景，获客户和领导高度认可，
沉淀为团队技术标准。

// 每30秒发送ping
setInterval(() => {
  ws.send(JSON.stringify({ type: 'ping' }))
}, 30000)

// 监听pong，3次未响应判定断开
let missedHeartbeats = 0
ws.onmessage = (e) => {
  if (e.data.type === 'pong') {
    missedHeartbeats = 0
  }
}

// 指数退避
const delay = Math.min(1000 * Math.pow(2, attempts), 30000)
setTimeout(reconnect, delay)

// 断开期间消息缓存
if (ws.readyState !== WebSocket.OPEN) {
  messageQueue.push(message)
}

// 重连后批量发送
ws.onopen = () => {
  messageQueue.forEach(msg => ws.send(msg))
  messageQueue = []
}

let pending = []
let rafId = null

function update(data) {
  pending.push(data)
  if (!rafId) {
    rafId = requestAnimationFrame(() => {
      // 合并所有更新
      const merged = mergePending(pending)
      applyUpdate(merged)
      pending = []
      rafId = null
    })
  }
}

function diffUpdate(oldData, newData) {
  // 只更新变化的字段
  Object.keys(newData).forEach(key => {
    if (oldData[key] !== newData[key]) {
      oldData[key] = newData[key] // Vue响应式自动更新
    }
  })
}

.data-item {
  transform: translateZ(0); /* 开启GPU加速 */
  will-change: transform; /* 预告浏览器 */
}

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    interval = 30000 // 隐藏时30秒
  } else {
    interval = 5000 // 可见时5秒
    fetchData() // 立即拉取最新数据
  }
})

// 合并多个接口
async function fetchAllData() {
  const [data1, data2, data3] = await Promise.all([
    fetchAPI1(),
    fetchAPI2(),
    fetchAPI3()
  ])
  return { data1, data2, data3 }
}

const cache = new LRUCache(100)

async function fetchWithCache(key) {
  const cached = cache.get(key)
  if (cached && Date.now() - cached.time < 60000) {
    return cached.data // 60秒内返回缓存
  }

  const data = await fetch(key)
  cache.set(key, { data, time: Date.now() })
  return data
}

// 服务端计算diff
function calcDiff(oldData, newData) {
  const changes = []
  newData.forEach((item, index) => {
    if (JSON.stringify(item) !== JSON.stringify(oldData[index])) {
      changes.push({ index, data: item })
    }
  })
  return changes
}

// 客户端合并
function applyChanges(oldData, changes) {
  changes.forEach(({ index, data }) => {
    oldData[index] = data
  })
}

L1: 内存LRU缓存(100条) - 命中率85% - 响应<1ms
L2: IndexedDB(50MB) - 历史数据 - 响应<10ms
L3: HTTP缓存(Cache-Control) - 静态资源