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