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

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

1. 系统架构

后端 (Spring Boot 3):

提供 WebSocket 服务端,处理客户端连接和消息推送。

提供 REST API,用于初始数据加载和历史数据查询。

实现逻辑:接收选手的实时数据,并通过 WebSocket 推送到前端。

前端 (React):

使用 WebSocket 客户端与后端连接。

使用状态管理工具(如 Redux 或 Context)管理选手数据。

动态渲染选手的实时数据(例如通过表格、图表或地图)。

2. 后端实现

pom.xml 加入依赖

xml 复制代码
		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置 Spring Boot WebSocket

java 复制代码
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 处理逻辑

java 复制代码
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));
            }
        }
    }
}

数据推送逻辑

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

java 复制代码
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 客户端连接

js 复制代码
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

js 复制代码
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+。

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

相关推荐
程序员张32 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端
麦兜*8 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了9 小时前
JAVA-springboot 整合Redis
java·spring boot·redis
大只鹅9 小时前
解决 Spring Boot 对 Elasticsearch 字段没有小驼峰映射的问题
spring boot·后端·elasticsearch
小白变怪兽9 小时前
一、react18+项目初始化(vite)
前端·react.js
天河归来9 小时前
使用idea创建springboot单体项目
java·spring boot·intellij-idea
IT_10249 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
武昌库里写JAVA10 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
游戏开发爱好者810 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_9151063210 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp