websocket，css动画和css-position、display、区别

一、websocket

• code

return {
   
      // 用于存储 WebSocket 返回的状态数据
      statusList: [],
  },
  mounted() {
   
    this.setupWebSocket();
    this.startBlinking();
  },
  methods: {
   
    setupWebSocket() {
   
      // 创建 WebSocket 连接
      const socket = new WebSocket('ws://xxx.xxx:xxx/xxx');

      // WebSocket 连接成功时触发
      socket.onopen = () => {
   
        console.log('WebSocket connection established.');
      };

      // WebSocket 收到消息时触发
      socket.onmessage = (event) => {
   
        console.log('Message from server:', event.data);
        try {
   
          // 解析服务器发送的数据
          const data = JSON.parse(event.data);
          // 更新状态列表，每个项初始化为灰色
          this.statusList = data.map((item) => ({
   
            ...item,
            isGray: true, // 初始为灰色
          }));
        } catch (error) {
   
          console.error('Failed to parse message:', error);
        }
      };

      // WebSocket 连接关闭时触发
      socket.onclose = () => {
   
        console.log('WebSocket connection closed.');
      };

      // WebSocket 连接发生错误时触发
      socket.onerror = (error) => {
   
        console.log('WebSocket error:', error);
      }