PresentationConnection.state — Eigenschaft · JavaScript-Referenz

Signatur

PresentationConnection.state

Beschreibung

Die Eigenschaft state gehört zur Presentation API. Sie zeigt an, in welchem Zustand sich die Verbindung zwischen der steuernden Seite (Controller) und der Präsentationsseite gerade befindet, also etwa zu einem Chromecast oder einem zweiten Bildschirm. Die Eigenschaft ist schreibgeschützt. Ihr Wert ist einer der folgenden Strings:

"connecting": Der Browser baut die Verbindung gerade auf.
"connected": Die Verbindung steht. Nur in diesem Zustand kann man mit send() Nachrichten verschicken.
"closed": Die Verbindung wurde geschlossen, zum Beispiel mit close() oder durch einen Fehler. Die Präsentation selbst läuft möglicherweise weiter, und man kann sich mit PresentationRequest.reconnect() wieder verbinden.
"terminated": Die Präsentation wurde beendet, zum Beispiel mit terminate(). Wieder verbinden ist nicht mehr möglich.

Mit state prüft man vor dem Senden, ob eine Verbindung benutzbar ist, oder man passt die Benutzeroberfläche an, zum Beispiel einen Button „Übertragung beenden“. Um auf Änderungen des Zustands zu reagieren, nutzt man am besten die Events connect, close und terminate statt die Eigenschaft wiederholt abzufragen.

Rückgabewert

Typ

"connecting" | "connected" | "closed" | "terminated"

Beschreibung

Ein String mit dem aktuellen Zustand der Verbindung (Enum PresentationConnectionState).

Beispiele

Präsentation starten und Zustand prüfen

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

const startButton = document.querySelector('#start');
startButton.addEventListener('click', async () => {
  try {
    const connection = await request.start();
    console.log('Zustand direkt nach start():', connection.state);

    connection.addEventListener('connect', () => {
      console.log('Jetzt:', connection.state);
    });
  } catch (err) {
    console.error('Präsentation fehlgeschlagen:', err.name);
  }
});

Zustand direkt nach start(): connecting Jetzt: connected

Nur senden, wenn die Verbindung steht

const sendSlide = (connection, slideNumber) => {
  if (connection?.state !== 'connected') {
    console.warn(`Senden nicht möglich, Zustand: ${connection?.state ?? 'keine Verbindung'}`);
    return false;
  }
  connection.send(JSON.stringify({ type: 'goto', slide: slideNumber }));
  return true;
};

// Nutzung: sendSlide(currentConnection, 3);

Senden nicht möglich, Zustand: closed

Benutzeroberfläche an den Zustand anpassen und wieder verbinden

const request = new PresentationRequest(['receiver.html']);
const statusEl = document.querySelector('#status');

const updateUi = (connection) => {
  statusEl.textContent = connection.state;
  document.querySelector('#reconnect').hidden = connection.state !== 'closed';
};

const watch = (connection) => {
  localStorage.setItem('presId', connection.id);
  ['connect', 'close', 'terminate'].forEach((type) =>
    connection.addEventListener(type, () => updateUi(connection))
  );
  updateUi(connection);
};

document.querySelector('#reconnect').addEventListener('click', async () => {
  const id = localStorage.getItem('presId');
  if (!id) return;
  const connection = await request.reconnect(id);
  watch(connection);
});

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Presentation API ist experimentell. Sie funktioniert praktisch nur in Chromium-basierten Browsern und braucht einen sicheren Kontext (HTTPS). Firefox und Safari unterstützen sie nicht. Vorher mit 'PresentationRequest' in window prüfen, ob die API vorhanden ist.
Direkt nach start() kann der Zustand noch "connecting" sein. Wer sofort send() aufruft, bekommt einen InvalidStateError. Deshalb auf das Event connect warten.
"closed" und "terminated" sind verschieden: Nach "closed" kann man mit reconnect() wieder verbinden, nach "terminated" nicht mehr.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie connection.state = 'closed' hat keine Wirkung. Zum Schließen close() oder terminate() verwenden.
Beim Event close liefert event.reason ("error", "closed", "wentaway") mehr Einzelheiten als state.

Siehe auch

PresentationConnection PresentationConnection.send() PresentationConnection.close() PresentationConnection.terminate() PresentationRequest.reconnect() PerformanceTiming.connectStart