金大哥 - vibe-eyes-client MCP 详情

article

README

🚀 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） |

示例代码

<!DOCTYPE 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 许可证。

vibe-eyes-client