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

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

article 2024/12/22 9:03:25

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