SpatialChatでは、iframe要素を使って、部屋にウェブサイトを追加することができます。
iframeに読み込まれたウェブサイトは、SpatialChat iframe APIを通じてSpatialChatと通信することができます。 このAPIにより、ウェブサイトは現在の空間や部屋に関する情報、またはユーザーに関する情報を受け取ることができます。
この文書では、以下の用語を使用します。 host - SpatialChat ルーム。 iframe - SpatialChat ルームの iframe に埋め込まれたサイト。
通信技術
window.postMessage() api (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) を通信経路として使用します。
ホストとiframeの両方がメッセージを聞き、投稿することができます。 Iframe は window.parent または window.opener にメッセージをポストすることができます。
APIサーフェス
メッセージは、以下の形式のJSONオブジェクト（手動でシリアライズする必要はありません）で交換されます。
{
name: string, // restricted to a list of supported message names,
requestId?: string // optional id to match request message with response
data: any // any payload corresponding to the message name
}
ワークフロー
- iframeが追加されると同時に、ホストはiframeメッセージを購読する。
- Iframeは利用可能な任意のメッセージを送信する。
- ホストは受信したメッセージに対して、適切なメッセージを返して応答する。
利用可能なAPIメソッド
1. リクエスト：get_space_ids。
data: undefined.
iframeがどのスペース、どの部屋に埋め込まれているかを知りたい場合は、このメッセージを送信してください。 必要でない限り、これを何度も呼び出さないこと。結果をキャッシュしておけば、セッション内で変更されることはない。
レスポンス：space_ids。
data:{ spaceId: string, roomId: string, spaceSlug: string }.
これはget_space_idsに対する応答メッセージである。
2. リクエスト：get_user_info。
data: undefined.
現在のスペースユーザー情報を知りたいときに、このメッセージを送信してください。 このデータは、ユーザーがセッション内で変更することができます。
レスポンス：user_info。
data: { id?: string, name?: string, about?: string, pronoun?: string, avatarUrl?: string }
これはget_user_infoに対する応答メッセージです。
API使用例
リクエスト：get_user_info。
postMessage(
{
name: 'get_user_info',
requestId: 'qwe123' // optional
},
'<https://app.spatial.chat>'
)
レスポンス：user_info。
{
name: 'user_info',
requestId: 'qwe123' // in case the requestId was received in the request.
data: {
id?: string
name?: string
about?: string
pronoun?: string
avatarUrl?: string
}
}
セキュリティへの配慮
- 対象ウィンドウが
window.parentまたはwindow.openerであることを確認してください。 postMessageの 2番目のパラメータtargetOrigin. Iframeに 'https://app.spatial.chat' を必ず設定すること。postMessageの第3パラメータtransferを使用しないでください。
コメント
サインインしてコメントを残してください。