PresentationConnectionAvailableEvent.connection — Eigenschaft · JavaScript-Referenz

Signatur

PresentationConnectionAvailableEvent.connection

Beschreibung

Die Eigenschaft connection eines PresentationConnectionAvailableEvent liefert die PresentationConnection, die das Ereignis connectionavailable ausgelöst hat. Über dieses Objekt tauschen steuernde Seite (Controller) und Präsentationsseite (Receiver, z. B. ein zweiter Bildschirm oder ein Chromecast) Nachrichten aus, fragen den Verbindungszustand ab und beenden die Präsentation.

Das Ereignis tritt an zwei Stellen der Presentation API auf:

Steuernde Seite: auf einem PresentationRequest, sobald über start(), reconnect() oder eine vom Browser initiierte Präsentation (navigator.presentation.defaultRequest) eine Verbindung entsteht.
Empfangende Seite: auf der PresentationConnectionList aus navigator.presentation.receiver.connectionList, sobald sich ein weiterer Controller mit der laufenden Präsentation verbindet.

Typischerweise liest man event.connection im Ereignis-Handler aus, registriert darauf message-, close- und terminate-Handler und speichert die Verbindung, um später per send() Daten zu übertragen. Die Eigenschaft ist schreibgeschützt und wird beim Erzeugen des Ereignisses über das Init-Objekt gesetzt.

Rückgabewert

Typ

PresentationConnection

Beschreibung

Die neu verfügbare Verbindung zwischen Controller und Präsentation. Der state ist zu diesem Zeitpunkt meist "connecting" oder "connected".

Beispiele

Steuernde Seite: Verbindung aus PresentationRequest übernehmen

const request = new PresentationRequest(['receiver.html']);
let activeConnection = null;

request.addEventListener('connectionavailable', (event) => {
  activeConnection = event.connection;
  console.log('Verbindung verfügbar, ID:', activeConnection.id);

  activeConnection.addEventListener('connect', () => {
    activeConnection.send(JSON.stringify({ slide: 1 }));
  });
  activeConnection.addEventListener('message', (e) => {
    console.log('Antwort vom Receiver:', e.data);
  });
});

// Muss durch eine Benutzeraktion ausgelöst werden
document.querySelector('#present').addEventListener('click', () => {
  request.start().catch((err) => console.error('Start fehlgeschlagen:', err.name));
});

Verbindung verfügbar, ID: 3f2a... Antwort vom Receiver: {"ok":true}

Empfangende Seite: neue Controller-Verbindungen annehmen

const setupConnection = (connection) => {
  connection.addEventListener('message', (e) => {
    const { slide } = JSON.parse(e.data);
    document.querySelector('#slide').textContent = `Folie ${slide}`;
    connection.send(JSON.stringify({ ok: true }));
  });
};

const init = async () => {
  if (!navigator.presentation?.receiver) return; // keine Präsentationsseite
  const list = await navigator.presentation.receiver.connectionList;

  // Bereits bestehende Verbindungen
  list.connections.forEach(setupConnection);

  // Später hinzukommende Verbindungen
  list.addEventListener('connectionavailable', (event) => {
    console.log('Neuer Controller verbunden:', event.connection.state);
    setupConnection(event.connection);
  });
};

init();

Neuer Controller verbunden: connected

on-Property verwenden und Handler wieder entfernen

const request = new PresentationRequest('https://example.com/slides.html');

const onAvailable = (event) => {
  console.log('Status:', event.connection.state);
  // Nur die erste Verbindung interessiert – Listener danach entfernen
  request.removeEventListener('connectionavailable', onAvailable);
};
request.addEventListener('connectionavailable', onAvailable);

// Alternative über die Event-Handler-Eigenschaft
request.onconnectionavailable = ({ connection }) => {
  console.log('Via on-Property:', connection.url);
};

Status: connecting Via on-Property: https://example.com/slides.html

Ereignis manuell erzeugen (z. B. für Tests)

// Voraussetzung: eine vorhandene PresentationConnection 'conn'
const fakeEvent = new PresentationConnectionAvailableEvent('connectionavailable', {
  connection: conn // Pflichtfeld im Init-Objekt
});
console.log(fakeEvent.connection === conn);

true

// Wichtig · Fallstricke

Browser-Unterstützung: Die Presentation API ist experimentell und wird im Wesentlichen nur von Chromium-Browsern auf dem Desktop unterstützt. Firefox und Safari bieten sie nicht an. Vor der Nutzung immer per 'PresentationRequest' in window bzw. navigator.presentation?.receiver prüfen.
Sicherer Kontext: Die API steht nur unter HTTPS (oder localhost) zur Verfügung. Außerdem muss PresentationRequest.start() durch eine Benutzeraktion ausgelöst werden, sonst wird das Promise mit einem Fehler abgelehnt.
Zeitpunkt: Wenn das Ereignis eintrifft, ist die Verbindung nicht zwingend schon "connected". send() erst nach dem connect-Ereignis oder nach Prüfung von connection.state aufrufen, sonst gibt es einen InvalidStateError.
Mehrere Controller: Auf der Receiver-Seite können sich mehrere Controller verbinden. Jede Verbindung einzeln verwalten und bei close/terminate aufräumen, damit keine Speicherlecks entstehen.
Sicherheit: Über message ankommende Daten sind nicht vertrauenswürdig. Vor der Verarbeitung validieren und niemals ungeprüft per innerHTML einfügen.

Siehe auch

PresentationConnection.binaryType PresentationConnection.state PresentationConnection.id PresentationConnection.url RTCPeerConnectionIceEvent.candidate