🚀 Vibe Eyes 客户端
Vibe Eyes 客户端是一个轻量级的客户端库，可将浏览器游戏与 Vibe Eyes 调试服务器 进行集成，实现实时调试、可视化和分析功能。借助该库，AI 能够实时“看到”它正在处理的游戏！
🚀 快速开始
Vibe Eyes 客户端可助力开发者将浏览器游戏与调试服务器集成，实现实时调试、可视化和分析。以下是快速集成的示例代码：
// 使用默认设置初始化（自动连接到服务器）
// （null = auto-detect）
// （创建弹出窗口，如果 container 为 null）
VibeEyes.init({
// 配置选项
});
// 监听事件
VibeEyes.on('message', (msg) => {
console.log('收到消息:', msg);
});
✨ 主要特性
- 自动画布截图捕获和流传输
- 控制台日志和错误收集，带时间戳
- 全局错误和未处理的承诺拒绝处理
- 在专用调试窗口中显示 SVG 可视化
- 完整的调试统计信息，包括 SVG 大小测量
- 对游戏性能影响最小
- 健壮的错误处理和优雅的连接恢复
- 多种构建格式（UMD、ESM、IIFE）
✨ 1.1.0 版本新特性
- 断开连接时的 SVG 显示：调试窗口现在即使在未连接到服务器时也能工作
- 实时连接状态可视化：实时显示连接状态并提供视觉反馈
- 智能窗口定位：将调试窗口相对于游戏窗口定位（右、左、上、下）
- 响应式默认值：调试窗口大小默认为游戏窗口尺寸的 75%
- 改进的错误处理：更好地处理窗口关闭和重新连接场景
📦 安装指南
你可以通过以下两种方式安装 Vibe Eyes 客户端：
使用 npm 安装
npm install vibe-eyes-client
直接在 HTML 中引入
<script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js">script>
💻 使用示例
基础用法
// 使用默认设置初始化（自动连接到服务器）
// （null = auto-detect）
// （创建弹出窗口，如果 container 为 null）
VibeEyes.init({
// 配置选项
});
// 监听事件
VibeEyes.on('message', (msg) => {
console.log('收到消息:', msg);
});
高级用法
VibeEyes.init({
serverUrl: 'http://localhost:3000', // 自定义服务器 URL
debugMode: true, // 启用调试模式
container: '#debug-container' // 使用自定义容器元素
});
📚 详细文档
通用配置选项
| 属性 | 详情 |
|---|---|
| serverUrl | 服务器的 URL 地址（默认：http://localhost:3000） |
| debugMode | 是否启用调试模式（默认：false） |
| container | 自定义容器的选择器或元素（默认：null，自动创建弹出窗口） |
网络配置选项
| 属性 | 详情 |
|---|---|
| reconnectInterval | 断开后重新连接的间隔时间（以毫秒为单位，默认：3000） |
| maxRetries | 最大重试次数（默认：5） |
可视化配置选项
| 属性 | 详情 |
|---|---|
| theme | SVG 的主题颜色（默认：light，可选：dark） |
| fontFamily | 文本的字体家族（默认：Arial） |
| fontSize | 文本的大小（以像素为单位，默认：14） |
示例代码
html>
<html>
<head>
<script src="vibe-eyes.min.js">script>
head>
<body>
<div id="debug-container">div>
<script>
VibeEyes.init({
serverUrl: 'http://localhost:3000',
debugMode: true,
container: '#debug-container'
});
script>
body>
html>
📚 相关项目
- Vibe Eyes 调试服务器 - 伴侣服务器，处理调试数据并生成可视化内容
📄 许可证
本项目采用 ISC 许可证。