Websocket实时通讯

const ws = ref(null)
const status = ref('未连接')
onMounted(() => {
  initWebSocket();//实时通讯

  
});
// 实时通讯
// 响应式数据
let dataList = $ref([])
let connectionStatus = $ref('未连接')
// let ws = $ref(null)

// WebSocket 配置
// let WS_URL = 'ws://124.222.6.60:8800'//在线测试地址
// let WS_URL = 'ws://172.16.182.102:8095/webSocket/1'//本地地址
let WS_URL = 'ws://https://welfare.zhuritec.com/webSocket/1'//本地地址
let RECONNECT_INTERVAL = 5000 // 5秒重连间隔
let reconnectTimer = null
// 处理接收到的消息
const handleMessage = (event) => {
  console.log("处理接收到的消息:",event);
  content = event.data
  try {
    // const newData = event.data
    const newData = JSON.parse(event.data)
    // 更新数据列表（最新数据放前面）
    console.log("newData:",newData);
    activeList = [newData, ...activeList].slice(0, 50) // 保持最多50条
    console.log("activeList222:",activeList[0]);
    // 将activeList[0]中的createTime时间戳转换为年月日格式
    activeList = activeList[0].map(item => {
      return {
        ...item,
        createTime:dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
    })
    console.log("activeList------:",activeList);

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

// 初始化 WebSocket 连接
const initWebSocket = () => {
  console.log("初始化");
  connectionStatus = '连接中...'
  
  ws.value = new WebSocket(WS_URL)
  console.log("ws.value:",ws.value);
  // 连接成功
  ws.value.onopen = () => {
    console.log("链接上了娃哈哈");
    connectionStatus = '已连接'
    clearTimeout(reconnectTimer)
  }

  // 接收消息
  ws.value.onmessage = handleMessage

  // 错误处理
  ws.value.onerror = (error) => {
    console.error('WebSocket 错误:', error)
    connectionStatus = '连接错误'
    attemptReconnect()
  }

  // 连接关闭
  ws.value.onclose = (event) => {
    if (event.wasClean) {
      console.log(`连接正常关闭 Code=${event.code}`)
    } else {
      console.warn('连接意外中断')
      attemptReconnect()
    }
  }
}
// 连接关闭
const onClose = () => {
  ws.value.close()
  connectionStatus = '已关闭'
}
// 尝试重连
const attemptReconnect = () => {
  connectionStatus = '正在重连...'
  clearTimeout(reconnectTimer)
  reconnectTimer = setTimeout(() => {
    initWebSocket()
  }, RECONNECT_INTERVAL)
}
// 组件卸载前清理
onBeforeUnmount(() => {
  if (ws.value) {
    ws.value.close()
    clearTimeout(reconnectTimer)
  }
})
<template>
<div v-if="true" style="position: absolute; top:0; left: 0;color: #333;z-index: 99; padding: 10px; background-color: #ffffffe0;">
        <p>
          连接状态：{{ connectionStatus }}
          <van-button type="primary" size="mini" @click="initWebSocket">重新连接</van-button>
          <van-button type="primary" size="mini" @click="onClose">断开连接</van-button>
        </p>
        <!-- <div style="color: #fff;z-index: 99; margin-top: 10px;" v-html="content"></div> -->
      </div>
</template>