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

最新推荐文章于 2024-09-09 13:46:41 发布

傻傻有内涵的我

最新推荐文章于 2024-09-09 13:46:41 发布

阅读量535

点赞数 5

分类专栏： vue avue CSS学习文章标签： websocket css 网络协议

本文链接：https://blog.csdn.net/qq_45852108/article/details/141026346

版权

一、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);
      }