🚀 MCP Playwright VNC 项目 一个完整的多会话、容器化MCP系统，包含React + TypeScript客户端、Node.js服务器、Redis会话持久化、WebSocket实时更新，以及由Playwright驱动的VNC自动化功能。
🧩 系统概述
这个项目实现了一个多租户浏览器控制系统，其中每个用户会话都在一个独立的Docker容器（VNC + Playwright）中运行。 React 客户端通过 SSE/WebSocket 连接到服务器，允许使用聊天命令实时控制浏览器。
架构图：
React + TypeScript 客户端 (http://localhost:3001) WebSocket + REST API Node.js 服务器（http://localhost:3000） ↳ Redis（会话存储） ↳ Docker 代理（创建 VNC + Playwright 容器） ↳ Playwright 容器（s）
⚙️ 功能
✅ 基于登录和会话的身份验证 ✅ 动态容器化浏览器会话（VNC + Playwright） ✅ 基于聊天的浏览器控制（打开、导航、点击、输入） ✅ 通过WebSocket实现实时会话更新 ✅ 离线消息缓冲 + 重新连接 ✅ 会话在5分钟无操作后过期 ✅ 管理员面板，用于查看和管理所有会话
🧠 实时用户体验流程 1️⃣ 登录
访问 http://localhost:3001
使用凭据登录：
用户名：爱丽丝 密码：password123
服务器生成会话密钥并将其存储在Redis中。
2️⃣ 聊天标签页
使用聊天输入发送命令：
打开浏览器 导航至 https://example.com 点击#登录
服务器将这些命令发送到运行在您会话容器内的 Playwright。
3️⃣ 会话标签页
查看、创建、恢复或终止会话。
当新会话创建或会话过期时，会自动更新。
4️⃣ 管理员选项卡
显示所有用户的全部会话。
“Kill All”按钮会终止所有正在运行的容器。
5️⃣ 实时更新
服务器发出：
会话创建
会话已过期
会话已销毁
客户端通过WebSocket即时接收它们。
6️⃣ 离线缓冲区
离线时发送的消息会被缓存到localStorage中。
重新连接后自动重试。
🛠️ 设置 先决条件
安装：
sudo apt install docker docker-compose 翻译为中文是：“使用sudo apt安装docker和docker-compose”
确保Docker守护进程和Redis正在运行。
🧱 构建并运行
- 提取项目
解压 mcp-final-project-v5.zip 文件 进入目录 mcp-final-project-v5
- 构建容器
docker compose build（翻译为中文）：使用 Docker Compose 构建（镜像）
- 运行堆栈
docker compose up 的中文翻译是：“使用 Docker Compose 启动服务”
- 访问
客户端（React UI）: http://localhost:3001
服务器API：http://localhost:3000
Redis：仅内部使用（服务器使用）
💬 MCP 客户端配置示例
你的 config.json.example 文件看起来像这样：
{ "mcpServers": { "playwright-mcp-remote": { "disabled": false,， "超时时间": 60,， "url": "http://localhost:3000/sse"，翻译成中文为：“网址”: “http://localhost:3000/sse”， "类型": "sse"， "headers": { "x-session-key": "\"， "x-用户名": "“ } } } }
React 客户端会自动读取此配置。
🧪 本地开发
如果你想在本地运行React客户端以加快迭代速度：
切换到客户端目录 npm install（安装npm包） npm run dev 翻译成中文是：“运行 npm 的 dev 脚本”
访问 http://localhost:5173
🧹 大扫除
停止所有容器：
\docker compose down\ 翻译成中文是：“停止并移除 Docker Compose 服务”
移除未使用的资源：
\docker system prune -f\ 翻译成中文是：强制清理 Docker 系统中的未使用数据
🔮 路线图
JWT 认证
持久化的Redis卷
浏览器录制与回放
基于Web的管理仪表板（用于指标）
会话分析和日志
📁 项目结构 MCP最终项目-v5/ ├── server/（服务器目录） │ ├── src/ │ │ ├── index.ts │ │ ├── sessionManager.ts（会话管理器文件） │ │ ├── dockerProxy.ts │ │ ├── websocket.ts（文件） │ │ └── routes/（译文：│ │ └── 路由文件夹/） │ │ ├── session.ts │ │ └── mcpEvent.ts（翻译为中文为）：│ │ └── mcp事件文件.ts │ ├── Dockerfile │ └── package.json（文件） │ ├── client/（客户端/） │ ├── src/ │ │ ├── App.tsx │ │ ├── components/（组件文件夹） │ │ │ ├── ChatTab.tsx（文件名：ChatTab.tsx） │ │ │ ├── SessionTab.tsx │ │ │ ├── UserTab.tsx（翻译为中文：│ │ │ ├── 用户标签页.tsx） │ │ │ └── AdminTab.tsx（翻译为中文：│ │ │ └── 管理员标签页.tsx） │ ├── public/config.json.example │ ├── Dockerfile │ └── package.json │ ├── docker-compose.yml（文件） ├── README.md（注：此文件通常用于存放项目的说明文档，中文可译为“├── 说明文档.md”，但直接保留原文件名在中文环境中也是常见的做法，因此这里直接给出原文件名） └── .env.example（示例环境变量文件）
🧭 备注
会话空闲超时 = 5 分钟
如果连接丢失，WebSocket 会每5秒自动重新连接
使用localStorage排队的离线消息
docker-compose 输出中显示所有日志