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+。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/941042.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Rust自学】5.1. 定义并实例化struct

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 5.1.1. 什么是struct struct的中文意思为结构体&#xff0c;它是一种自定义的数据类型&#xff0c;它允许程序为相关联的值命名和打包&am…

【自动驾驶】单目摄像头实现自动驾驶3D目标检测

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 概述算法介绍演示效果图像推理视频推理 核心代码算法处理过程使用方式环境搭建下载权重文件pytorch 推理&#xff08;自动选择CPU或GPU&#x…

Python+OpenCV系列:AI看图识人、识车、识万物

在人工智能风靡全球的今天&#xff0c;用 Python 和 OpenCV 结合机器学习实现物体识别&#xff0c;不仅是酷炫技能&#xff0c;更是掌握未来的敲门砖。本篇博文手把手教你如何通过摄像头或图片输入&#xff0c;识别人、动物、车辆及其他物品&#xff0c;让你的程序瞬间具备 AI …

永磁同步电机负载估计算法--自适应扩张状态观测器

一、 原理介绍 在线性扩张观测器中&#xff0c;LESO观测器增益ω0 决定了观测器的跟踪速度&#xff0c;ω0 越大&#xff0c;观测器估计精度越高&#xff0c; 抗干扰能力越强&#xff0c;瞬态响应速度加快&#xff0c;过大则会引入高频噪声使系统不稳定。为使观测器在全速域内…

【Spring事务】深入浅出Spring事务从原理到源码

什么是事务 保证业务操作完整性的一种数据库机制 &#xff08;driver 驱动&#xff09;事务特定 ACID A 原子性 &#xff08;多次操作 要不一起成功 要不一起失败 &#xff08;部分失败 savepoint&#xff09;&#xff09; C 一致性 &#xff08;事务开始时数据状态&#xff0c…

Apache解析漏洞(apache_parsingCVE-2017-15715)

apache_parsing 到浏览器中访问网站 http://8.155.8.239:81/ 我们写一个木马 1.php.jpg 我们将写好的木马上传 会得到我们上传文件的路径 我们访问一下 发现上传成功 发现木马运行成功&#xff0c;接下来使用蚁剑连接我们的图片马 获取 shell 成功 CVE-2013-454 我们还是到…

CCF-GESP 等级考试 2023年9月认证C++二级真题解析

2023年9月真题 一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 正确答案&#xff1a;D 解析&#xff1a;考察知识点&#xff1a;计算机基础 本题属于考察计算机基础知识。中国第一台计算机通用数字电子计算机于 1958 年 6 月由中科院计算所研制成功。那时候的逻…

linux环境使用yum方式安装nginx

linux环境使用yum方式安装nginx 一、nginx官网 二、nginx安装 点击首页的 Docs 或者 install 都可以&#xff0c;最终都是进入到Installing nginx页面 因为安装的服务器环境是linux centos 所以选择 Installation on Linux下面 packages 跳转链接 点击packages后 最终会跳转…

CS 144 check6: buiding an IP router

Lecture Notes Exercises 路由器的任务是根据路由表转发接收到的数据报&#xff1a;路由表是一系列规则&#xff0c;用于指导路由器针对任何给定的数据报应如何进行转发。 发送出什么接口。下一跳的IP地址。 这个check的工作是实现一个路由器&#xff0c;它可以为任何给定的…

Android Studio IDE环境配置

​需要安装哪些东西&#xff1a; Java jdk Java Downloads | OracleAndroid Studio 下载 Android Studio 和应用工具 - Android 开发者 | Android DevelopersAndroid Sdk 现在的Android Studio版本安装时会自动安装&#xff0c;需要注意下安装的路径Android Studio插件…

时钟周期、机器周期及指令周期是什么关系?

组成原理中&#xff0c;时钟周期、机器周期和指令周期是三个至关重要的概念&#xff0c;它们共同定义了计算机执行指令的基本时间框架。本文将对这三个周期进行详细介绍&#xff0c;并展示它们的工作原理。 一、时钟周期&#xff08;Clock Cycle&#xff09; 定义与作用 主…

YOLOv8改进,YOLOv8引入Hyper-YOLO的MANet混合聚合网络+HyperC2Net网络

摘要 理论介绍 MANet 的目标是通过多种卷积操作的协同作用,提高特征提取能力,并加强梯度流动,从而提升模型在不同层次的特征表示和语义深度。MANet 结合了三种卷积变体,通过混合使用它们来提高视觉特征的多样性和信息流动性。 HyperC2Net 的主要目标是通过超图结构对多层次…

挑战一个月基本掌握C++(第六天)了解函数,数字,数组,字符串

一 C函数 函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数&#xff0c;即主函数 main() &#xff0c;所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的&#xff0c;但在逻辑上&#xff…

vue的ElMessage的css样式不生效

我使用elementplus&#xff0c;是使用的用哪个单独引入的&#xff0c;然后表单校验时候警告的css不生效&#xff0c;就是这个效果 反复看视频的引入也没发现问题&#xff0c;后来才知道需要这个引入 import { ElMessage } from "element-plus"; import element-pl…

PromptGIP:Unifying lmage Processing as Visual Prompting Question Answering

“Unifying Image Processing as Visual Prompting Question Answering” 文章提出了一种名为 PromptGIP 的通用模型&#xff0c;将图像处理任务统一为视觉提示问答范式&#xff0c;在多个图像处理任务上展现出良好性能&#xff0c;为通用图像处理提供了新的思路和方法。 confe…

Windows服务器修复SSL/TLS协议信息泄露漏洞等...

为了保证生产环境的安全, 我们会定期对服务器进行漏洞扫描, 一般情况下我们都是使用Linux服务器, 某些情况会用到Windows服务器 出现SSL/TLS协议信息泄露漏洞问题一般情况下是远程连接使用了不安全的加密算法, 需要禁用这些加密算法 修复方法 从网络中查询修复方法又很多, 大…

基于AT89C52单片机的6位电子密码锁设计

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/90166684?spm1001.2014.3001.5503 14 部分参考设计如下&#xff1a; 目 录 摘要 1 abstract 2 1 绪论 3 1.1 课题背景 3 1.2 课题的目的和意义 3 1.3 电子密码…

考前倒计时98天

2024年12月21日到2025年3月29日共有 98​ 天 一、计算机基础 思维分类特征强调学科代表理论思维&#xff08;推理思维&#xff09;推理和演绎推理数学实验思维&#xff08;证实思维&#xff09;观察和总结自然规律归纳物理学计算思维&#xff08;构造思维&#xff09;设计和构造…

力扣-图论-70【算法学习day.70】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非…

最新详细Gmail 注册指南以及注册谷歌账号手机号码无法验证?解决方法分享

Gmail 注册指南&#xff1a;2024 年实用教程&#xff0c;解决手机号验证难题&#xff0c;开启你的数字之旅 在当今信息时代&#xff0c;Gmail 邮箱已成为我们工作与生活中常用的数字工具&#xff0c;它不仅功能强大、界面简洁&#xff0c;还是访问 Google 服务&#xff08;如 …