实时数据推送 Java WebSocket+MySQL实现监控数据大屏后台系统

最新推荐文章于 2026-06-24 11:29:29 发布

原创最新推荐文章于 2026-06-24 11:29:29 发布 · 1k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#java #websocket #mysql

技术选型与架构设计

后端采用Spring Boot框架集成WebSocket协议，实现全双工通信；MySQL作为数据存储层，配合定时任务或触发器实现数据变更监听；前端使用ECharts或D3.js进行可视化渲染，通过WebSocket接收实时数据。

核心实现步骤

WebSocket服务端配置

Spring Boot中通过@ServerEndpoint注解创建WebSocket端点，配置消息广播机制。关键代码示例：

@ServerEndpoint("/realtime")
@Component
public class DataPushEndpoint {
    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<>());

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message) {
        // 处理客户端消息
    }

    public static void broadcast(String data) {
        sessions.forEach(session -> {
            try {
                session.getBasicRemote().sendText(data);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
}

MySQL数据变更监听

方案一：定时轮询

@Scheduled(fixedRate = 1000)
public void pollDatabase() {
    List<MonitorData> newData = jdbcTemplate.query(
        "SELECT * FROM monitor_data WHERE update_time > ?", 
        new Object[]{lastPollTime},
        rowMapper);
    if(!newData.isEmpty()) {
        DataPushEndpoint.broadcast(new Gson().toJson(newData));
    }
}

方案二：使用Debezium捕获binlog变化，或创建数据库触发器配合消息队列。

前端数据消费

建立WebSocket连接并处理数据更新：

const socket = new WebSocket('ws://your-server/realtime');
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // 更新ECharts实例
    chart.setOption({
        series: [{
            data: data.values
        }]
    });
};

性能优化要点

使用STOMP子协议减少消息头开销
配置MySQL连接池（如HikariCP）保持长连接
对高频更新数据设置采样率（如每秒最多推送10次）
采用Protobuf替代JSON压缩数据体积

异常处理机制

实现WebSocket重连策略（指数退避算法）
添加心跳检测保持连接活跃
记录消息轨迹便于故障排查
准备降级方案（如HTTP长轮询）

安全防护措施

启用WSS协议加密通信
实现JWT鉴权控制连接权限
配置SQL注入防护和XSS过滤
限制单IP连接频率

部署架构示例

[MySQL Master] 
    ↓ 
[Debezium Connector] → [Kafka] ← [Spring Boot] 
                                   ↑      ↓ 
                        [Dashboard Frontend] ↔ [WebSocket]

此方案支持每秒万级数据更新推送，端到端延迟可控制在200ms内。实际实施时需根据监控指标数量和精度要求调整数据库索引和消息批处理策略。