当前位置：首页 > news >正文

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

news 2025/7/6 19:29:21

构建一个基于 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 {@Overridepublic 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<>();@Overridepublic void afterConnectionEstablished(WebSocketSession session) {SESSIONS.add(session);}@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {// 收到消息（如客户端订阅某选手数据）log.info("Received: {}", message.getPayload());}@Overridepublic 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;