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

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

news 来源：原创 2025/7/5 6:04:59

构建一个基于 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;

4. 补充功能

选手列表展示：

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

历史数据查询：

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

图表展示：

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

性能优化：

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

运行环境

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

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

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

构建一个基于 Spring Boot 3 和 WebSocket 的实时数据监控系统，并在前端使用 React，可以实现选手实时数据的更新和展示功能。以下是该系统的核心设计和实现思路： 1. 系统架构后端 (Spring Boot 3): 提供 WebSocket 服务端，处理…...

编程日记 2025/7/5 6:04:59

SpringBoot使用Validation校验参数

准备工作引入相关依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency> 约束性注解(简单)说明 AssertFalse可以为null,如果不为null的话必…...

编程日记 2025/7/5 5:25:22

AAAI-2024 | 大语言模型赋能导航决策！NavGPT：基于大模型显式推理的视觉语言导航

作者：Gengze Zhou, Yicong Hong, Qi Wu 单位：阿德莱德大学，澳大利亚国立大学论文链接： NavGPT: Explicit Reasoning in Vision-and-Language Navigation with Large Language Models （https://ojs.aaai.org/index.p…...

编程日记 2025/6/29 20:28:48

Scala迭代更新

在Scala中，迭代器（Iterator）是一种用于遍历集合（如数组、列表、集合等）的元素而不暴露其底层表示的对象。迭代器提供了一种统一的方法来访问集合中的元素，而无需关心集合的具体实现。在Scala中&#xff0c…...

编程日记 2025/7/4 17:13:52

算法练习——位运算

前言：位运算的方法大多比较抽象，很难想到。一：判断字符是否唯一题目要求： 解题思路： 法一：使用hash的思想，统计每一个字母出现的次数，再通过一次循环遍历查询是否有超过1的字母&…...

编程日记 2025/7/5 5:49:24

“文件夹管理”与“标签管理”如何合理使用

在现代信息化的工作与生活环境中，文件夹管理与标签管理是两种常见的信息组织方法。合理使用文件夹与标签管理、提高信息检索效率、优化工作流程是实现高效信息管理的关键。其中，提高信息检索效率尤为重要，因为在海量的数据和文件中&#xff0…...

编程日记 2025/7/5 4:21:13

【学习总结|DAY023】Java高级技术

大家好，今天我们来聊聊 Java 中的几个高级技术：单元测试、反射、注解和动态代理。这些技术在源码、框架和架构师层面发挥着重要作用，掌握它们能让我们更深入地理解 Java 的底层原理，并提升代码质量和开发效率。单元测试&#xf…...

编程日记 2025/7/4 5:33:16

java 对mongodb操作封装工具类

在 Java 中，封装 MongoDB 操作的工具类是非常常见的做法。使用 MongoDB 官方的 Java 驱动程序，结合常用的工具类封装，可以使得与 MongoDB 的交互更加方便和清晰。下面是一个简单的 MongoDB 操作封装工具类的示例代码。前提首先&#xff0…...

编程日记 2025/7/5 4:10:23

Spark-Streaming集成Kafka

Spark Streaming集成Kafka是生产上最多的方式，其中集成Kafka 0.10是较为简单的，即：Kafka分区和Spark分区之间是1:1的对应关系，以及对偏移量和元数据的访问。与高版本的Kafka Consumer API 集成时做了一些调整，下面我们…...

编程日记 2025/7/5 5:39:27

最大似然检测在通信解调中的应用

最大似然检测（Maximum Likelihood Detection，MLD），也称为最大似然序列估计（Maximum Likelihood Sequence Estimation，MLSE），是一种在通信系统中广泛应用的解调方法。其核心思想是在给…...

编程日记 2025/7/5 5:24:35

Bert各种变体——RoBERTA/ALBERT/DistillBert

RoBERTa 会重复一个语句10次，然后每次都mask不同的15%token。丢弃了NSP任务，论文指出NSP任务有时甚至会损害性能。使用了BPE ALBERT 1. 跨层参数共享可以共享多头注意力层的参数，或者前馈网络层的参数，或者全部共享。实验结果…...

编程日记 2025/7/5 5:41:30

力扣周赛T2-执行操作后不同元素的最大数量

给你一个整数数组 nums 和一个整数 k。你可以对数组中的每个元素最多执行一次以下操作： 将一个在范围 [-k, k] 内的整数加到该元素上。返回执行这些操作后，nums 中可能拥有的不同元素的最大数量。示例 1： 输入： nums [1…...

编程日记 2025/7/2 13:03:54

uniapp 3分钟集成轮播广告图

先上效果图顶部广告栏为移动app常见需求，今天主要演示如何快速实现.这里还是基于《星云erp-移动版》演示版 （自行下载导入 Hbuilder, 后端接口可以直接使用我演示接口，不需要修改） 第一步: 组件选择我们直接使用uni-swipe…...

编程日记 2025/6/30 7:52:53

图像修复和编辑大一统 | 腾讯北大等联合提出BrushEdit：BrushNet进阶版来了

文章链接：https://arxiv.org/pdf/2412.10316 项目链接：https://liyaowei-stu.github.io/project/BrushEdit 亮点直击提出了BrushEdit，这是先前BrushNet模型的高级迭代版本。BrushEdit通过开创基于修复（inpainting）的图…...

编程日记 2025/7/2 18:29:03

极狐GitLab 17.7正式发布，可从 GitLab 丝滑迁移至极狐GitLab【二】

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...

编程日记 2025/7/5 4:39:58

Python基础知识回顾

数据类型 Python可以区分整数（integers、下文简写为int）、浮点数（float）、字符串（string）和布尔值（Boolean）等数据类型。 1）int是可正可负的整数 2）float包…...

编程日记 2025/7/5 5:13:17

SpringCloud2023集成Nacos2.4.3

基本都是最新版，踩了两天的坑终于集成上了，实现了多环境配置。使用版本关键应用版本备注Java21Oracle OpenJDK 21.0.5Spring Boot3.2.4Spring Cloud2023.0.1Spring Cloud Alibaba2023.0.1.3Nacos2.4.3单机模式 nacos安装我学习过程使用的是windows…...

编程日记 2025/7/5 5:50:06

数势科技指标平台，让数据产生最大价值

近来，指标体系和指标平台的重要性正被越来越多的业界同仁所认可。作为行业领先的数据智能产品提供商，数势科技最早推出了统一指标开发管理平台这一突破性产品（2021年获得软著），并首家完成了中国信通院数据指标管理平台…...

编程日记 2025/7/5 5:04:16

【玩转MacBook】Maven安装

下载Maven 官网： https://maven.apache.org/download.cgi 下载 Zip 类型的压缩包： 配置环境变量以管理员身份编辑配置文件。注意，由于 MacBook 上使用了 zsh 命令行，所以需要编辑~/.zshrc文件而不是~/.bash_profile文件&am…...

编程日记 2025/7/5 4:47:55

OpenGL笔记（1）

GLFW的函数说明 GLFW: Window guide 窗口创建提示在创建窗口和上下文之前，可以设置多个提示。有些提示影响窗口本身，另一些则影响帧缓冲区或上下文。这些提示每次通过 glfwInit 初始化库时都会被重置为默认值。整数值的提示可以通过 glfwWindowHint …...

编程日记 2025/7/5 3:50:25

前端Python应用指南（二）深入Flask：理解Flask的应用结构与模块化设计

《写给前端的python应用指南》系列： （一）快速构建 Web 服务器 - Flask vs Node.js 对比书接上文，这一篇将会深入了解下Flask，这个轻量级的Web框架，非常适合用来构建小型应用和快速原型开发。但是&#x…...

编程日记 2025/7/5 5:42:14

前端Python应用指南（三）Django vs Flask：哪种框架适合构建你的下一个Web应用？

《写给前端的python应用指南》系列： （一）快速构建 Web 服务器 - Flask vs Node.js 对比（二）深入Flask：理解Flask的应用结构与模块化设计在上一篇博文中，我们深入探讨了Flask框架，…...

编程日记 2025/7/5 0:01:28

Unity3D Huatuo技术原理剖析详解

前言在游戏开发领域，Unity3D凭借其强大的跨平台能力和丰富的功能，成为了众多开发者的首选工具。而在Unity3D的生态系统中，Huatuo作为一款重要的插件，为游戏开发带来了极大的便利。本文将深入剖析Huatuo的技术原理，并…...

编程日记 2025/7/5 4:56:33

复习打卡大数据篇——Hadoop HDFS 03

目录 1. HDFS元数据存储 2. HDFS HA 高可用 1. HDFS元数据存储 HDFS中的元数据按类型可以分为： 文件系统的元数据：包括文件名、目录名、修改信息、block的信息、副本信息等。datanodes的状态信息：比如节点状态、使用率等。 HDFS中的元数…...

编程日记 2025/7/5 5:12:32

宠物行业的出路：在爱与陪伴中寻找增长新机遇

在当下的消费市场中，如果说有什么领域能够逆势而上，宠物行业无疑是一个亮点。当人们越来越注重生活品质和精神寄托时，宠物成为了许多人的重要伴侣。它们不仅仅是家庭的一员，更是情感的寄托和生活的调剂。然而，随着行业…...

编程日记 2025/7/5 5:05:02

使用Turtle库实现，鼠标左键绘制路径，用鼠标右键结束绘制，小海龟并沿路径移动

使用Turtle库实现，鼠标左键绘制路径，用鼠标右键结束绘制，小海龟并沿路径移动 Turtle库是Python标准库的一部分，它提供了一种基于命令的图形绘制方式。Turtle模块通过一个“海龟”（Turtle）对象在屏幕上移动…...

编程日记 2025/7/4 22:55:24

海格通信嵌入式面试题及参考答案

计算电路的最高工作频率如何计算？计算电路的最高工作频率主要考虑电路中的关键路径延迟。关键路径是指在整个电路中，信号传播延迟最长的路径。电路的最高工作频率的倒数就是时钟周期，而时钟周期必须大于关键路径的延迟时间。首先要确定电路中各个模块的延迟。比如对于组合…...

编程日记 2025/7/5 5:42:59

3D几何建模引擎Parasolid功能解析

一、什么是Parasolid？ Parasolid是由Siemens PLM Software开发的高精度精密几何建模引擎。它全面评估CAD（计算机辅助设计）、CAM（计算机辅助制造）、CAE（计算机辅助工程）、PLM（产品生…...

编程日记 2025/7/5 4:43:38

AI的进阶之路：从机器学习到深度学习的演变（四）

AI的进阶之路：从机器学习到深度学习的演变（三） 五、深度学习的应用领域深度学习的应用领域广泛，涵盖了计算机视觉、自然语言处理、语音识别和推荐系统等多个方面。以下将详细探讨这些关键应用领域，展示深度学习在不同…...

编程日记 2025/7/5 5:10:31

【ES6复习笔记】rest参数（7）

什么是 rest 参数？ rest 参数是 ES6 引入的一个特性，它允许我们将一个不定数量的参数表示为一个数组。使用 rest 参数可以更方便地处理函数的参数，尤其是在参数数量不确定的情况下。如何使用 rest 参数？ 在函数定义中&#xf…...

编程日记 2025/7/5 5:47:18

安装MongoDB，环境配置

官网下载地址：MongoDB Shell Download | MongoDB 选择版本安装下载完成双击打开点击mongodb-windows-x86_64-8.0.0-signed 选择安装地址检查安装地址安装成功二.配置MongoDB数据库环境 1.找到安装好MongoDB的bin路径复制bin路径打开此电脑 -> 打开高级…...

编程日记 2025/7/5 4:07:04

1 查看ip地址 rootu22-tools-20:~# ip addr 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever…...

编程日记 2025/7/1 16:05:39

flask后端开发（1）：第一个Flask项目

目录一、Helloworddebug、host、port的配置 gitcode地址： https://gitcode.com/qq_43920838/flask_project.git 一、Helloword 一般是会创建两个文件夹和app.py app.py from flask import FlaskappFlask(__name__)app.route(/) def hello_world():return Hello…...

编程日记 2025/7/3 11:29:45

详解下c语言中struct和union的对齐规则

接触过c语言的同学应该都知道字节对齐。有些时候我们很容易弄错字节对齐的方式，特别是涉及到struct（结构体）和union（联合体）时。今天我们通过详细例子来说明下struct和union的对齐规则，以便了解各种struct和…...

编程日记 2025/7/4 20:33:06

虚拟机桥接模式网络连接不上解决方法

可能是桥接模式自动配置网络地址的时候没配好，自己手动配置一下。先看看windows里的wifi的ip 把虚拟机的网络设置打开ipv4把地址、子网掩码、网关输进去，然后再连接...

编程日记 2025/7/2 9:05:51

MySQL用表组织数据

用表组织数据文章目录用表组织数据一.四种完整性约束二.数值类型2-1三.数值类型2-2四.字符串.日期类型五.设置1.设置主键2.设置标识列3.设置非空4.设置默认值六.主外键建立后注意事项一.四种完整性约束 1.域完整性列域完整性约束方法:限制数据类型,检查约束,外键约束,默…...

编程日记 2025/6/30 13:53:04

基于python 微信小程序的医院就诊小程序

标题:基于 Python 微信小程序的医院就诊小程序内容:1.摘要基于 Python 微信小程序的医院就诊小程序旨在解决传统医院就诊流程繁琐、排队时间长等问题。通过小程序，患者可以在线预约挂号、查询医生信息、在线支付等，提高就诊效率。本小程序采用 Python…...

编程日记 2025/7/3 4:54:38

VUE3+django接口自动化部署平台部署说明文档（使用说明，需要私信）

网址连接：http://118.25.110.213:5200/#/login 账号/密码：renxiaoyong 1、VUE3部署本地。 1.1本地安装部署node.js 1.2安装vue脚手架 npm install -g vue/cli # 或者 yarn global add vue/cli1.3创建本地项目 vue create my-vue-project1.4安装依赖和插…...

编程日记 2025/6/30 18:34:42

【MySQL】十三，关于MySQL的全文索引

MySQL的全文索引用于搜索文本中的关键字，类似于like查询。演示建表 CREATE TABLE demo (id INT(11) NOT NULL,name CHAR(30) NOT NULL,age INT(11) NOT NULL,info VARCHAR(255),primary key(id),fulltext index futxt_idx_info(info) );此表的默认存储引擎为In…...

编程日记 2025/7/3 11:35:59

人工智能学习框架入门教程（一）

人工智能（AI）学习框架是指为开发、训练和部署人工智能模型提供的结构化工具和环境。它们帮助开发者实现AI项目的高效性、可扩展性、可维护性，并提供了优化算法、模型训练、评估、调优等功能。根据任务的不同，人工智能框架可以分为…...

编程日记 2025/7/2 7:23:24

NNDL 作业11 LSTM

习题6-4 推导LSTM网络中参数的梯度， 并分析其避免梯度消失的效果先来推个实例： 看式子中间，上半部分并未有连乘项，而下半部分有到的连乘项，从这可以看出，LSTM能缓解梯度消失，梯度爆炸只是不易…...

编程日记 2025/7/2 15:08:38

Git 操作全解：从基础命令到高级操作的实用指南

文章目录 1.基本命令1.初始化仓库2.克隆远程仓库3.查看当前仓库状态4.查看提交日志5.添加文件到暂存区6.提交更改7.查看仓库的配置信息 2.分支操作1.查看所有分支2.创建新分支3.切换名称4.创建并切换到新分支5.删除分支6.查看当前分支 3.合并分支1.合并分支2.解决合并冲突 4.远…...

编程日记 2025/6/28 18:27:07

CSS（四）display和float

display display 属性用于控制元素的显示类型，用的 display 值包括： block：块级元素使元素成为块级元素，占据一整行，前后有换行宽度默认为父容器的 100%，可以设置宽高，支持 margin、padding、…...

编程日记 2025/7/2 14:39:21

python中使用selenium执行组合快捷键ctrl+v不生效问题

在执行ctrlv进行粘贴时，绑定一个页面上的元素对象（无论元素对象是否是引用过期或者是粘贴的目标文本区，但前提需要粘贴的目标文本区获取焦点）执行ctrlv后可以生效。执行粘贴组合快捷键（ctrlv）的示例代码 se…...

编程日记 2025/7/2 23:14:41

数据结构 C/C++(实验五:图)

（大家好，今天分享的是数据结构的相关知识，大家可以在评论区进行互动答疑哦~加油！💕） 目录提要：实验题目一、实验目的二、实验内容及要求三、源程序及注释实验1代码 （折半查…...

编程日记 2025/7/3 9:33:40

非零掩码矩阵邻接矩阵

文章目录 1. 举例：2. python 代码3. 邻接矩阵 1. 举例： 在深度学习过程中，我们经常会用到掩码矩阵，比如我们有一个矩阵A表示如下,希望得到矩阵B，在矩阵A的非零位置表示为1，零位置表示为0， A …...

编程日记 2025/7/1 20:01:20

Docker安装

目录 1. 联网安装 Docker 2. 离线安装 Docker 3. 安装 Docker Compose 4. 卸载 Docker 和 Docker Compose 1. 联网安装 Docker 在 CentOS 上通过 yum 安装 Docker： # 安装 Docker yum -y install docker # 启动 Docker systemctl start docker # 查看 D…...

编程日记 2025/6/30 13:52:53

嵌入式驱动开发详解21（网络驱动开发）

文章目录前言以太网框架ENET 接口简介MAC接口MII \ RMII 接口MDIO 接口RJ45 接口 PHY芯片以太网驱动驱动挂载wifi模块挂载后续前言 linux驱动主要是字符设备驱动、块设备驱动还有网络设备驱动、字符设备驱动在本专栏前面已经详细将解了，网络设备驱动本文会做简要…...

编程日记 2025/7/1 19:17:26

2024年12月25日Github流行趋势

项目名称：system-design-primer 项目维护者：donnemartin, cclauss, satob, fluency03, linhe0x0项目介绍：学习如何设计大规模系统。为系统设计面试做准备。包括 Anki 卡片。项目star数：282,387项目fork数：47,226 项目…...

编程日记 2025/7/1 12:54:42

6、mysql的MHA故障切换

MHA的含义 MHA：master high availability，建立在主从复制基础上的故障切换的软件系统。主从复制的单点问题： 当主从复制当中，主服务器发生故障，会自动切换到一台从服务器，然后把从服务器升格成主&…...

编程日记 2025/7/3 10:00:06