后端数据改变后，前端实时获取改变的数据

前端要实时获取到后端变化的数据，可以使用websocket（实现双向通讯的协议）或者SSE用于从服务器向客户端的单向实时事件流。

两种方法的实现方式：

使用WebSocket：

1、创建WebSocket连接：在前端使用WebSocket API来创建WebSocket连接到后端服务器。

// 建立WebSocket连接
const socket = new WebSocket('wss://your-websocket-server-url');

2、WebSocket事件处理：设置WebSocket连接的事件处理程序，以处理连接、消息、关闭和错误等事件。

// 处理WebSocket事件
socket.onopen = () => {
  // 连接成功
};

socket.onmessage = (event) => {
  // 处理来自服务器的消息
  const data = JSON.parse(event.data);
  // 处理数据并更新前端界面
};

socket.onclose = () => {
  // 连接关闭
};

socket.onerror = (error) => {
  // 处理连接错误
};

发送请求或消息：通过WebSocket连接向服务器发送请求或消息。

// 向服务器发送请求或消息
socket.send('YourRequestData');

处理服务器响应：处理从服务器接收到的数据，将其反映在前端界面上。

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理数据并更新前端界面
};

使用Server-Sent Events (SSE)：

1. 在后端，你需要实现一个支持SSE的HTTP端点。通常，这是一个HTTP路由或接口，它会向客户端发送事件流。

2. 在前端，你可以使用EventSource对象来建立与SSE端点的连接。

   const eventSource = new EventSource('your-sse-endpoint');

   1. 后端应该在数据变化时将数据以事件的形式推送到SSE端点。

   2. 前端可以使用eventSource监听message事件，以获取来自服务器的事件数据。

   3. 当服务器推送新数据时，前端会自动接收并处理这些数据，并将其反映在用户界面上。

   无论你选择WebSocket还是SSE，都能够实现实时数据更新的效果。WebSocket通常更适合双向通信，而SSE适合从服务器向客户端的单向实时事件流。你可以根据你的具体需求选择其中一种方法来实现。

const eventSource = new EventSource('your-sse-endpoint');