---
title: WebSocket
slug: Web/API/WebSocket
tags:
  - API
  - WebSocket
  - WebSockets
translation_of: Web/API/WebSocket
---
<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p>

<p>Das <code>WebSocket</code>-Objekt bietet die API für das Erstellen und Verwalten einer <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a>-Verbindung zu einem Server, ebenso dient es auch dem Senden und dem Empfangen von Daten auf der Verbindung.</p>

<p>Der WebSocket-Konstruktor akzeptiert einen benötigten und einen optionalen Parameter:</p>

<pre>WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);
</pre>

<dl>
 <dt><code>url</code></dt>
 <dd>Die URL mit der sich das WebSocket verbinden soll; dies sollte die URL sein, auf welcher der WebSocket Server antworten wird.</dd>
 <dt><code>protocols</code> {{ optional_inline() }}</dt>
 <dd>Entweder ein einzelnes Protokol als String oder ein Array aus Protokol-Strings. Diese Strings werden genutzt um Sub-Protokolle zu indizieren, sodass ein einzelner Server mehrere WebSocket Sub-Protokolle implementieren kann (Beispielsweiße kann ein Server abhängig vom <code>protocol</code> verschiedene Interaktionen mit dem Client handeln). Falls du kein Protokoll angibst, wird ein leerer String verwendet.</dd>
</dl>

<p>Der Konstruktur kann folgende Exceptions werfen:</p>

<dl>
 <dt><code>SECURITY_ERR</code></dt>
 <dd>Der Port auf dem man die Verbindung aufbauen will, ist blockiert worden.</dd>
</dl>

<dl>
</dl>

<h2 id="Method_overview" name="Method_overview">Methoden Übersicht</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
  </tr>
  <tr>
   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">Attribute</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Attribut</td>
   <td class="header">Typ</td>
   <td class="header">Beschreibung</td>
  </tr>
  <tr>
   <td><code>binaryType</code></td>
   <td>{{ DOMXref("DOMString") }}</td>
   <td>Ein String indiziert den Typ der Binärdaten, die von der Verbindung übertragen werden. Dies sollte entweder "blob" sein, falls DOM-Objekte {{ domxref("Blob") }} genutzt werden oder "arraybuffer" falls <a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>-Objekte genutzt werden.</td>
  </tr>
  <tr>
   <td><code>bufferedAmount</code></td>
   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
   <td>Die Anzahl der Bytes der Daten, welche bereits durch Aufrufe von {{ manch("send") }} gebuffert wurden, allerdings noch nicht über das Netzwerk versand wurden. Dieses Feld setzt sich nicht auf Null zurück, wenn die Verbindung beendet wurde; falls du weiterhin {{ manch("send") }} aufrufst, wird dieses Feld weiterhin ansteigen. <strong>Read only.</strong></td>
  </tr>
  <tr>
   <td><code>extensions</code></td>
   <td>{{ DOMXref("DOMString") }}</td>
   <td>Die Erweiterungen, die von dem Server gewählt wurden. Aktuell ist dies nur ein leerer String oder eine Liste von Erweiterungen, die von der Verbindung verhandelt wurden.</td>
  </tr>
  <tr>
   <td><code>onclose</code></td>
   <td>{{ domxref("EventListener") }}</td>
   <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>CLOSED</code> wechselt. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> welches "close" heißt.</td>
  </tr>
  <tr>
   <td><code>onerror</code></td>
   <td>{{ domxref("EventListener") }}</td>
   <td>Ein Event-Listener welcher bei Fehlern aufgerufen wird. Dies ist ein einfaches Event welches "error" genannt wird.</td>
  </tr>
  <tr>
   <td><code>onmessage</code></td>
   <td>{{ domxref("EventListener") }}</td>
   <td>Ein Event-Listener welcher aufgerufen wird, wenn eine Nachricht vom Server empfangen wird. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> welches "message" heißt.</td>
  </tr>
  <tr>
   <td><code>onopen</code></td>
   <td>{{ domxref("EventListener") }}</td>
   <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>OPEN</code> wechselt; dies indiziert, dass die Verbindung bereit ist, dass man Daten versenden und empfangen kann. Dieses Event ist eine einfaches Event, es heißt "open".</td>
  </tr>
  <tr>
   <td><code>protocol</code></td>
   <td>{{ DOMXref("DOMString") }}</td>
   <td>Ein String welcher dne Namen des Sub-Protokolls nennt, welches vom Server ausgewählt wurde; dieses Protokoll wird eines sein, welches in den Strings des <code>protocols</code>-Parameter beim Erstellen des WebSocket-Objekt angegeben wurde.</td>
  </tr>
  <tr>
   <td><code>readyState</code></td>
   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
   <td>Der aktuelle Status der Verbindung; dies ist einer der {{ anch("Ready state Konstanten") }}. <strong>Read only.</strong></td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>{{ DOMXref("DOMString") }}</td>
   <td>Die URL welche beim Konstruktor angegeben wurde. Dies ist immer die absolute URL. <strong>Read only.</strong></td>
  </tr>
 </tbody>
</table>

<h2 id="Constants" name="Constants">Konstanten</h2>

<h3 id="Ready_state_Konstanten">Ready state Konstanten</h3>

<p>Diese Konstanten werden vom <code>readyState</code> Attribut genutzt, um den Status der WebSocket-Verbindung zu beschreiben.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Konstante</td>
   <td class="header">Inhalt</td>
   <td class="header">Beschreibung</td>
  </tr>
  <tr>
   <td><code>CONNECTING</code></td>
   <td><code>0</code></td>
   <td>Die Verbindung ist noch nicht hergestellt.</td>
  </tr>
  <tr>
   <td><code>OPEN</code></td>
   <td><code>1</code></td>
   <td>Die Verbindung ist hergestellt und bereit darüber zu kommunizieren.</td>
  </tr>
  <tr>
   <td><code>CLOSING</code></td>
   <td><code>2</code></td>
   <td>Die Verbindung ist im Prozess des Schließens.</td>
  </tr>
  <tr>
   <td><code>CLOSED</code></td>
   <td><code>3</code></td>
   <td>Die Verbindung ist geschlossen oder konnte nicht hergestellt werden.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods" name="Methods">Methoden</h2>

<h3 id="close()" name="close()">close()</h3>

<p>Schließt die WebSocket-Verbindung oder den Verbindungsversuch, falls dieser gerade existiert. Falls die Verbindung bereits <code>CLOSED</code> ist, macht diese Methode überhaupt nichts.</p>

<pre class="eval">void close(
  in optional unsigned short code,
  in optional DOMString reason
);
</pre>

<h6 id="Parameters" name="Parameters">Parameter</h6>

<dl>
 <dt><code>code</code> {{ optional_inline() }}</dt>
 <dd>Eine Nummer welche den Status-Code setzt, warum die Verbindung geschlossen wird. Falls dieser Parameter nicht gesetzt wird, wird er auf 1005 (welcher bei einer normalen Verbindung "Keinen Status erhalten" bedeutet) gesetzt.</dd>
 <dt><code>reason</code> {{ optional_inline() }}</dt>
 <dd>Ein vom Menschen lesbarer String, welcher erklärt, warum die Verbindung geschlossen wurde. Dieser Text darf nicht länger als 123 Bytes UTF-8-Text sein. Dabei heißt dies nicht unbedingt, dass es auch 123 Zeichen sind.</dd>
</dl>

<h6 id="Exceptions_thrown">Exceptions thrown</h6>

<dl>
 <dt><code>INVALID_ACCESS_ERR</code></dt>
 <dd>Ein ungültiger <code>code</code> wurde gesetzt.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>Der <code>reason</code>-String ist zu lang oder enthält ungültige Zeichen.</dd>
</dl>

<h6 id="Notizen">Notizen</h6>

<p>In Gecko vor Version Gecko 8.0 unterstützte diese Methode überhaupt keine Parameter. {{ geckoRelease("8.0") }}.</p>

<h3 id="send()" name="send()">send()</h3>

<p>Überträgt Daten zu dem Server über die WebSocket-Verbindung.</p>

<pre class="eval">void send(
  in DOMString data
);

void send(
  in ArrayBuffer data
);

void send(
  in Blob data
);
</pre>

<h6 id="Parameters" name="Parameters">Parameter</h6>

<dl>
 <dt><code>data</code></dt>
 <dd>Ein String der zum Server geschickt wird.</dd>
</dl>

<h6 id="Exceptions_thrown_2">Exceptions thrown</h6>

<dl>
 <dt><code>INVALID_STATE_ERR</code></dt>
 <dd>Die Verbindung hat aktuell nicht den Status <code>OPEN</code>.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd><code>data</code> enthält ungültige Zeichen.</dd>
</dl>

<h6 id="Erläuterung">Erläuterung</h6>

<div class="note">
<p><strong>Notiz:</strong> Geckos Implementierung von der <code>send()</code> Methode unterscheidet sich ein wenig von der Spezifikation in {{Gecko("6.0")}}; Gecko gibt einen <code>boolean</code> zurück, welcher darüber auskunft gibt, ob die Verbindung immer noch hergestellt ist oder nicht (und, durch Erweiterung, dass die Daten erfolgreich gesammelt oder übertragen wurden); dies wurde in {{Gecko("8.0")}} korrigiert.</p>

<p>In {{Gecko("11.0")}} ist die Unterstützung für  <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> implementiert aber nicht die für {{ domxref("Blob") }} Datentypen.</p>
</div>

<h2 id="See_also" name="See_also">Weiterführendes</h2>

<ul>
 <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
 <li><a class="external" href="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
</ul>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Sub-protocol support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("6.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("7.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Sub-protocol support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("7.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko_Notizen">Gecko Notizen</h3>

<p>In Gecko 6.0 ist der Konstruktur mit einem Prefix ausgestattet; du must <code>MozWebSocket()</code> benutzen:</p>

<pre>var mySocket = new MozWebSocket("<span class="plain">http://www.example.com/socketserver</span>");
</pre>

<p>Das <code>extensions</code>-Attribut wurde bis Gecko 8.0 nicht unterstützt.</p>

<div class="note"><strong>Notiz:</strong> Vor {{Gecko("11.0")}} ausgehende Nachrichten welche mit der {{ manch("send") }} Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.</div>

<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}</p>