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 {@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 服务端,处理…...
现代图形API综合比较:Vulkan DirectX Metal WebGPU
Vulkan、DirectX、Metal 和 WebGPU 等低级图形 API 正在融合为类似于当前 GPU 构建方式的模型。 图形处理单元 (GPU) 是异步计算单元,可以处理大量数据,例如复杂的网格几何形状、图像纹理、输出帧缓冲区、变换矩阵或你想要计算的任何数据。 NSDT工具推荐…...
【Hot100刷题计划】Day04 栈专题 1~3天回顾(持续更新)
LeetCode Hot 100 是最常被考察的题目集合,涵盖了面试中常见的算法和数据结构问题。刷 Hot100可以让你在有限的时间内集中精力解决最常考的问题。鼓励大家不仅要写出代码,最好理解问题的本质、优化解法和复杂度分析。遇到问题要多交流多求问多分享&#…...
用VBA将word文档处理成支持弹出式注释的epub文档可用的html内容
有一种epub文件,其中的注释以弹窗形式显示,如下图: 点击注释引用后,对应的注释内容会弹出在页面中显示,再次点击弹窗外的任意位置该弹窗即关闭,关闭后点击任意注释引用,对应的注释内容会弹窗显示…...
舵机原理介绍 简洁讲解面向实战 非阻塞式驱动代码, arduino
目录 1.舵机简介 2.舵机转动角度的PWM条件(以180度的SG90舵机为例) 2.1 控制关系 2.2arduino产生PWM 3.0 附代码 循环0度到180度开关舵机(非阻塞版本) 4.0 Servo.h 舵机代码 1.舵机简介 舵机也叫伺服电机,是控制输入PWM信号来精确控制转动角度.所以想要驱动舵机就是让ard…...
Oracle Database 23ai 中的DBMS_HCHECK
在 Oracle 23ai 中,DBMS_HCHECK 包允许我们检查数据库中已知的数据字典问题。 几年前,Oracle 发布了 hcheck.sql 脚本(文档 ID 136697.1)来检查数据库中已知的数据字典问题。 DBMS_HCHECK 包意味着我们不再需要下载 hcheck.sql…...
如何利用AWS监听存储桶并上传到tg bot
业务描述: 需要监听aws的存储中的最新消息,发送新的消息推送到指定tg的频道。 主要流程: 1.上传消息到s3存储桶(不做具体描述) 2.通过aws的lambda监听s3存储桶的最新消息(txt文件) 3.将txt文件…...
STM32 SPI读取SD卡
七个响应类型: R1 Response (Normal Response): R1响应是最基本的响应,包含一个字节的状态位,用于指示命令是否成功执行。常用。最高位为0。最低位为1表示是空闲状态。其他位是各种错误提示。 R1b Response (Normal with Busy): 类似于R1&a…...
TANGO与LabVIEW控制系统集成
TANGO 是一个开源的设备控制和数据采集框架,主要用于管理实验室设备、自动化系统和工业设备。它为不同类型的硬件提供统一的控制接口,并支持设备之间的通信,广泛应用于粒子加速器、同步辐射光源、实验室自动化和工业控制等领域。 1. TANGO的核…...
eth_type_trans 函数
eth_type_trans 是 Linux 内核网络子系统中的一个函数,它主要用于确定接收到的以太网数据包(Ethernet frame)的协议类型,并设置相应的 sk_buff 结构体的协议字段。以下是关于 eth_type_trans 的详细解释: 功能 eth_type_trans 函数的主要功能是根据以太网数据包的目的 M…...
派克汉尼汾推出新的快换接头产品系列,扩展热管理解决方案
近期,运动与控制技术领域的先行者——派克汉尼汾宣布推出四个具有开创性的热管理解决方案——NSAC、NSEC和NSIC系列盲插式快换接头以及NSSC螺纹连接快换接头。这些创新产品旨在满足电子冷却、电池制造、信息技术、能源管理、工程机械和运输等行业复杂的热管理需求。…...
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
原因: 后端使用分布式id, id为19位数,导致精度丢失 ,前端解决方法 这个是通过浏览器请求回来的数据,这个时候id 数据已经丢失了,在数据库查询不到,在调获详情接口的时候会有问题 实际的: 解决…...
C语言:指针4(常量指针和指针常量及动态内存分配)
常量指针与指针常量 常量:分为字面量和只读常量,字面量就是我们平时直接操作的量: printf("%d\n",12);/printf("%s\n","hello");只读常量使用关键字 const 修饰,凡是被这个关键字修饰 的变量&…...
Win11提示fveapi.dll丢失是什么原因?fveapi.dll丢失怎么办?
一、fveapi.dll丢失的成因与影响 成因: 系统更新不完整:Win11系统在更新过程中,如果某个环节出现问题,可能会导致fveapi.dll等系统文件未能正确更新或安装。软件冲突:某些第三方软件可能与系统文件发生冲突ÿ…...
台球助教平台系统开发APP和小程序信息收藏功能需求解析(第十二章)
以下是开发台球助教系统客户端(APP,小程序,H5)几端的信息收藏功能的详细需求和功能说明,内容比较详细,可以说是一个教科书式的详细说明了,这套需求说明不仅仅用在我们的台球助教系统程序上&…...
如何设计 Vue 3 组件库:高效的组件化开发方法
如何设计 Vue 3 组件库:高效的组件化开发方法 📖 前言 随着前端技术的不断发展,Vue.js 已成为现代化 Web 应用开发的主流框架之一。Vue 3 引入了诸多改进,尤其是组合式 API,使得 Vue 在开发大型项目时,能够…...
第八节、Bresenham直线插补运动【51单片机-L298N-步进电机教程】
摘要:前面章节主要介绍单个电机控制,本节内容介绍两个电机完成直线插补运动 一、 Bresenham直线算法介绍 Bresenham直线算法由Jack Elton Bresenham于1962年在IBM开发,最初用于计算机显示直线,它确定应该选择的n维光栅的点&#…...
一个从oracle使用spool导出数据到kadb的脚本
1. dump_data.sh调用sql_dump.sh导出数据 2. load_data.sh将导出的数据加载至KADB 1. dump_data.sh #!/bin/bash begin_time$(date %Y%m%d -d -1 day) end_time$(date %Y%m%d) echo "数据导出日期:"$begin_time echo "数据导出日期:"$begin_time >>…...
【STM32】GPIO口以及EXTI外部中断
个人主页~ 有关结构体的知识在这~ 有关枚举的知识在这~ GPIO口以及EXTI外部中断 GPIO一、简介二、基本结构三、输入输出模式1、输入模式(1)上拉输入(2)下拉输入(3)浮空输入(4)模拟输…...
Confluent Cloud Kafka 可观测性最佳实践
Confluent Cloud 介绍 Confluent Cloud 是一个完全托管的 Apache Kafka 服务,提供高可用性和可扩展性,旨在简化数据流处理和实时数据集成。用户可以轻松创建和管理 Kafka 集群,而无需担心基础设施的维护和管理。Confluent Cloud 支持多种数据…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理:检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目:RankRAG:Unifying Context Ranking…...
高效的后台管理系统——可进行二次开发
随着互联网技术的迅猛发展,企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心,成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统,它不仅支持跨平台应用,还能提供丰富…...
python读取SQLite表个并生成pdf文件
代码用于创建含50列的SQLite数据库并插入500行随机浮点数据,随后读取数据,通过ReportLab生成横向PDF表格,包含格式化(两位小数)及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...
