654 字
3 分钟
做了一个可以让大家视奸我的网站
缘起
没别的,之前就看到有类似的项目了,不过那个项目是部署在Docker上的,需要依赖服务器运行,我就在想能不能前后端分离,将项目直接部署到EdgeOne或者Vercel上。
于是有了这个项目:Looking-me
Waiting for api.github.com...
效果预览

架构设计
flowchart LR subgraph A["本地采集端"] A1[Python] A2[win32gui 捕获窗口] A3[每 30s 心跳] end
subgraph B["云端服务"] B1[Supabase] B2[PostgreSQL] B3[Storage 图标] end
subgraph C["前端展示"] C1[EdgeOne 静态页面] C2[HTML/CSS] C3[supabase-js] end
A -->|REST API 写入 + 图标上传| B B -->|Realtime 订阅变更| C1. 本地采集端 (Python)
用 win32gui 获取当前活动窗口标题,psutil 获取进程名,通过 Supabase REST API 写入:
# 获取活动窗口hwnd = win32gui.GetForegroundWindow()title = win32gui.GetWindowText(hwnd)
# 通过 REST API 写入 Supabaserest_post("windows", { "id": 1, "title": title, "process": exe_name, "updated_at": "now()",})
# 同时累积使用时长usage[prev_process] += elapsedrest_post("usage_stats", {"process": proc, "seconds": secs})每 30 秒轮询一次,窗口变化时立即推送,同时每轮发送心跳保持在线状态。
2. 前端 (HTML + supabase-js)
前端是一个纯静态 HTML 文件,通过 supabase-js 的 Realtime 功能订阅数据库变更:
// 订阅 realtime 变更sb.channel('w') .on('postgres_changes', { event: '*', schema: 'public', table: 'windows', filter: 'id=eq.1' }, (payload) => { show(payload.new); // 实时更新界面 }) .subscribe();窗口切换时毫秒级响应,离线超过 60 秒自动显示 “似了” 骷髅。
部署教程
第一步:创建 Supabase 项目
- 打开 supabase.com,注册/登录
- 点击 New Project,填写名称和密码,完成创建
第二步:建表
在 SQL Editor 执行:
-- 当前窗口表CREATE TABLE public.windows ( id INTEGER PRIMARY KEY DEFAULT 1, title TEXT NOT NULL DEFAULT '', process TEXT NOT NULL DEFAULT '', updated_at TIMESTAMPTZ NOT NULL DEFAULT now());
-- 使用统计表CREATE TABLE public.usage_stats ( process TEXT PRIMARY KEY, seconds INTEGER NOT NULL DEFAULT 0, icon_url TEXT, updated_at TIMESTAMPTZ NOT NULL DEFAULT now());
-- RealtimeALTER PUBLICATION supabase_realtime ADD TABLE public.windows;ALTER PUBLICATION supabase_realtime ADD TABLE public.usage_stats;
-- RLSCREATE POLICY "allow_anon" ON public.windows FOR ALL USING (id = 1) WITH CHECK (id = 1);CREATE POLICY "allow_anon" ON public.usage_stats FOR ALL USING (true) WITH CHECK (true);
INSERT INTO public.windows (id, title, process) VALUES (1, '', '');然后执行 github里的 migration_icons.sql 创建图标存储桶。
第三步:获取 API 凭据
Supabase 控制台 → Settings → API Keys,记下:
- Project URL(形如
https://xxxx.supabase.co) - anon public key(以
eyJhbGci...开头)
第四步:配置本地采集端
打开 window_monitor.py,修改第 5-6 行:
SUPABASE_URL = "https://你的项目.supabase.co"SUPABASE_KEY = "你的anon key"第五步:上传前端
将生成的 index.html 、 styles.css 以及 icon.png 上传到 EdgeOne Pages:
第六步:启动
python window_monitor.py看到 [OK] Connected, tracking... 即表示成功。打开 EdgeOne 地址即可实时查看窗口活动。
访问 me.flygeon.top即可看到我在干啥~~(如果我还没似的话)~~
相关文章
12345
对个人主页进行了重构并迁移了框架
有趣的项目将原来的Svelte的个人主页重构为Next.js,大幅重构了页面,整体屎山得到优化
简单做了一个 Flutter 架构开发的跨平台媒体库,简单记录一下开发历程
有趣的项目由于神人微软的 Windows 媒体管理过于混乱,音频、视频、图片各管各的,导致用起来非常难受。于是我就简单写了一个媒体库,使用 Material Design 风格将这些媒体聚集在一起,方便了管理。
开发了一个个人导航页
有趣的项目一款基于 Svelte 5 + Vite 6 的暗黑风个人导航页,具有包含动态粒子特效、音乐播放器、博客文章时间线显示等功能,可以通过 Cookie 持久化用户设置,适配移动端与桌面端。
使用 AI 推理一键获取人声 MIDI:Vocal2Midi 项目体验
有趣的项目基于 Qwen3-ASR 与 GAME 模型的人声转 MIDI 工具 Vocal2Midi 体验分享,支持一键生成 MIDI / USTX / 对齐辅助文件,适配 UTAU、Vocaloid 等虚拟歌姬工作流。
为你的博客生成封面图吧
有趣的项目基于 afroim/easy_cover 二次开发的博客封面生成工具,新增深色模式、配置保存与导入导出,方便风格复用。
随机文章
12345
博客更新日志
未分类将会记录博客的更新内容。
关于主站迁移至cloudflare的说明
未分类出于后续博客的发展(恰饭)考虑,决定迁移至CF
部署你的Astrbot QQ机器人吧
教程从零开始部署一个功能强大的AstrBot QQ机器人,支持多种AI模型接入,实现智能群聊回复、私聊对话、自定义插件扩展等功能,成为赛博群老婆((
0成本将你的OneDrive部署至互联网,以及博客的一些小规划
教程使用CVercel和OneDrive API,无需服务器和域名即可将OneDrive网盘部署到互联网,实现文件在线预览和下载
为 Fuwari 博客添加 Umami 访问量统计
教程本文介绍如何基于 Umami 逆向 API 为静态博客添加实时访问量统计,包括侧边栏总览卡片和文章独立浏览量。