rivetkit-client-react

RivetKit React クライアント

@rivetkit/react を使って Rivet Actor に接続する React アプリを構築する場合に、このスキルを使用してください。

はじめに

1. React クライアントをインストールします（最新：2.3.7）

   npm install @rivetkit/[email protected]
   

2. createRivetKit() でフックを作成し、useActor() で接続します。

エラー処理ポリシー

• デフォルトでは、フェイルファストの動作を優先してください。
• 絶対に必要な場合を除き、try/catch は避けてください。
• catch を使う場合は、少なくともエラーをログに記録するなど、明示的に処理してください。

はじめに

開始方法については、React クイックスタートガイドをご覧ください。

インストール

最小限のクライアント

ステートレスとステートフル

Actor の取得

接続パラメーター

イベントの購読

接続ライフサイクル

低レベルの HTTP と WebSocket

生の HTTP と WebSocket にアクセスするには、JavaScript クライアントを使用します。

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_ENDPOINT
• RIVET_NAMESPACE
• RIVET_TOKEN
• RIVET_POOL

設定されていない場合のデフォルトは http://localhost:6420 です。RivetKit はデフォルトでポート 6420 で実行されます。

エンドポイント形式

エンドポイントでは URL 認証構文を使用できます。

https://namespace:[email protected]

認証情報を含まないエンドポイントを渡し、RIVET_NAMESPACE と RIVET_TOKEN を個別に指定することもできます。サーバーレス環境にデプロイする場合は、アプリの /api/rivet URL を使用してください。詳細はエンドポイントをご覧ください。

API リファレンス

パッケージ： @rivetkit/react

• createRivetKit - React 用のフックを作成します
• useActor - Actor インスタンス用のフックです

クライアント以上の情報が必要ですか？

Rivet Actor、レジストリ、またはサーバー側の RivetKit について詳しく知りたい場合は、メインスキルを追加してください。

npx skills add rivet-dev/skills

その後、バックエンドのガイダンスには rivetkit スキルを使用してください。