WebCef3Trigger浏览器和ws的结合，远程触发FBro CEF3 浏览器方案

mosheng

# WebCef3Trigger<br /> <br /> 远程触发 CEF3 浏览器的完整方案，使用 FBroSharp 和 WebSocket 实现浏览器自动化。<br /> <br /> ## 系统架构<br /> <br /> ```<br /> ┌─────────────┐    WebSocket    ┌─────────────┐    Process.Start    ┌─────────────┐<br /> │  Node.js    │ ◄──────────────► │   C# 客户端  │ ◄──────────────────► │  CEF3 浏览器  │<br /> │  服务端     │                  │  (.NET 4.8) │                     │  (FBro)      │<br /> └─────────────┘                  └─────────────┘                     └─────────────┘<br />        │                                                                    │<br />        │                         fbro-mcp 工具集                            │<br />        └────────────────────────────────────────────────────────────────────┘<br /> ```<br /> <br /> ## 项目结构<br /> <br /> ```<br /> WebCef3Trigger/<br /> ├── server/                      # Node.js WebSocket 服务端 + 网页端控制台<br /> │   ├── package.json<br /> │   ├── server.js               # WebSocket 服务器主入口<br /> │   ├── browserManager.js       # 浏览器实例管理<br /> │   └── commandHandler.js       # fbro-mcp 命令处理 (CDP)<br /> │<br /> ├── CSharpClient/               # C# WebSocket 客户端<br /> │   ├── CSharpClient.csproj<br /> │   ├── Program.cs<br /> │   ├── WebSocketClient.cs      # WebSocket 通信<br /> │   ├── BrowserLauncher.cs      # 浏览器进程管理<br /> │   ├── MainForm.cs             # 主窗体<br /> │   └── MainForm.Designer.cs<br /> │<br /> ├── FBroBrowser/                # FBro CEF3 浏览器<br /> │   ├── FBroBrowser.csproj<br /> │   ├── Program.cs              # 主入口，命令行解析<br /> │   ├── BrowserConfig.cs        # 配置数据类<br /> │   ├── FBroInitializer.cs      # FBroSharp 初始化<br /> │   ├── FBroWebSocketClient.cs  # WebSocket 通信<br /> │   ├── MainForm.cs             # 浏览器窗体<br /> │   └── MainForm.Designer.cs<br /> │<br /> ├── WebCef3Trigger.sln          # Visual Studio 解决方案<br /> ├── CLAUDE.md                   # Claude Code 指南<br /> └── README.md                   # 本文件<br /> ```<br /> <br /> ## 快速开始<br /> <br /> ### 1. 安装 Node.js 依赖<br /> <br /> ```bash<br /> cd server<br /> npm install<br /> ```<br /> <br /> ### 2. 启动 Node.js 服务端<br /> <br /> ```bash<br /> cd server<br /> npm start<br /> # 或<br /> node server.js<br /> ```<br /> <br /> 服务端将在端口 8080 启动。<br /> <br /> ### 2.1 server（网页端控制台）说明（重要）<br /> <br /> `server` 不仅是 WebSocket 服务端，也提供一个**网页端控制台**，用于：<br /> <br /> - 在浏览器里点击按钮发起 `launch_browser`（启动 FBroBrowser）<br /> - 对已启动的浏览器发送自动化命令（导航/执行JS/截图等）<br /> <br /> 启动 `server` 后，在本机打开网页端页面：<br /> <br /> - `http://localhost:8080/`<br /> <br /> 页面位于 `server/public/index.html`，按钮点击后会通过 WebSocket/HTTP（以当前实现为准）把“启动浏览器/执行命令”的请求发给后端。<br /> <br /> <br /> <br /> ### 3. 构建 C# 项目<br /> <br /> 使用 Visual Studio 打开 `WebCef3Trigger.sln`，或使用命令行：<br /> <br /> ```bash<br /> # 还原 NuGet 包<br /> nuget restore WebCef3Trigger.sln<br /> <br /> # 构建解决方案<br /> msbuild WebCef3Trigger.sln /p:Configuration=Debug<br /> ```<br /> <br /> **注意**: FBroBrowser 项目需要安装 FBroSharp.Common NuGet 包（版本 4.21.42）。<br /> <br /> ### 4. 运行 C# 客户端<br /> <br /> 启动 `CSharpClient.exe`，点击 "Connect" 连接到服务端。<br /> <br /> ### 5. 启动浏览器<br /> <br /> 在 C# 客户端中：<br /> 1. 输入目标 URL<br /> 2. 设置窗口大小<br /> 3. 点击 "Launch" 启动浏览器<br /> <br /> ### 5.1 CSharpClient 里需要修改 FBroBrowser.exe 路径（重要）<br /> <br /> 编译 `FBroBrowser` 后，`CSharpClient` 通过 `Process.Start()` 启动 `FBroBrowser.exe`。<br /> 默认路径在 `CSharpClient/BrowserLauncher.cs` 构造函数里：<br /> <br /> - 文件：`CSharpClient/BrowserLauncher.cs`<br /> - 位置：`BrowserLauncher(string browserExePath = null)` 中的 `_browserExePath`<br /> - 当前默认值（你需要按实际输出目录修改）：<br /> <br /> `T:\vue\WebCef3Trigger\FBroBrowser\bin\Debug\FBroBrowser.exe`<br /> <br /> 你可以用两种方式改：<br /> <br /> 1) 直接改默认路径（最简单）<br /> 2) 在创建 `BrowserLauncher` 时传入 `browserExePath`（更灵活，适合不同机器/不同配置）<br /> <br /> ## 消息协议<br /> <br /> 所有 WebSocket 通信使用 JSON 格式：<br /> <br /> ```json<br /> {<br />   "type": "message_type",<br />   "data": { ... }<br /> }<br /> ```<br /> <br /> ### 消息类型<br /> <br /> | 类型 | 方向 | 说明 |<br /> |------|------|------|<br /> | `register_client` | C# → Server | 客户端注册 |<br /> | `register_response` | Server → C# | 注册响应 |<br /> | `launch_browser` | Server → C# | 启动浏览器请求 |<br /> | `browser_ready` | FBro → Server | 浏览器就绪通知 |<br /> | `fbro_command` | Server → FBro | 自动化命令 |<br /> | `command_result` | FBro → Server | 命令执行结果 |<br /> | `close_browser` | Server → C# | 关闭浏览器请求 |<br /> | `error` | Any → Any | 错误通知 |<br /> <br /> ## 支持的自动化命令<br /> <br /> 通过 Chrome DevTools Protocol (CDP) 执行：<br /> <br /> - **导航**: `navigate`, `go_back`, `go_forward`, `refresh`<br /> - **交互**: `click`, `type`<br /> - **获取**: `screenshot`, `get_text`, `get_html`, `evaluate`<br /> - **等待**: `wait_for_element`<br /> <br /> ### 命令示例<br /> <br /> ```javascript<br /> // 导航到 URL<br /> {<br />   "type": "fbro_command",<br />   "data": {<br />     "browserId": 1,<br />     "command": "navigate",<br />     "params": { "url": "https://www.baidu.com" }<br />   }<br /> }<br /> <br /> // 点击元素<br /> {<br />   "type": "fbro_command",<br />   "data": {<br />     "browserId": 1,<br />     "command": "click",<br />     "params": { "selector": "#submit-btn" }<br />   }<br /> }<br /> <br /> // 执行 JavaScript<br /> {<br />   "type": "fbro_command",<br />   "data": {<br />     "browserId": 1,<br />     "command": "evaluate",<br />     "params": { "expression": "document.title" }<br />   }<br /> }<br /> ```<br /> <br /> ## FBroSharp 配置<br /> <br /> FBroSharp 初始化使用以下配置：<br /> <br /> ```csharp<br /> FBroSharpInitSet:<br /> - no_sandbox = true                    // Windows 必需<br /> - multi_threaded_message_loop = true   // 独立消息循环线程<br /> - cache_path = %LocalAppData%\FBroCache<br /> - user_data_path = %LocalAppData%\FBroUserData<br /> - locale = "zh-CN"<br /> - remote_debugging_port = [动态分配]    // 从 9222 开始<br /> - persist_session_cookies = true<br /> - persist_user_preferences = true<br /> - enableprocessmessage = true<br /> ```<br /> <br /> **重要提示**:<br /> - 使用 `FBroSharp.FBroSharp.Initialize(initSet)` 初始化，**不是** `FBroSharpSetValue`<br /> - 命令行处理必须使用 `IFBroSharpCommandLine`（带 `I` 前缀）<br /> - `Shutdown` 需要 bool 参数<br /> <br /> ## 测试验证<br /> <br /> ### 测试 1：基础连接<br /> 1. 启动 Node.js 服务端<br /> 2. 启动 C# 客户端<br /> 3. 验证 WebSocket 连接成功<br /> <br /> ### 测试 2：浏览器启动<br /> 1. 通过 C# 客户端发送启动请求<br /> 2. 验证 FBro 浏览器窗口打开<br /> 3. 验证 `browser_ready` 消息返回<br /> <br /> ### 测试 3：自动化操作<br /> 1. 发送 `navigate` 命令导航到测试页面<br /> 2. 发送 `click` 命令点击元素<br /> 3. 发送 `screenshot` 命令截图验证<br /> <br /> ## 安全注意事项<br /> <br /> 1. **URL 验证**: C# 客户端包含 URL 清理，防止加载非 http(s) 协议<br /> 2. **进程隔离**: 每个浏览器作为独立进程运行，使用唯一调试端口<br /> 3. **沙箱配置**: 浏览器以 `no_sandbox=true` 运行以保证兼容性<br /> 4. **WebSocket 认证**: 生产环境建议实现基于令牌的认证<br /> <br /> ## 依赖项<br /> <br /> ### Node.js<br /> - `ws` - WebSocket 服务器<br /> - `chrome-remote-interface` - Chrome DevTools Protocol 客户端<br /> <br /> ### C# (.NET 4.8)<br /> - `Newtonsoft.Json` - JSON 序列化<br /> - `FBroSharp.Common` (4.21.42) - CEF3 浏览器框架<br /> <br /> ## 许可证<br /> <br /> MIT License<br /> <br /> ### 请我喝一杯 ☕<br /> <br /> <div style="display: flex; gap: 20px; justify-content: center; align-items: center;"><br />   <div style="text-align: center;"><br />     <p><strong>支付宝</strong></p><br />     <img src="https://img.msblog.cc/image-20250523012804344.png" alt="支付宝" width="200"><br />   </div><br />   <div style="text-align: center;"><br />     <p><strong>微信</strong></p><br />     <img src="https://img.msblog.cc/image-20250523012814243.png" alt="微信" width="200"><br />   </div><br /> </div><br /> <br /> ### 联系方式：<br /> <br /> QQ：1098901025  <br /> 微信：zhx_ms  <br /> <br /> > 添加请注明来意<br />

下载地址

游客，如果您要查看本帖隐藏内容请回复

Luke64

看看怎么个事

Hannah27

晚安小飞船

必须支持一下

William36

来看看，支持下

旧巷故人

路过，看看，支持下

Victoria37

浮生梦未醒

感谢分享

橘子海沉船

m183187

12312312312312311111111111