springboot 3 websocket react 系统提示，选手实时数据更新监控

构建一个基于 Spring Boot 3 和 WebSocket 的实时数据监控系统，并在前端使用 React，可以实现选手实时数据的更新和展示功能。以下是该系统的核心设计和实现思路：

1. 系统架构

后端 (Spring Boot 3):

提供 WebSocket 服务端，处理客户端连接和消息推送。
提供 REST API，用于初始数据加载和历史数据查询。
实现逻辑：接收选手的实时数据，并通过 WebSocket 推送到前端。

前端 (React):

使用 WebSocket 客户端与后端连接。
使用状态管理工具（如 Redux 或 Context）管理选手数据。
动态渲染选手的实时数据（例如通过表格、图表或地图）。

2. 后端实现

pom.xml 加入依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置 Spring Boot WebSocket

package com.ys.conf.socket;

import com.ys.constant.ApiConstant;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

/**
 * @author kong
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new RealTimeDataHandler(), ApiConstant.API_OPEN + "/realtime").setAllowedOrigins("*");
    }
}

WebSocket 处理逻辑

package com.ys.conf.socket;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

/**
 * @author kong
 */
@Component
@Slf4j
public class RealTimeDataHandler extends TextWebSocketHandler {
    private static final List<WebSocketSession> SESSIONS = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        SESSIONS.add(session);
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 收到消息（如客户端订阅某选手数据）
        log.info("Received: {}", message.getPayload());
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        SESSIONS.remove(session);
    }

    public void sendData(String data) throws IOException {
        for (WebSocketSession session : SESSIONS) {
            if (session.isOpen()) {
                session.sendMessage(new TextMessage(data));
            }
        }
    }
}

数据推送逻辑

后端通过定时任务或事件触发将实时数据推送给所有客户端：

package com.ys.conf.socket;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import java.io.IOException;

/**
 * @author kong
 */
@Component
@RequiredArgsConstructor
@Slf4j
public class RealTimeDataPusher {
    private final RealTimeDataHandler dataHandler;

    @Scheduled(fixedRate = 1000)
    public void pushData() {
        try {
            log.info("每秒推送");
            String data = generateRealTimeData();
            dataHandler.sendData(data);
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        }
    }

    private String generateRealTimeData() {
        // 模拟生成实时数据
        return "{\"player\": \"Player1\", \"score\": " + (int) (Math.random() * 100) + "}";
    }
}

3. 前端实现

WebSocket 客户端连接

import { useEffect, useState } from "react";

const useWebSocket = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const socket = new WebSocket(url);

    socket.onopen = () => {
      console.log("WebSocket connection established");
    };

    socket.onmessage = (event) => {
      setData(JSON.parse(event.data));
    };

    socket.onclose = () => {
      console.log("WebSocket connection closed");
    };

    return () => {
      socket.close();
    };
  }, [url]);

  return data;
};

export default useWebSocket;

数据展示组件 useWebSocket.jsx

import React from "react";
import useWebSocket from "./useWebSocket";

const RealTimeMonitor = () => {
  const data = useWebSocket("ws://localhost:8080/realtime");

  return (
    <div>
      <h1>实时数据监控</h1>
      {data ? (
        <div>
          <p>选手: {data.player}</p>
          <p>得分: {data.score}</p>
        </div>
      ) : (
        <p>等待数据...</p>
      )}
    </div>
  );
};

export default RealTimeMonitor;

4. 补充功能

选手列表展示：

后端提供选手列表 API，前端通过 REST 请求加载并渲染选手信息。

历史数据查询：

实现后端数据库（如 MySQL）存储历史数据，提供查询接口。

图表展示：

使用图表库（如 chart.js 或 echarts）动态展示数据变化趋势。

性能优化：

后端分组推送，减少不必要的数据广播。
前端优化：仅更新受影响的 UI 部分。

运行环境

确保安装 Java 17 和 Node.js 16+。
使用 Spring Boot 3.0+ 和 React 18+。

这样，一个简单完整的实时数据监控系统就实现了！

原文地址：https://blog.csdn.net/WithCYwind/article/details/144628343

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！