mcpField
B
blink-realtime

blink-realtime

github.com/blink-new開発438 回インストール2 週間前に更新
リポジトリ

blink-realtime について

blink-realtimeは、CLIとSDKからBlinkのリアルタイムチャンネルを公開・購読するスキルです。メッセージとプレゼンスを扱い、チャット、共同作業、通知、ゲーム、ライブダッシュボードの実装に使えます。

主な機能

  1. 01チャンネルへのイベント公開
  2. 02チャンネルメッセージの購読
  3. 03チャンネルのプレゼンス追跡
  4. 04CLIとSDKのAPI利用

活用シーン

  1. 01メッセージとプレゼンスのあるチャット構築
  2. 02接続中のクライアントへの通知送信
  3. 03共同編集やゲーム状態の同期

MCP 対応

MCPクライアントからチャンネルにイベントを公開する `blink_realtime_publish` ツールを提供します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blink-new/blink-plugin --skill blink-realtime

インストール後、Claude Code で/blink-realtimeを入力して読み込まれたか確認します。

詳細

認証が必要です:リアルタイム機能を動作させるには、auth: { mode: 'managed' } を設定して初期化します。

はじめに

# Publish a message to a channel
blink realtime publish chat-room --type message --data '{"text":"Hello everyone!"}'

# Publish with user context
blink realtime publish notifications --type alert --data '{"level":"info","text":"Deploy complete"}'

MCP ツール

ツール説明
blink_realtime_publishチャンネルにイベントを公開します

SDK メソッド

// Simple subscribe/publish
const unsubscribe = await blink.realtime.subscribe('chat-room', (message) => {
  console.log(message.data)
})

await blink.realtime.publish('chat-room', 'message', { text: 'Hello!' })
unsubscribe()

チャンネル API(上級者向け)

const channel = blink.realtime.channel('game-lobby')

await channel.subscribe({
  userId: user.id,
  metadata: { displayName: user.name, status: 'online' }
})

channel.onMessage((msg) => {
  if (msg.type === 'chat') addMessage(msg.data)
})

channel.onPresence((users) => {
  setOnlineUsers(users)
})

await channel.publish('chat', { text: 'Hello!' }, { userId: user.id })

const history = await channel.getMessages({ limit: 50 })
const users = await channel.getPresence()

await channel.unsubscribe()

メッセージ形式

{
  id: '1640995200000-0',
  type: 'chat',
  data: { text: 'Hello!' },
  timestamp: 1640995200000,
  userId: 'user123',
  metadata: { displayName: 'John' }
}

プレゼンス形式

{
  userId: 'user123',
  metadata: { displayName: 'John', status: 'online' },
  joinedAt: 1640995200000,
  lastSeen: 1640995230000
}

React のクリーンアップ(重要)

useEffect(() => {
  if (!user?.id) return

  let channel: any = null

  const init = async () => {
    channel = blink.realtime.channel('room')
    await channel.subscribe({ userId: user.id })
    channel.onMessage((msg: any) => setMessages(prev => [...prev, msg]))
  }

  init().catch(console.error)

  return () => { channel?.unsubscribe() }
}, [user?.id])

決して非同期関数の中でクリーンアップを返さないでください。クリーンアップが失われてしまいます。チャンネル参照を外部に保持し、同期的にクリーンアップしてください。

使用例

  • チャットアプリ — メッセージ、プレゼンス、履歴
  • リアルタイムコラボレーション — カーソル位置、ドキュメントの編集
  • 通知 — 接続中のクライアントにリアルタイムでプッシュされるアラート
  • ゲーム — ゲーム状態の同期、ロビー管理
  • ダッシュボード — ライブデータの更新

コメント