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

深入浅出 WebSocket：构建实时数据大屏的高级实践

news 2025/7/5 6:52:39

简介

请参考下方，学习入门操作

基于 Flask 和 Socket.IO 的 WebSocket 实时数据更新实现

在当今数字化时代，实时性是衡量互联网应用的重要指标之一。无论是股票交易、在线游戏，还是实时监控大屏，WebSocket 已成为实现高效、双向实时通信的最佳选择之一。本文将通过一个基于 WebSocket 实现的实时数据大屏案例，深入探讨 WebSocket 的高级用法和优化技巧。

WebSocket 的典型应用场景

  • 实时数据监控：如运营监控大屏、设备状态监控等。
  • 在线协作：如 Google Docs 的多人编辑。
  • 实时聊天：如即时通讯工具。
  • 实时通知：如电商的价格变动提醒。

场景分析：实时数据监控大屏

本案例的目标是实现一个实时数据监控大屏，通过 WebSocket 技术，将实时更新的数据动态展示在用户界面中。

需求分析

  • 实现不同房间的数据订阅（如销售数据和访问数据）。
  • 支持多客户端实时接收服务器推送的最新数据。
  • 动态更新界面，提供流畅的用户体验。

技术选型

  • 前端：HTML、CSS、JavaScript 使用 Socket.IO 客户端库。
  • 后端：基于 Flask 和 Flask-SocketIO 实现 WebSocket 服务。
  • 实时数据生成：使用 Python 的 random 模块模拟实时数据。

后端实现

from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit, join_room, leave_room
import random
import time
from threading import Threadapp = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)# 存储客户端订阅的房间信息
client_rooms = {}
# 存储数据生成器线程
data_threads = {}def generate_sales_data(room):"""生成销售相关数据"""while room in data_threads and data_threads[room]['active']:data = {'sales': random.randint(1000, 5000),'orders': random.randint(50, 200),'timestamp': time.strftime('%H:%M:%S')}socketio.emit('update_data', data, room=room)time.sleep(2)def generate_visitor_data(room):"""生成访问量相关数据"""while room in data_threads and data_threads[room]['active']:data = {'visitors': random.randint(100, 1000),'active_users': random.randint(50, 300),'timestamp': time.strftime('%H:%M:%S')}socketio.emit('update_data', data, room=room)time.sleep(3)@app.route('/')
def index():return render_template('index.html')@socketio.on('join')
def on_join(data):"""处理客户端加入房间请求"""room = data.get('room')if not room:return# 获取客户端IDclient_id = request.sid# 将客户端加入房间join_room(room)client_rooms[client_id] = roomprint(f'Client {client_id} joined room: {room}')# 如果房间没有数据生成器线程，创建一个if room not in data_threads:data_threads[room] = {'active': True,'thread': Thread(target=generate_sales_data if room == 'sales' else generate_visitor_data,args=(room,),daemon=True)}data_threads[room]['thread'].start()@socketio.on('leave')
def on_leave(data):"""处理客户端离开房间请求"""room = data.get('room')if not room:returnclient_id = request.sidleave_room(room)if client_id in client_rooms:del client_rooms[client_id]print(f'Client {client_id} left room: {room}')@socketio.on('connect')
def handle_connect():print(f'Client connected: {request.sid}')@socketio.on('disconnect')
def handle_disconnect():client_id = request.sidif client_id in client_rooms:room = client_rooms[client_id]leave_room(room)del client_rooms[client_id]# 检查房间是否还有其他客户端if not client_rooms.values().__contains__(room):# 如果没有，停止数据生成器if room in data_threads:data_threads[room]['active'] = Falsedata_threads[room]['thread'].join(timeout=1)del data_threads[room]print(f'Client disconnected: {client_id}')if __name__ == '__main__':socketio.run(app, debug=True, host='0.0.0.0', port=5000)

数据生成与推送

后端的核心逻辑是数据生成与推送：

  • 数据生成：通过 generate_sales_data 和 generate_visitor_data 函数生成随机数据，并定时推送到客户端。
  • 房间管理：通过 join_room 和 leave_room 方法管理客户端的房间订阅。
  • 线程管理：使用线程来生成数据，并在客户端离开房间时停止线程。

HTML 结构

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实时数据大屏</title><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script><style>body {margin: 0;padding: 20px;background-color: #1a1a1a;color: #fff;font-family: Arial, sans-serif;}.controls {text-align: center;margin-bottom: 30px;}.btn {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;margin: 0 10px;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;}.btn:hover {background-color: #45a049;}.btn.active {background-color: #2E7D32;}.dashboard {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;max-width: 1200px;margin: 0 auto;}.card {background-color: #2a2a2a;border-radius: 10px;padding: 20px;text-align: center;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.card h2 {margin: 0 0 10px 0;color: #4CAF50;}.value {font-size: 2.5em;font-weight: bold;margin: 10px 0;}.timestamp {text-align: right;color: #888;margin-top: 20px;}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.05); }100% { transform: scale(1); }}.update {animation: pulse 0.5s ease-in-out;}</style>
</head>
<body><h1 style="text-align: center; margin-bottom: 40px;">实时数据监控</h1><div class="controls"><button class="btn" onclick="toggleRoom('sales')" id="salesBtn">销售数据</button><button class="btn" onclick="toggleRoom('visitors')" id="visitorsBtn">访问数据</button></div><div class="dashboard"><!-- 销售数据卡片 --><div class="card" id="salesCard" style="display: none;"><h2>销售额</h2><div id="sales" class="value">0</div><div>实时销售金额 (元)</div></div><div class="card" id="ordersCard" style="display: none;"><h2>订单数</h2><div id="orders" class="value">0</div><div>实时订单统计</div></div><!-- 访问数据卡片 --><div class="card" id="visitorsCard" style="display: none;"><h2>访问量</h2><div id="visitors" class="value">0</div><div>当前访问人数</div></div><div class="card" id="activeUsersCard" style="display: none;"><h2>活跃用户</h2><div id="active_users" class="value">0</div><div>实时活跃用户数</div></div></div><div class="timestamp" id="timestamp">最后更新时间: --:--:--</div><script>const socket = io();let currentRooms = new Set();// 更新数据的函数function updateValue(elementId, value) {const element = document.getElementById(elementId);if (element) {element.textContent = value;element.classList.remove('update');void element.offsetWidth; // 触发重绘element.classList.add('update');}}// 切换房间function toggleRoom(room) {const btn = document.getElementById(room + 'Btn');if (currentRooms.has(room)) {// 离开房间socket.emit('leave', { room: room });currentRooms.delete(room);btn.classList.remove('active');// 隐藏相关卡片if (room === 'sales') {document.getElementById('salesCard').style.display = 'none';document.getElementById('ordersCard').style.display = 'none';} else {document.getElementById('visitorsCard').style.display = 'none';document.getElementById('activeUsersCard').style.display = 'none';}} else {// 加入房间socket.emit('join', { room: room });currentRooms.add(room);btn.classList.add('active');// 显示相关卡片if (room === 'sales') {document.getElementById('salesCard').style.display = 'block';document.getElementById('ordersCard').style.display = 'block';} else {document.getElementById('visitorsCard').style.display = 'block';document.getElementById('activeUsersCard').style.display = 'block';}}}// 监听数据更新事件socket.on('update_data', function(data) {// 更新所有收到的数据Object.keys(data).forEach(key => {if (key !== 'timestamp') {updateValue(key, data[key]);}});document.getElementById('timestamp').textContent = '最后更新时间: ' + data.timestamp;});// 连接时自动加入销售数据房间socket.on('connect', function() {toggleRoom('sales');});</script>
</body>
</html>

JavaScript 逻辑

在前端代码中，我们使用了 Socket.IO 客户端库来与服务器进行 WebSocket 通信。主要逻辑如下：

  • 连接服务器：通过 io() 方法连接到服务器。
  • 切换房间：用户点击按钮时，通过 toggleRoom 函数切换不同的数据房间。
  • 更新数据：监听 update_data 事件，更新页面上的数据。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

WebSocket 的高级实践与优化

在实际应用中，可能需要管理多个房间，每个房间对应不同的数据类型或用户组。通过 join_room 和 leave_room 方法，可以轻松实现多房间管理。

数据压缩与优化

对于大规模数据传输，可以考虑使用数据压缩技术来减少带宽占用。例如，使用 gzip 或 brotli 压缩数据包，或者在前端进行数据解压缩。

断线重连与心跳机制

WebSocket 连接可能会因为网络问题而断开。为了保证连接的稳定性，可以实现断线重连机制和心跳包检测。通过定时发送心跳包，可以及时检测连接状态，并在断线时自动重连。

安全性与权限控制

在生产环境中，安全性是一个不可忽视的问题。可以通过以下方式增强 WebSocket 连接的安全性：

  • 使用 HTTPS：确保 WebSocket 连接通过加密的 HTTPS 协议进行。
  • 身份验证：在连接建立时进行身份验证，确保只有授权用户才能访问数据。
  • 权限控制：根据用户角色控制其访问的房间和数据类型。

扩展与定制

WebSocket 的应用场景非常广泛，可以根据具体需求进行扩展和定制。例如，结合 WebRTC 实现实时音视频通信，或者结合 WebGL 实现实时3D数据可视化。

相关文章：

深入浅出 WebSocket：构建实时数据大屏的高级实践

简介 请参考下方&#xff0c;学习入门操作 基于 Flask 和 Socket.IO 的 WebSocket 实时数据更新实现 在当今数字化时代&#xff0c;实时性是衡量互联网应用的重要指标之一。无论是股票交易、在线游戏&#xff0c;还是实时监控大屏&#xff0c;WebSocket 已成为实现高效、双向…...

编程日记 2024/11/27 19:46:12

三开关VUE组件

一、使用效果 <template><QqThreeSwitch v-model"value" /><!-- <SqThreeSwitch v-model"value" :options"[test1, test2, test3]"><template #left-action><div style"display: flex"><IconMoon…...

编程日记 2024/11/27 19:44:09

SpringCloud+SpringCloudAlibaba学习笔记

SpringCloud 服务注册中心 eureka ap 高可用 分布式容错 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-server</artifactId> </dependency> <dependency><groupId…...

编程日记 2024/11/27 19:40:05

牛客小白月赛105（A~E）

文章目录 A lz的吃饭问题思路code B lz的数字问题思路code C lz的蛋挞问题思路code D lz的染色问题思路code E lz的括号问题思路code 总结 牛客小白月赛105 A lz的吃饭问题 思路 签到题&#xff0c;比较大小即可 code void solve(){int a,b,c,d;cin >> a >> b…...

编程日记 2024/11/27 19:39:04

OSPF协议整理

OSPF&#xff08;Open Shortest Path First&#xff09;即开放式最短路径优先协议&#xff0c;是一种广泛应用于大型网络中的链路状态路由协议。 OSPF 的基本概念 OSPF 是基于链路状态算法的内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在一个自治系统&#xff…...

编程日记 2024/11/27 19:38:03

Java中的多线程

文章目录 Java中的多线程一、引言二、多线程的创建和启动1、继承Thread类2、实现Runnable接口 三、线程的常用方法1、currentThread()和getName()2、sleep()和yield()3、join() 四、线程优先级五、使用示例六、总结 Java中的多线程 一、引言 在Java中&#xff0c;多线程编程是…...

编程日记 2024/11/27 19:35:00

什么是聚簇索引、非聚簇索引、回表查询

其实聚集索引也叫聚簇索引&#xff0c;二级索引也叫非聚簇索引&#xff0c;大家不要认为这是不同的两个知识点。 定义 先看一下数据库的索引介绍。 聚簇索引 1. 如果存在主键&#xff08;一般都存在&#xff09;&#xff0c;主键索引就是聚簇索引。 2. 如果不存在&#xff0c;…...

编程日记 2024/11/27 19:31:57

探索 Spring 框架核心组件：构建强大 Java 应用的基石

Spring框架作为Java企业级开发的首选框架之一&#xff0c;其强大的功能和灵活的架构深受开发者喜爱。Spring框架的核心组件共同构建了一个高效、可扩展的应用程序开发平台。本文将深入探讨Spring框架的核心组件&#xff0c;揭示它们如何在Spring框架中发挥关键作用。 一、Bean…...

编程日记 2024/11/27 19:27:54

Android 13 Aosp 默认允许应用动态权限

图库 frameworks/base/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.java 修改 public void grantDefaultPermissions(int userId) {DelayingPackageManagerCache pm new DelayingPackageManagerCache();grantPermissionsToSysCompon…...

编程日记 2024/11/27 19:26:53

【C++知识总结1】c++第一篇，简单了解一下命名空间是什么

一、C的由来 C语言是一种结构化和模块化的编程语言&#xff0c;它对于处理较小规模的程序非常适用。然而&#xff0c;当面临需要高度抽象和建模的复杂问题&#xff0c;以及规模较大的程序时&#xff0c;C语言就显得不那么合适了。为了应对这种挑战&#xff0c;并在解决软件危机…...

编程日记 2024/11/27 19:25:52

从0开始深度学习（32）——循环神经网络的从零开始实现

本章将从零开始&#xff0c;基于循环神经网络实现字符级语言模型&#xff08;不是单词级&#xff09; 首先我们把从0开始深度学习&#xff08;30&#xff09;——语言模型和数据集中的load_corpus_time_machine()函数进行引用&#xff0c;用于导入数据&#xff1a; train_iter…...

编程日记 2024/11/27 19:22:49

GitLab使用操作v1.0

1.前置条件 Gitlab 项目地址&#xff1a;http://******/req Gitlab账户信息&#xff1a;例如 001/******自己的分支名称&#xff1a;例如 001-master&#xff08;注&#xff1a;master只有项目创建者有权限更新&#xff0c;我们只能更新自己分支&#xff0c;然后创建合并请求&…...

编程日记 2024/11/27 19:20:47

cuda conda yolov11 环境搭建

优雅的 yolo v11 标注工具 AutoLabel Conda环境直接识别训练 nvidia-smi 检查CUDA版本 下载nvidia cudnn对应的版本 将cuDNN压缩包内对应的文件复制到本地bin、include、lib的文件夹中 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.6 miniConda快速开始-安装 执行…...

编程日记 2024/11/27 19:17:45

解决SpringBoot连接Websocket报：请求路径 404 No static resource websocket.

问题发现 最近在工作中用到了WebSocket进行前后端的消息通信&#xff0c;后端代码编写完后&#xff0c;测试一下是否连接成功&#xff0c;发现报No static resource websocket.&#xff0c;看这个错貌似将接口变成了静态资源来访问了&#xff0c;第一时间觉得是端点没有注册成…...

编程日记 2024/11/27 19:09:38

element-plus的组件数据配置化封装 - table

目录 一、封装的table、table-column组件以及相关ts类型的定义 1、ATable组件的封装 - index.ts 2、ATableColumn组件的封装 - ATableColumn.ts 3、ATable、ATableColumn类型 - interface.ts 二、ATable、ATableColumn组件的使用 三、相关属性、方法的使用以及相关说明 1. C…...

编程日记 2024/11/27 19:07:36

【二维动态规划：交错字符串】

介绍 编程语言&#xff1a;Java 本篇介绍一道比较经典的二维动态规划题。 交错字符串 主要说明几点&#xff1a; 为什么双指针解不了&#xff1f;为什么是二维动态规划&#xff1f;根据题意分析处转移方程。严格位置依赖和空间压缩优化。 题目介绍 题意有点抽象&#xff0c…...

编程日记 2024/11/27 19:06:35

goframe开发一个企业网站 MongoDB 完整工具包18

1. MongoDB 工具包完整实现 (mongodb.go) package mongodbimport ("context""fmt""time""github.com/gogf/gf/v2/frame/g""go.mongodb.org/mongo-driver/mongo""go.mongodb.org/mongo-driver/mongo/options" )va…...

编程日记 2024/11/27 19:03:32

在vue中，根据后端接口返回的文件流实现word文件弹窗预览

需求 弹窗预览word文件&#xff0c;因浏览器无法直接根据blob路径直接预览word文件&#xff0c;所以需要利用插件实现。 解决方案 利用docx-preview实现word文件弹窗预览&#xff0c;以node版本16.21.3和docx-preview版本0.1.8为例 具体实现步骤 1、安装docx-preview插件 …...

编程日记 2024/11/27 19:00:29

动态规划之背包问题

0/1背包问题 1.二维数组解法 题目描述&#xff1a;有一个容量为m的背包&#xff0c;还有n个物品&#xff0c;他们的重量分别为w1、w2、w3.....wn&#xff0c;他们的价值分别为v1、v2、v3......vn。每个物品只能使用一次&#xff0c;求可以放进背包物品的最大价值。 输入样例…...

编程日记 2024/11/27 18:59:26

【Python】 深入理解Python的单元测试：用unittest和pytest进行测试驱动开发

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 单元测试是现代软件开发中的重要组成部分，通过验证代码的功能性、准确性和稳定性，提升代码质量和开发效率。本文章深入介绍Python中两种主流单元测试框架：unittest和pytest，并结合测试驱动开发（TDD）…...

编程日记 2024/11/27 18:56:20

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/7/4 4:03:45

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/7/4 8:53:10

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/7/5 6:12:40

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/6/21 2:06:19

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/2 11:29:25

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/7/3 14:45:13

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/7/4 3:42:17

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02