公式パッケージ · リアルタイムの部品

ライブカーソル、アバター、編集ロック

プレゼンスチャンネルの上の共同作業。誰がどこにいるか、ライブカーソル、2 人が同じ項目を編集しないためのコンポーネントロック、発表用のフォローモード。

@hibira-io/spacesライブデモ ↗npm ↗GitHub ↗

メンバーごとにプロフィールと現在地（今いるページやスライドなど）を持てます。
カーソルの座標は 1 秒に 5 回まとめて送られ、元のペースで再生されるので、動きがなめらかに見えます。
ほかの人が持っている項目の lock() は失敗し、メンバーが退出するとそのロックは外れます。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール
```
npm install @hibira-io/spaces pusher-js
```

使う

import { Space } from '@hibira-io/spaces';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/spaces/auth' },
});
const space = Space.enter(pusher, 'presence-space-doc-42', { profile: { color: '#e5484d' } });
space.on('members', ({ members }) => renderAvatars(members));
space.on('cursor', ({ id, member, x, y }) => drawCursor(id, member, x, y));

始める前に

アプリの設定で「クライアントイベントを許可」をオンにすると、プレイヤー同士で操作やタップを送り合えます。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →

ライブカーソル、アバター、編集ロック

インストール

使う

始める前に