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

【开源工具】基于Flask与Socket.IO的跨平台屏幕监控系统实战（附完整源码）

news 2025/8/28 8:18:29

🖥️ 【源码解读+实战】基于Flask与Socket.IO的跨平台屏幕监控系统：从零构建企业级设备管理平台 🚀

在这里插入图片描述
请添加图片描述

🌈 个人主页：创客白泽 - CSDN博客
🔥 系列专栏：🐍《Python开源项目实战》
💡 热爱不止于代码，热情源自每一个灵感闪现的夜晚。愿以开源之火，点亮前行之路。
🐋 希望大家多多支持，我们一起进步！
👍 🎉如果文章对你有帮助的话，欢迎 点赞 👍🏻 评论 💬 收藏 ⭐️ 加关注+💗分享给更多人哦

请添加图片描述

在这里插入图片描述

作者：[创客白泽]
关键词：Flask Socket.IO 屏幕监控 设备管理 Web实战 Python JavaScript

📖 概述

在当今数字化时代，对分布式设备的集中监控与管理需求日益增长。无论是企业IT资产管理、机房运维，还是教育实验室的远程协助，一个稳定、高效的屏幕监控系统都显得至关重要。

本文将深入剖析一个基于 Flask + Socket.IO 构建的跨平台实时屏幕监控系统。我们将从系统架构、核心功能、代码实现、部署实战等多个维度，全面解析如何从零搭建一个企业级的设备监控平台。通过本文，你不仅能获得完整的可运行源码，更能深入理解现代Web系统设计中实时通信、状态管理、安全认证等核心概念。

系统核心价值：
✅ 实时性：基于WebSocket协议，实现设备状态与屏幕画面的低延迟传输。
✅ 跨平台：客户端支持Windows、macOS、Linux，服务端跨平台部署。
✅ 集中管理：Web可视化界面，一站式管理所有在线设备。
✅ 安全可靠：基于Flask-Login的会话管理，防止未授权访问。
✅ 开箱即用：提供详细配置说明与源码，五分钟即可上手部署。

🎯 功能特性

本系统采用经典的C/S（客户端/服务端）架构，并辅以B/S（浏览器/服务端）的管理界面。

服务端（Manager）

  • 设备认证与注册：接收客户端的注册请求，维护设备清单。
  • 心跳检测：通过定期心跳包判断设备在线状态，自动标记离线设备。
  • Web管理后台：提供美观的Web界面，展示设备列表、实时预览、系统仪表盘。
  • RESTful API：为客户端和管理界面提供全套API接口。
  • 会话管理：基于Flask-Login实现安全的用户登录与权限控制。

客户端（Agent）

  • 自注册：启动时自动向服务端注册，上报设备信息（主机名、IP、系统等）。
  • 资源监控：实时采集并上报CPU、内存使用率。
  • 屏幕捕获：提供API接口，按需截取屏幕画面。
  • 心跳维持：定期向服务端发送心跳包，宣告自身存活状态。

Web管理端（Frontend）

  • 可视化仪表盘：直观展示设备总数、在线率等关键指标。
  • 设备列表管理：以表格形式展示所有设备，支持编辑备注、删除设备。
  • 多宫格实时预览：支持4/9/16宫格视图，实时刷新所有在线设备的屏幕画面。
  • 全屏模式：双击可进入单设备全屏模式，享受无损画质预览。
  • 密码管理：支持在线修改管理员密码。

✨ 效果展示

1. 炫酷登录页

采用毛玻璃（Glassmorphism）设计风格，支持密码显隐、表单验证、动画反馈。
在这里插入图片描述

2. 系统仪表盘

卡片式布局展示核心系统指标，下方附有最近活动时间线。
在这里插入图片描述

3. 设备列表

表格清晰展示设备详细信息。预览页面支持多种布局，实时流畅。
在这里插入图片描述

4. 实时预览

专注多设备屏幕，支持手动实时刷新上线设备，运维调试利器。
在这里插入图片描述

5.更改密码

在这里插入图片描述

🗂️ 系统架构与流程

工作流程解析：

  1. 客户端启动：读取配置文件，收集设备信息，向服务端注册。
  2. 服务端注册：服务端将设备信息存入内存数据库，并建立映射关系。
  3. 心跳维持：客户端每隔30秒发送一次心跳包，服务端更新其last_heartbeat时间戳。
  4. 状态检查：服务端后台线程每30秒检查一次设备状态，超过90秒无心跳则标记为离线。
  5. Web登录：用户通过浏览器登录管理后台。
  6. 拉取列表：前端通过AJAX调用/api/devices接口获取设备列表。
  7. 实时预览：前端为每个在线设备创建一个<img>标签，其src指向客户端的截图API，并通过定时器不断刷新（附加时间戳避免缓存）。
  8. 全屏模式：双击预览图，前端打开模态框，并以更高频率刷新大图。

🛠️ 软件步骤说明

环境准备

  • Python 3.7+
  • pip（Python包管理工具）

1. 安装依赖

创建并进入项目目录，安装所需Python库：

# 安装服务端依赖
pip install flask flask-socketio flask-login psutil pillow# 安装客户端依赖 (如果需要在客户端机器上运行Agent)
pip install flask requests psutil pillow pyautogui

2. 配置文件

服务端配置 (server.json)：

{"server_port": 5000,"show_tips": 1
}

客户端配置 (client.json)：


{"client_port": 5001,"manager_ip": "127.0.0.1","manager_port": 5000,"show_tips": 1,"device_id": null,"device_name": "My-PC","remark": "技术部-开发机"
}

3. 启动服务

  1. 启动服务端（管理端）：
  python server.py

访问 http://localhost:5000 并使用默认账号(admin)/密码(123456)登录。

  1. 启动客户端（被控端）：
    在需要被监控的设备上运行：
   python client.py

客户端启动后会自动向服务端注册。

4. 访问与管理

打开浏览器，访问服务端地址 (http://你的服务器IP:5000)，即可在“设备预览”页面看到已注册的客户端并进行监控。

🔍 核心代码解析

1. 服务端核心：设备状态维护与心跳检测

server.py 中的 check_device_status 线程是系统的“脉搏”。

def check_device_status():while True:time.sleep(30) # 每30秒检查一次for device_id, device in devices.items():last_heartbeat = datetime.fromisoformat(device['last_heartbeat'])# 计算当前时间与最后一次心跳时间的差值if datetime.now() - last_heartbeat > timedelta(seconds=90):device['status'] = 'offline' # 超过90秒无心跳，标记为离线

深度解读：
这里采用了一个独立的后台线程来执行状态检查，避免了在Web请求中处理耗时任务，保证了API的响应速度。使用 datetime 对象进行时间计算，准确可靠。90秒的阈值（3个心跳周期）有效避免了网络短暂波动造成的误判。

2. 客户端核心：屏幕截图与资源监控

client.py 使用 PIL.ImageGrab 和 psutil 来获取系统数据。

@app.route('/api/device/screenshot')
def get_screenshot():try:screenshot = ImageGrab.grab() # 截屏img_io = io.BytesIO() # 创建内存字节流screenshot.save(img_io, 'JPEG', quality=85) # 压缩为JPEG并存入内存img_io.seek(0)return send_file(img_io, mimetype='image/jpeg') # 以文件形式返回except Exception as e:# ... 异常处理，返回错误图片

深度解读：

  • 内存操作：使用 BytesIO 在内存中完成图片的压缩和存储，避免了磁盘I/O，性能极高。
  • 错误处理：完善的异常捕获保证了客户端服务的稳定性，即使截图失败也不会导致进程崩溃。
  • 资源监控：psutil.cpu_percent() 和 psutil.virtual_memory().percent 是跨平台获取系统资源的首选库。

3. 前端核心：实时预览与性能优化

前端通过为每个设备图片附加时间戳参数来避免浏览器缓存，实现强制刷新。

function refreshPreview(deviceId) {// ...const timestamp = new Date().getTime();const random = Math.random().toString(36).substring(7); // 双重防缓存策略imgElement.src = `http://${device.ip_address}:${device.port}/api/device/screenshot?t=${timestamp}&r=${random}`;
}

深度解读：

  • 缓存破坏（Cache Busting）：t=${timestamp} 参数确保每次请求的URL都不同，从而绕过浏览器和代理服务器的缓存。
  • 优雅降级：通过 onload 和 onerror 事件处理图片加载成功与失败的状态，提供良好的用户体验。
  • 连接管理：在离开预览页面或关闭全屏时，通过 stopAllPreviews() 和 clearInterval 及时清理定时器，释放资源，防止内存泄漏。

4. 安全核心：认证与会话管理

使用 Flask-Login 管理用户会话。

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login' # 指定登录视图
login_manager.session_protection = "strong" # 强会话保护@app.route('/login', methods=['POST'])
def login():username = request.form.get('username')password = request.form.get('password')if username in users and users[username]['password'] == password:user = User(username)login_user(user) # Flask-Login的核心方法，建立用户会话return jsonify({'success': True})return jsonify({'success': False, 'message': '无效的用户名或密码'})@app.route('/api/devices')
@login_required # 装饰器保护路由，要求登录才能访问
def get_devices():# ... 仅认证用户可访问

深度解读：

  • @login_required 装饰器是保护敏感API的第一道防线。
  • session_protection = "strong" 会监测用户的基本信息（如IP地址、User Agent），若发生变更则会强制用户重新登录，增强安全性。
  • 密码修改功能同样做了多重验证：当前密码校验、新密码一致性校验、新密码长度校验。

📦 源码下载与使用

本项目已打包提供所有源码文件，结构清晰，开箱即用。

文件结构：

ScreenMonitor/
├── server.py           # 服务端主程序
├── client.py           # 客户端主程序
├── server.json         # 服务端配置文件（可自动生成）
├── client.json         # 客户端配置文件（可自动生成）
├── templates/          # Flask模板目录
│   ├── login.html      # 登录页面模板
│   └── index.html      # 管理后台主页面模板
└── README.md           # 项目说明文档

📥 点此下载完整源码包

使用步骤：

  1. 下载并解压源码包。
  2. 分别在一台服务器（Manager）和一台或多台客户机（Agent）上安装Python环境及依赖。
  3. 在服务器上，运行 python server.py。
  4. 在客户机上，修改 client.json 中的 manager_ip 为服务器的实际IP地址，然后运行 python client.py。
  5. 打开浏览器，访问 http://<服务器IP>:5000，开始使用。

🧠 总结与展望

本文详细讲解了一个功能完备的实时屏幕监控系统的实现。通过对服务端、客户端、前端三个组件的代码解析，我们不仅学习了Flask、Socket.IO等技术的实战应用，更深入理解了状态机设计、心跳机制、实时数据推送、异步任务处理等系统编程的核心思想。

可扩展方向：
🔹 数据持久化：当前设备信息存储在内存中，服务重启会丢失。可以集成SQLAlchemy + MySQL/PostgreSQL或SQLite进行持久化存储。
🔹 告警功能：增加自定义规则（如CPU使用率>90%持续1分钟），触发邮件、钉钉、Webhook等告警。
🔹 远程命令：在管理端提供安全的远程Shell命令执行功能。
🔹 集群部署：服务端支持水平扩展，通过Redis共享Socket.IO会话和设备状态，应对大规模设备接入。
🔹 客户端优化：打包为Windows服务或macOS/Linux Daemon，并实现开机自启。

最后寄语：
希望本项目能成为你学习Python Web开发、网络编程和系统架构的一个绝佳案例。动手实践，并根据自己的想法对其进行扩展和优化，这才是提升技术能力的真正捷径！

http://www.xdnf.cn/news/1374967.html

相关文章：

  • 前端性能优化：从指标监控到全链路落地（2024最新实战指南）
  • 论文阅读：Gorilla: Large Language Model Connected with Massive APIs
  • 深度学习入门：神经网络基础知识
  • lesson47：Linux常用软件使用指南：远程连接、远程拷贝、Vim与Nginx
  • VESA时序检测模块设计verilog实现
  • Ubuntu 24 Server 如何设置无线网络
  • imx6ull-驱动开发篇45——Linux 下 SPI 驱动框架简介
  • d435i相机读取镜头内参和相对之间的外参
  • 艾体宝新闻 | 98%好评率！KnowBe4 连续5年蝉联第一，现开放免费钓鱼测试等你解锁
  • 内网应用如何实现外网访问？外地通过公网地址访问内网服务器的设置方法
  • 遗传算法：模拟自然选择的优化智慧
  • Spring Boot项目集成日志系统使用完整指南
  • 欧洲数字化养殖平台 Herdwatch 借力 Iceberg + StarRocks 提升分析能力
  • 嵌入式开发学习 C++：day01
  • 动态规划：硬币兑换（有趣）
  • LeetCode - 739. 每日温度
  • 线性回归原理推导与应用（十一）：多重共线性
  • 获取服务器指标的信息
  • bin log 和 redo log有什么区别
  • Mybatis总结
  • 【如何解决Java中的ClassCastException类转换异常问题】
  • 基于Matlab结合肤色检测与卷积神经网络的人脸识别方法研究
  • 基于MATLAB/Simulink的单机带负荷仿真系统搭建
  • 分布式2PC理论
  • 使用 html2canvas + jspdf 实现页面元素下载为pdf文件
  • UE5 查找组件
  • 云原生安全架构设计与零信任实践
  • 预测模型及超参数：1.传统机器学习：SVR与KNN
  • 工业网络安全：保护制造系统和数据
  • HIVE的Window functions窗口函数【二】