SpatialChat iFrame API

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
}

ワークフロー

  1. iframeが追加されると同時に、ホストはiframeメッセージを購読する。
  2. Iframeは利用可能な任意のメッセージを送信する。
  3. ホストは受信したメッセージに対して、適切なメッセージを返して応答する。

利用可能な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 } }

セキュリティへの配慮

  1. 対象ウィンドウが window.parent または window.opener であることを確認してください。
  2. postMessage 2番目のパラメータ targetOrigin. Iframeに 'https://app.spatial.chat' を必ず設定すること。
  3. postMessage の第3パラメータ transfer を使用しないでください。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

コメント

0件のコメント

サインインしてコメントを残してください。