PresentationConnectionList — Schnittstelle · JavaScript-Referenz

Signatur

interface PresentationConnectionList extends EventTarget

Beschreibung

PresentationConnectionList ist Teil der Presentation API und steht nur im empfangenden Browsing-Kontext zur Verfügung, also auf der Seite, die auf einem zweiten Bildschirm läuft (z. B. Beamer, Chromecast oder externer Monitor). Die Seite, die die Präsentation steuert, nennt man Controller. Ein Objekt dieser Schnittstelle bekommst du über das Promise navigator.presentation.receiver.connectionList.

Die Liste hat nur eine Eigenschaft: connections. Das ist ein eingefrorenes Array (FrozenArray) mit allen PresentationConnection-Objekten, deren Status connecting oder connected ist. So kann eine Präsentationsseite mit mehreren Controllern gleichzeitig Nachrichten austauschen, etwa bei einer Folienpräsentation, die von mehreren Geräten aus gesteuert wird.

Verbindet sich ein neuer Controller, löst die Liste das Event connectionavailable aus. Das Event ist vom Typ PresentationConnectionAvailableEvent und enthält die neue Verbindung in event.connection. Du kannst es mit addEventListener("connectionavailable", handler) abonnieren oder über die Eigenschaft onconnectionavailable setzen.

Die Schnittstelle hat keinen öffentlichen Konstruktor. new PresentationConnectionList() wirft einen TypeError. Instanzen erzeugt ausschließlich der Browser.

Parameter

Name	Typ	Default	Beschreibung
$connections	ReadonlyArray<PresentationConnection>		Nur lesbar. Eingefrorenes Array mit allen nicht beendeten eingehenden Verbindungen (Status `connecting` oder `connected`).
$onconnectionavailable	((event: PresentationConnectionAvailableEvent) => void) \| null	null	Handler-Eigenschaft für das Event `connectionavailable`, das bei jeder neuen eingehenden Verbindung ausgelöst wird.

Rückgabewert

Typ

PresentationConnectionList

Beschreibung

Wird von navigator.presentation.receiver.connectionList als Promise<PresentationConnectionList> geliefert. Das Promise erfüllt sich, sobald mindestens eine Verbindung besteht.

Beispiele

Liste abrufen und bestehende Verbindungen durchlaufen

// Läuft auf der Präsentationsseite (Empfänger)
const initReceiver = async () => {
  if (!navigator.presentation?.receiver) {
    console.log('Kein empfangender Präsentationskontext.');
    return;
  }
  const list = await navigator.presentation.receiver.connectionList;
  console.log(`Aktive Verbindungen: ${list.connections.length}`);

  list.connections.forEach((conn) => {
    console.log(conn.id, conn.state);
  });
};

initReceiver();

Aktive Verbindungen: 1 3f2a9c1e-... connected

Neue Controller per addEventListener annehmen

const setupConnection = (connection) => {
  connection.addEventListener('message', (event) => {
    console.log('Nachricht vom Controller:', event.data);
    connection.send(JSON.stringify({ ack: true }));
  });
  connection.addEventListener('close', () => {
    console.log(`Verbindung ${connection.id} geschlossen`);
  });
};

const start = async () => {
  const list = await navigator.presentation.receiver.connectionList;

  // Schon bestehende Verbindungen einrichten
  list.connections.forEach(setupConnection);

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

start();

Neuer Controller verbunden Nachricht vom Controller: {"slide":2}

Event über onconnectionavailable setzen und Broadcast an alle

const broadcast = (list, payload) => {
  const data = JSON.stringify(payload);
  list.connections
    .filter((c) => c.state === 'connected')
    .forEach((c) => c.send(data));
};

const run = async () => {
  const list = await navigator.presentation.receiver.connectionList;

  list.onconnectionavailable = ({ connection }) => {
    connection.onconnect = () => {
      broadcast(list, { type: 'viewers', count: list.connections.length });
    };
  };

  // Später: keine neuen Verbindungen mehr behandeln
  // list.onconnectionavailable = null;
};

run();

// Wichtig · Fallstricke

Browser-Unterstützung: Experimentell. Die Schnittstelle gibt es nur in Chromium-basierten Browsern, dort aber auch nur im empfangenden Kontext (z. B. einer 1-UA-Präsentation). Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit navigator.presentation?.receiver, ob sie vorhanden ist.
navigator.presentation.receiver ist auf der steuernden Seite null. Dort arbeitest du stattdessen mit PresentationRequest.
Das Promise connectionList erfüllt sich erst, wenn die erste Verbindung besteht. Es kann also beliebig lange offen bleiben.
connections liefert bei Änderungen ein neues eingefrorenes Array. Speichere keine Referenz darauf, sondern lies die Eigenschaft jedes Mal neu aus.
Die Schnittstelle funktioniert nur in einem sicheren Kontext (HTTPS). Nachrichten von Controllern solltest du als nicht vertrauenswürdig behandeln und vor der Verarbeitung prüfen, z. B. JSON.parse in try/catch und niemals über innerHTML ausgeben.

Siehe auch

Presentation PresentationAvailability PresentationConnection PresentationConnectionCloseEvent PresentationReceiver