Start · Sprachen · JavaScript · Referenz · RTCDataChannel.close()

RTCDataChannel.close()

Methode

Schließt einen <code>RTCDataChannel</code>. Beide Seiten der Verbindung können das auslösen, danach lassen sich keine Daten mehr über den Kanal senden.

seit JavaScript Baseline: alle modernen Browser (WebRTC) Kategorie: webapi

Signatur

RTCDataChannel.prototype.close()

Beschreibung

Mit close() beendest du einen WebRTC-Datenkanal geordnet. Die Methode setzt readyState sofort auf "closing". Nachrichten, die schon in der Sendewarteschlange stehen (siehe bufferedAmount), werden noch übertragen. Danach wird der zugrunde liegende SCTP-Stream geschlossen, readyState wechselt zu "closed" und das Ereignis close wird ausgelöst.

Beide Endpunkte können den Kanal schließen. Die Gegenseite bekommt ebenfalls ein close-Ereignis. Die übrige RTCPeerConnection und andere Datenkanäle derselben Verbindung laufen weiter. Willst du die gesamte Verbindung beenden, rufst du zusätzlich RTCPeerConnection.close() auf. Dabei werden auch alle Datenkanäle geschlossen.

Setze close() ein, wenn ein Kanal nicht mehr gebraucht wird, zum Beispiel nach einer Dateiübertragung oder beim Verlassen eines Chats. So werden Ressourcen im Browser und auf der Gegenseite freigegeben.

Beispiele

Kanal öffnen, Nachricht senden und schließen

const pc = new RTCPeerConnection();
const channel = pc.createDataChannel('chat');

channel.addEventListener('open', () => {
  channel.send('Hallo und tschüss!');
  channel.close();
  console.log(channel.readyState);
});

channel.addEventListener('close', () => {
  console.log('Kanal geschlossen:', channel.readyState);
});
closing Kanal geschlossen: closed

Erst schließen, wenn der Sendepuffer leer ist

const closeWhenFlushed = (channel) => new Promise((resolve) => {
  channel.addEventListener('close', resolve, { once: true });
  if (channel.bufferedAmount === 0) {
    channel.close();
    return;
  }
  channel.bufferedAmountLowThreshold = 0;
  channel.addEventListener('bufferedamountlow', () => channel.close(), { once: true });
});

// Nutzung nach einer Dateiübertragung
const sendFile = async (channel, file) => {
  const buffer = await file.arrayBuffer();
  const chunkSize = 16 * 1024;
  for (let i = 0; i < buffer.byteLength; i += chunkSize) {
    channel.send(buffer.slice(i, i + chunkSize));
  }
  await closeWhenFlushed(channel);
  console.log('Übertragung beendet, Kanal zu.');
};
Übertragung beendet, Kanal zu.

Aufräumen beim Verlassen der Seite

const pc = new RTCPeerConnection();
const channels = [
  pc.createDataChannel('chat'),
  pc.createDataChannel('status')
];

window.addEventListener('pagehide', () => {
  for (const ch of channels) {
    if (ch.readyState !== 'closed') ch.close();
  }
  pc.close();
});

// Wichtig · Fallstricke

  • Nach close() wirft send() einen InvalidStateError, sobald readyState nicht mehr "open" ist. Prüfe den Zustand also vor dem Senden.
  • close() ist idempotent: Ein erneuter Aufruf auf einem Kanal, der gerade geschlossen wird oder schon geschlossen ist, bewirkt nichts.
  • Ein geschlossener Kanal lässt sich nicht wieder öffnen. Dafür musst du mit createDataChannel() einen neuen Kanal anlegen.
  • Wird ein Kanal wegen eines Fehlers geschlossen, feuert vor close das Ereignis error. Das Ereignis closing wird noch nicht von allen Browsern unterstützt (Firefox und ältere Safari-Versionen fehlen).
  • Sehr alte Browser brauchen eventuell adapter.js. Datenkanäle funktionieren nur in sicheren Kontexten zuverlässig (HTTPS).