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
- Der Host abonniert Iframe-Nachrichten, sobald Iframe hinzugefügt wird.
- Iframe sendet jede verfügbare Nachricht.
- 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
- Stellen Sie sicher, dass das Zielfenster
window.parent
oderwindow.opener
ist. - Setzen Sie immer
postMessage
s 2. ParametertargetOrigin
. Iframe sollte 'https://app.spatial.chat'. - Verwenden Sie nicht den dritten Parameter
transfer
vonpostMessage
.
Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.