e网科技网站,网址广告,软件项目管理经典案例20篇,网站开发的编程语言简介
请参考下方#xff0c;学习入门操作
基于 Flask 和 Socket.IO 的 WebSocket 实时数据更新实现
在当今数字化时代#xff0c;实时性是衡量互联网应用的重要指标之一。无论是股票交易、在线游戏#xff0c;还是实时监控大屏#xff0c;WebSocket 已成为实现高效、双向…简介
请参考下方学习入门操作
基于 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, roomroom)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, roomroom)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(fClient {client_id} joined room: {room})# 如果房间没有数据生成器线程创建一个if room not in data_threads:data_threads[room] {active: True,thread: Thread(targetgenerate_sales_data if room sales else generate_visitor_data,args(room,),daemonTrue)}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(fClient {client_id} left room: {room})socketio.on(connect)
def handle_connect():print(fClient 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(timeout1)del data_threads[room]print(fClient disconnected: {client_id})if __name__ __main__:socketio.run(app, debugTrue, host0.0.0.0, port5000)数据生成与推送
后端的核心逻辑是数据生成与推送
数据生成通过 generate_sales_data 和 generate_visitor_data 函数生成随机数据并定时推送到客户端。房间管理通过 join_room 和 leave_room 方法管理客户端的房间订阅。线程管理使用线程来生成数据并在客户端离开房间时停止线程。
HTML 结构
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title实时数据大屏/titlescript srchttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js/scriptstylebody {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
bodyh1 styletext-align: center; margin-bottom: 40px;实时数据监控/h1div classcontrolsbutton classbtn onclicktoggleRoom(sales) idsalesBtn销售数据/buttonbutton classbtn onclicktoggleRoom(visitors) idvisitorsBtn访问数据/button/divdiv classdashboard!-- 销售数据卡片 --div classcard idsalesCard styledisplay: none;h2销售额/h2div idsales classvalue0/divdiv实时销售金额 (元)/div/divdiv classcard idordersCard styledisplay: none;h2订单数/h2div idorders classvalue0/divdiv实时订单统计/div/div!-- 访问数据卡片 --div classcard idvisitorsCard styledisplay: none;h2访问量/h2div idvisitors classvalue0/divdiv当前访问人数/div/divdiv classcard idactiveUsersCard styledisplay: none;h2活跃用户/h2div idactive_users classvalue0/divdiv实时活跃用户数/div/div/divdiv classtimestamp idtimestamp最后更新时间: --:--:--/divscriptconst 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数据可视化。
