本文へ移動
cccskills
無料GitHub で公開日本語紹介

real-time-sync

外部ユーザーや別タブで変わる情報を、必要な画面だけで安全に同期するための判断と実装方法を案内します。

原文原文の説明を見る

Decide whether a page needs external changes before refresh, then use the opt-in shared SSE and polling transport safely.

BuilderIO/agent-nativeスター 7,527(GitHub 7,527 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 共同編集の変更を画面に反映したいとき
  • 受信箱の新着を開いたまま確認したいとき
  • バックグラウンド処理の進捗を見たいとき
  • 複数タブの状態をそろえたいとき

日本語での紹介

できること

外部の操作で情報が変わり、画面を開いたまま更新を見たい場合に、リアルタイム同期を有効にするべきか判断できます。対象になるのは、共同編集者が変更する画面、新着メールを確認する受信箱、進行中のジョブ、複数タブ間で状態をそろえる場面などです。同期を有効にする場合は、画面単位で理由を明記し、共有されるSSE(サーバーから届くイベント)とポーリングを使います。ローカルの操作による更新は、既存のイベントやクエリ無効化で扱い、不要なバックグラウンド通信を避けます。

こんなときに便利

共同編集や受信箱など、別のユーザーや処理による変更をすぐ画面に反映したい開発に向いています。クエリの鮮度を保ちつつ、画面が隠れたときのポーリングや、複数のデータソースの更新をどう扱うか整理できます。公開ページや設定画面など、次の表示更新時に反映すればよい画面で同期を有効にしない判断にも役立ちます。

使い方の例

  • 「この画面でリアルタイム同期が必要か、判断基準に沿って確認してください」
  • 「共同編集画面に共有同期を追加し、クエリ更新も整えてください」

注意点

対象は、外部変更を画面表示中に反映する必要がある非公開または認証済み画面です。手動のポーリングループや追加のEventSourceは作らず、既存の同期フックを使います。Yjsの共同編集は既存のチャネルを維持します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(1)

  • SKILL.md6.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Real-Time Sync

Decision rule

Opt in only when both are true:

  1. The data can change without the current user acting.
  2. The user needs to see that change before refreshing or navigating.

A local agent edit does not meet this rule. The chat run stream already invalidates action queries and source counters after each side-effecting tool and again at run end, without opening a background poll.

Opt in

  • Slides deck editor: another collaborator can edit the open deck.
  • Mail inbox: new mail can arrive while the inbox is open.
  • A watched job: a background job changes progress while the user watches it.
  • Cross-tab state: state must converge across this user's open tabs without a new action.

Keep it off

  • Public, anonymous, marketing, docs, and SSR pages.
  • Settings, forms, and read-mostly lists or dashboards. Refresh them on focus or navigation instead.
  • Single-user agent edits. The chat run stream handles those.
  • Pages where an update is useful eventually but not before the next refresh.

Cost and behavior

useDbSync() has no background transport unless the page opts in with a non-empty reason. One transport is shared per tab. A visible opted-in tab polls at 1 minute, then 2, then 5 minutes while idle; user activity or a local mutation resets that sequence. Hidden tabs pause by default. During an active agent run, opted-in sync can poll at its configured interval; local tool completion and run-end invalidation do not depend on that poll.

On a long-lived host, same-process changes stream over /_agent-native/events; polling is the cross-process fallback. On a production serverless host, the local events endpoint refuses the long-lived stream and /_agent-native/poll carries remote changes. The paid Hosted Realtime Sync Gateway is not required for this pattern.

While a collab doc shows another person present, the transport polls every 2.5 s instead (acquireCollabPollBoost(), held by the collab client, not by pages). It is a no-op whenever a stream is connected, lapses after 3 minutes without input or remote events, and never applies to lone tabs.

Use the hook

Declare the reason beside the route gate so reviewers can see why the page pays for remote sync:

useDbSync({
  queryClient,
  realtime: isPrivateDeckEditorPath(location.pathname)
    ? { reason: "other collaborators can edit this deck while it is open" }
    : undefined,
  pauseWhenHidden: true,
});

The reason is required by the TypeScript API. Opt in only for a named private or authenticated route; public, documentation, and SSR pages should not start a background transport.

An opted-in page only hears about an action when its change event reaches the current user. By default an action event reaches the actor alone, so a collaborator's comment, save, or agent edit never arrives. Declare changeResource: (input, result) => ({ resourceType, resourceId }) on the mutating action and the event also reaches everyone who can read that resource. Name it from input when the call carries the resource id (Content's documentChangeResource, Slides' comment actions) and from result when the call is keyed by a child id (Design's designChangeResource for delete-file); return null for a call that changed nothing. Do not publish a parallel per-template event for the same purpose.

Do not start subscribeSyncEvents() or an EventSource in a feature to bypass the decision. subscribeSyncEvents() is a lower-level transport subscription used by the existing Yjs collaboration client and narrow framework plumbing. Keep Yjs collaborative editing on its existing channel.

Query freshness

Prefer useActionQuery() for action-backed data. Mutating actions refresh local action observers; the chat run stream also invalidates them for agent tool side effects. Raw queries should include the relevant source counters:

const versions = useChangeVersions(["dashboards", "action"]);
useQuery({
  queryKey: ["dashboard", id, versions],
  queryFn: () => fetchDashboard(id),
  placeholderData: (previous) => previous,
});

That covers local chat-run edits. Remote edits reach the counter through useDbSync() only on an opted-in page. Use useReconciledState when a form or inline editor copies a query value into local state so incoming data does not replace active typing.

URL commands (__set_url__, set-url, and set-search-params) and refresh-screen also flow through local chat events. The sidebar listens for screen refresh only while its panel is open or a chat run is active; public docs can disable that boundary with screenRefreshEnabled={false}.

Source counters

On local tool completion, useDbSync() advances the action counter and any other raw-query source counters currently observed by the page. Generic tool completion events do not identify their data domain, so keep raw-query source lists narrow. Remote sync events advance their specific source counters.

SourceChanged by
actionA successful mutating action or local chat-run side-effect completion
app-stateWrites to application_state, including URL commands
settingsWrites to settings
dashboards, analyses, extensionsDomain-specific mutations that emit those sources
collabYjs collaborative document updates
screen-refreshThe explicit refresh-screen agent tool

Use useChangeVersions() when one query depends on more than one source.

Avoid

  • Do not create manual polling loops or a second EventSource.
  • Do not enable background sync for a whole app root when only one private route needs remote updates.
  • Do not assume a successful local action is a reason for a background subscriber; use local mutation invalidation and the chat run stream.
  • Do not blanket-invalidate template queries when a source-versioned query or action-backed query can target the refreshed data.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

a2a-assets

無料概要あり

複数のアプリやMCPホストからブランド画像・動画を生成、調整、書き出し、挿入する作業を支援します。ライブラリ選択や修正依頼も扱います。

  • スライド用のブランド画像を作りたいとき
  • 既存素材をフィードバックに合わせて直したいとき
  • 動画素材を生成して書き出したいとき
BuilderIO/agent-native7,5272026年10月26日 更新

account-health

無料概要あり

特定の顧客企業について、契約と製品利用の数値を照らし合わせ、根拠や不足情報を明記した健全性レポートをまとめます。

  • 顧客の健全性を確認したいとき
  • 契約席数と実利用を比べたいとき
  • 更新前に利用状況を整理したいとき
BuilderIO/agent-native7,5272026年10月26日 更新

actions

無料概要あり

アプリの操作をエージェントと画面の両方から呼び出せるアクションとして実装し、API連携や画面のデータ取得を一貫した形で追加するスキルです。

  • 新しいアプリ操作を追加したいとき
  • 外部APIと連携したいとき
  • 画面からデータを取得したいとき
BuilderIO/agent-native7,5272026年10月26日 更新

adding-a-feature

無料概要あり

新機能をUI・エージェント用アクション・説明資料・画面状態の4領域でそろえ、利用者とエージェントのどちらからも一貫して使えるようにするチェックリストです。

  • 新機能追加の作業範囲を整理したいとき
  • UIとエージェント操作をそろえたいとき
  • 画面状態の同期漏れを防ぎたいとき
BuilderIO/agent-native7,5272026年10月26日 更新

adhoc-analysis

無料概要あり

複数のデータソースを照合して、傾向や指標、根拠をまとめた分析結果を作成します。必要に応じて、再実行できるダッシュボードとして保存できます。

  • 商談と通話記録を照合したいとき
  • 顧客の利用状況を横断して調べたいとき
  • 繰り返し更新できる分析を保存したいとき
BuilderIO/agent-native7,5272026年10月26日 更新

admin-surfaces

無料概要あり

Analyticsの管理画面で、機能フラグの状態確認と切り替え、ダッシュボード利用状況の調査、接続先アプリのデータベース管理を行います。

  • アプリごとの機能フラグを確認・変更したいとき
  • ダッシュボードの所有者や利用状況を調べたいとき
  • 接続済みアプリのテーブルを管理したいとき
BuilderIO/agent-native7,5272026年10月26日 更新

BuilderIO のスキルをすべて見る

このスキルの問題を報告する