Mit SpatialChat können Sie mithilfe des iframe-Elements Websites zu einem Raum hinzufügen.

Die im Iframe geladene Website kann über die SpatialChat-Iframe-API mit SpatialChat kommunizieren. Diese API ermöglicht es der Website, Informationen über den aktuellen Bereich und Raum oder über den Benutzer zu erhalten.

Weiter in diesem Dokument werden wir Begriffe verwenden: Host - für einen SpatialChat-Raum. iframe – für eine in SpatialChat-Raum-iframe eingebettete Website.

Kommunikationstechnologie

window.postMessage() API (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) als Kommunikationskanal verwendet.

Sowohl Host als auch Iframe können Nachrichten abhören und posten. Iframe kann Nachrichten an window.parent oder window.opener senden

API-Oberfläche

Nachrichten werden in Form eines JSON-Objekts (keine manuelle Serialisierung erforderlich) im folgenden Format ausgetauscht:

{
	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
}

Arbeitsablauf

1. Der Host abonniert Iframe-Nachrichten, sobald Iframe hinzugefügt wird.
2. Iframe sendet jede verfügbare Nachricht.
3. Der Host antwortet auf eingehende Nachrichten, indem er die entsprechende Nachricht zurücksendet.

Verfügbare API-Methoden

1. Anfrage: get_space_ids

Daten: undefiniert

Senden Sie diese Nachricht überall dort hin, wo Sie wissen möchten, in welchen Bereich und in welchen Raum iFrame eingebettet ist. Rufen Sie dies nicht mehrmals auf, es sei denn, es ist notwendig, speichern Sie das Ergebnis, es ändert sich nie innerhalb einer Sitzung.

Antwort: space_ids

data: { spaceId: string, roomId: string, spaceSlug: string }

Dies ist eine Antwortnachricht an get_space_ids

2. Anfrage: get_user_info

Daten: undefiniert

Senden Sie diese Nachricht, wo immer Sie die aktuellen Space-Benutzerinformationen wissen möchten. Der Benutzer kann diese Daten innerhalb einer Sitzung ändern.

Antwort: user_info

data: { id?: string, name?: string, about?: string, pronoun?: string, avatarUrl?: string }

Dies ist eine Antwortnachricht an get_user_info

API-Nutzungsbeispiel

Anfrage: get_user_info

postMessage(
 {
  name: 'get_user_info',
  requestId: 'qwe123' // optional
 },
 '<https://app.spatial.chat>'
)

Antwort: 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
 }
}

Sicherheitsüberlegungen

1. Stellen Sie sicher, dass das Zielfenster window.parent oder window.opener ist.
2. Setzen Sie immer postMessages 2. Parameter targetOrigin. Iframe sollte 'https://app.spatial.chat'.
3. Verwenden Sie nicht den dritten Parameter transfer von postMessage.