← 博客

用 Claude Code 十分钟加上实时 WebSocket

· Hibira

把 Claude Code 接上 Hibira MCP 服务器,让它创建应用、填好 .env、接上 pusher-js,并确认第一条事件真的送达。

给应用加上实时功能,大部分是接线的活:创建密钥、放进正确的 env 文件、配置客户端库、授权私有频道,最后确认事件真的送达。只要能连上服务,这正是 AI 编程代理最擅长的工作。Hibira MCP 服务器就是让它连得上的那一步。

本文用 Claude Code 演示。Cursor、VS Code、Claude 和 ChatGPT 的用法相同,MCP 服务器页面有各自的配置方法。

代理能做什么

通过 Model Context Protocol,Hibira 提供九个工具。代理可以读取你的套餐和应用、创建和修改应用、查看用量、发布测试事件、查看调试控制台,以及获取你所用框架的集成指南(已填好应用的 ID 和 key)。它不能删除应用或轮换 secret,也永远看不到已有应用的 secret。

第 1 步:添加服务器

你需要一个 Hibira 账户,免费套餐就够了。在项目目录中运行:

claude mcp add --transport http hibira https://hibira.io/mcp

Claude Code 第一次使用这个服务器时,会在浏览器中打开 Hibira 的页面。登录后选择只读或读写,然后批准。如果没有自动打开,请在 Claude Code 中运行 /mcp,选择对 hibira 服务器进行认证。创建新应用需要写入权限。

第 2 步:说出你要什么

把技术栈和运行环境讲清楚。以配合 Vite 前端的 Laravel 应用为例:

给这个 Laravel 应用加上 Hibira 实时功能。创建一个叫 "shop-dev" 的应用,允许 http://localhost:5173,把密钥写进 .env,配置 Laravel Echo,并在私有的 orders 频道广播 OrderShipped。

接下来由代理自己规划,但通常是这样:

  1. get_account:查看套餐和 WebSocket 主机。
  2. create_app:用指定的名称和允许的来源创建应用。secret 只返回一次,工具也会提醒代理直接写进被 git 忽略的 .env。
  3. get_integration_guide:获取 laravel 的指南,包括 Echo 配置、.env 的键和私有频道的步骤,已填好你的值。
  4. 修改 .env、config/broadcasting.php、resources/js/echo.js 和 routes/channels.php,并新建一个广播事件。

像审查其他改动一样检查这些 diff。这些修改都是普通的 Laravel 代码,之后你的代码不会依赖代理。

第 3 步:确认事件真的送达

这时调试控制台就派上用场了。你可以问:

在浏览器打开应用,然后发一条测试 OrderShipped 事件到 private-orders.1,告诉我订阅者有没有收到。

代理会调用 send_test_event,像你的服务器一样发布事件,再调用 watch_debug_events,查看应用的调试控制台最多 30 秒,报告连接、订阅和消息。如果根本没人订阅,它也看得出来,这通常说明认证端点或允许的来源有问题。

免费套餐的调试控制台会显示连接、订阅和发布的消息;付费套餐还会显示客户端事件、webhook 和错误。

日常的问题

接上之后,这个服务器不只在配置时有用:

  • “我的应用离每日消息上限还有多远?”会用到 get_usage。
  • “为什么 staging.example.com 上的浏览器被拒绝?”会用 get_app 读取允许的来源,你同意的话再用 update_app 修正。
  • “给 shop-dev 打开客户端事件,让正在输入提示能工作”只需要一次 update_app。

安全使用

  • 能用只读就用只读。 配置期间给读写权限,日常问答就用只读。
  • 没有浏览器的代理改用令牌。 CI 任务和远程代理可以用个人访问令牌代替登录。在“AI 代理”页面创建令牌,限定单个应用并设置过期日期:
claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."
  • 随时可以撤销。 “AI 代理”页面列出所有已连接的代理和令牌,撤销后立即生效。
  • 测试事件是真实消息。 它和其他发布一样计入套餐的每日上限,而且每个账户每秒只能发几条。

试试看

注册免费套餐、添加服务器,然后让你的代理帮你接上你所用的框架。如果卡住了,集成指南有同样配置的手动版本。