关于 rivetkit-client-react
面向 React 应用开发者的技能，介绍如何通过 `@rivetkit/react` 连接 Rivet Actors。内容涵盖 Hook 配置、Actor 连接、事件订阅，以及使用 JavaScript 客户端进行底层 HTTP 和 WebSocket 访问。
主要功能
- 01使用 `createRivetKit()` 创建 Hook
- 02通过 `useActor()` 连接 Actor
- 03配置 Actor 连接参数
- 04订阅 Actor 事件
- 05使用 JavaScript 客户端发送底层请求
适用场景
- 01构建由 Rivet Actors 支持的 React 界面
- 02将 React 组件连接到 Actor 实例
- 03通过 HTTP 或 WebSocket 访问 Actor 处理程序
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/rivetkit-client-react确认已加载。
附带文件index.json
详细介绍
RivetKit React 客户端
使用 @rivetkit/react 构建连接到 Rivet Actors 的 React 应用时，请使用此技能。
入门步骤
- 安装 React 客户端（最新版本：2.3.7）
npm install @rivetkit/[email protected] - 使用
createRivetKit()创建钩子，并通过useActor()连接。
错误处理策略
- 默认优先采用快速失败行为。
- 除非绝对必要，否则不要使用
try/catch。 - 如果使用了
catch，请明确处理错误，至少记录错误。
开始使用
请参阅 React 快速入门指南开始使用。
安装
最简客户端
无状态与有状态
获取 Actor
连接参数
订阅事件
连接生命周期
底层 HTTP 和 WebSocket
使用 JavaScript 客户端访问原始 HTTP 和 WebSocket：
import { createClient } from "rivetkit/client";
const client = createClient();
const handle = client.chatRoom.getOrCreate(["general"]);
const response = await handle.fetch("history");
const history = await response.json();
const ws = await handle.webSocket("stream");
ws.addEventListener("message", (event) => {
console.log("message:", event.data);
});
ws.send("hello");
从后端调用
在后端（Node.js/Bun）使用 JavaScript 客户端。请参阅 JavaScript 客户端文档。
错误处理
概念
键
键用于唯一标识 Actor 实例。使用复合键（数组）进行分层寻址：
当 userId 包含用户数据时，不要使用字符串插值（例如 "org:${userId}"）构建键。请改用数组，以防止键注入攻击。
环境变量
createRivetKit()（以及底层的 createClient() 实例）会自动读取：
RIVET_ENDPOINTRIVET_NAMESPACERIVET_TOKENRIVET_POOL
未设置时，默认使用 http://localhost:6420。RivetKit 默认在端口 6420 上运行。
端点格式
端点支持 URL 身份验证语法：
https://namespace:[email protected]
你也可以传入不带身份验证信息的端点，并分别提供 RIVET_NAMESPACE 和 RIVET_TOKEN。对于无服务器部署，请使用应用的 /api/rivet URL。详情请参阅端点。
API 参考
createRivetKit- 为 React 创建钩子useActor- 用于 Actor 实例的钩子
需要的不只是客户端？
如果你还需要了解 Rivet Actors、注册表或服务端 RivetKit，请添加主技能：
npx skills add rivet-dev/skills
然后使用 rivetkit 技能获取后端指导。