与前端框架（Vue/React）的实时数据交互

// Vue 组件中的 WebSocket 示例
<template>
  <div>
    <p>Messages: {{ messages }}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9430">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/175895280746401.jpg" alt="Snowy(SnowyAdmin)快速开发平台3.5.1">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9430">Snowy(SnowyAdmin)快速开发平台3.5.1</a>
                            <p>Snowy（SnowyAdmin）是国内首个国密前后端分离快速开发平台，集成国密加解密插件， 软件层面完全符合等保测评要求，同时实现国产化机型、中间件、数据库适配，是您的不二之选！ 技术框架与密码结合，让更多的人认识密码，使用密码；更是让前后分离“密”不可分。采用SpringBoot+MybatisPlus+AntDesignVue+Vite 等更多组件及前沿技术开发，注释丰富，代码简洁，开箱即用</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Snowy(SnowyAdmin)快速开发平台3.5.1">
                                <span>5</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9430" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Snowy(SnowyAdmin)快速开发平台3.5.1">
                        </a>
                    </div>
                
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      socket: null
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://example.com/socketserver');
    this.socket.onmessage = (event) => {
      this.messages.push(JSON.parse(event.data));
    };
  },
  beforeDestroy() {
    this.socket.close();
  }
};
</script>

// React 组件中的 WebSocket 示例
import React, { useState, useEffect } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('ws://example.com/socketserver');
    socket.onmessage = (event) => {
      setMessages(prevMessages => [...prevMessages, JSON.parse(event.data)]);
    };
    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      <p>Messages: {messages.map((msg, index) => (
        <span key={index}>{msg}</span>
      ))}</p>
    </div>
  );
}

export default Chat;