PresentationConnection.close() — Methode · JavaScript-Referenz

Signatur

PresentationConnection.prototype.close()

Beschreibung

Die Methode close() beendet die Kommunikationsverbindung zwischen der steuernden Seite (Controller) und der Präsentation auf einem zweiten Bildschirm, zum Beispiel einem Chromecast oder einem angeschlossenen Monitor. Der User Agent setzt den Zustand der Verbindung zunächst auf "closing" und schickt der Gegenseite eine leere closeMessage. Als closeReason wird dabei "closed" übermittelt. Danach wechselt state auf "closed", und auf beiden Seiten wird das Event close mit einem PresentationConnectionCloseEvent ausgelöst.

Wichtig ist der Unterschied zu terminate(): close() trennt nur diese eine Verbindung, die Präsentationsseite läuft auf dem Anzeigegerät weiter. Später kannst du dich über PresentationRequest.prototype.reconnect() mit der gespeicherten id wieder mit ihr verbinden. terminate() dagegen beendet die Präsentation vollständig.

close() passt zum Beispiel, wenn die steuernde Seite neu geladen oder verlassen wird, wenn der Nutzer auf „Trennen“ klickt oder wenn mehrere Controller dieselbe Präsentation nacheinander steuern sollen. Die Methode kannst du sowohl auf der Controller-Seite als auch auf der Empfängerseite (über navigator.presentation.receiver) aufrufen.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Das Schließen läuft asynchron ab. Ob es abgeschlossen ist, erkennst du am Event close bzw. an connection.state === "closed".

Beispiele

Verbindung per Button trennen

const request = new PresentationRequest(['slides.html']);
let connection = null;

document.querySelector('#start').addEventListener('click', async () => {
  connection = await request.start();
  // ID merken, um später wieder verbinden zu können
  localStorage.setItem('presentationId', connection.id);

  connection.addEventListener('close', (event) => {
    console.log(`Verbindung geschlossen: ${event.reason}`);
  });
});

document.querySelector('#disconnect').addEventListener('click', () => {
  // Nur schließen, wenn die Verbindung noch offen ist oder gerade aufgebaut wird
  if (connection && ['connecting', 'connected'].includes(connection.state)) {
    connection.close();
  }
});

Verbindung geschlossen: closed

Beim Verlassen der Seite schließen und später wieder verbinden

const request = new PresentationRequest(['slides.html']);
let connection = null;

// Beim Laden: bestehende Präsentation wieder aufnehmen
const savedId = localStorage.getItem('presentationId');
if (savedId) {
  try {
    connection = await request.reconnect(savedId);
    console.log('Wieder verbunden, Zustand:', connection.state);
  } catch (err) {
    console.warn('Reconnect fehlgeschlagen:', err.name);
    localStorage.removeItem('presentationId');
  }
}

// close() statt terminate(): Die Präsentation läuft weiter
window.addEventListener('pagehide', () => {
  if (connection?.state === 'connected') {
    connection.close();
  }
});

Wieder verbunden, Zustand: connected

Empfängerseite: Verbindung nach einer Abschlussnachricht schließen

// Läuft in der Präsentationsseite (slides.html)
const list = await navigator.presentation.receiver.connectionList;

const handle = (conn) => {
  conn.addEventListener('message', (event) => {
    if (event.data === 'bye') {
      conn.send('Tschüss!');
      conn.close();
    }
  });
  conn.addEventListener('close', (e) => {
    console.log('Controller getrennt:', e.reason, e.message);
  });
};

list.connections.forEach(handle);
list.addEventListener('connectionavailable', (e) => handle(e.connection));

Controller getrennt: closed

// Wichtig · Fallstricke

Kompatibilität: Die Presentation API ist experimentell und wird praktisch nur von Chromium-basierten Browsern unterstützt, dort auch nur teilweise. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit 'PresentationRequest' in window. Außerdem ist ein sicherer Kontext (HTTPS) nötig.
Kein Effekt bei falschem Zustand: Ist state bereits "closed" oder "terminated", bricht der Aufruf stillschweigend ab. Es wird kein Fehler geworfen und kein neues close-Event ausgelöst.
close() ist nicht terminate(): Wer die Präsentation auf dem Zweitbildschirm wirklich beenden will, muss terminate() aufrufen. Nach close() läuft sie weiter.
Nachrichten, die nach close() mit send() geschickt werden, lösen einen InvalidStateError aus. Schicke Abschlussnachrichten also vor dem Schließen.
Das Event close kommt asynchron. Außerdem wird es auch bei Verbindungsfehlern ausgelöst, dann mit reason === "error". Werte daher immer event.reason aus.

Siehe auch

PresentationConnection PresentationConnection.terminate() PresentationConnection.send() PresentationConnection.state PresentationConnectionCloseEvent PresentationRequest.reconnect()