Um über das WebSocket-Protokoll zu kommunizieren, müssen Sie einWebSocket-Objekt erstellen; dies wird automatisch versuchen, die Verbindung zum Server zu öffnen.

Der WebSocket-Konstruktor akzeptiert einen erforderlichen und einen optionalen Parameter:

webSocket = new WebSocket(url, protocols);

url

Die URL, zu der die Verbindung hergestellt werden soll; dies sollte die URL sein, auf die der WebSocket-Server antworten wird.Dies sollte das URL-Schemawss:// verwenden, obwohl einige Software möglicherweise erlaubt, die unsicherews:// für eine lokale Verbindung zu verwenden.Relative URL-Werte undhttps:// undhttp:// Schemata sind ebenfalls in denneuesten Browserversionen erlaubt.

protocolsOptional

Entweder ein einzelner Protokoll-String oder ein Array von Protokoll-Strings.Diese Strings werden verwendet, um Subprotokolle anzugeben, sodass ein einzelner Server mehrere WebSocket-Subprotokolle implementieren kann (zum Beispiel könnten Sie möchten, dass ein Server in der Lage ist, verschiedene Arten von Interaktionen basierend auf dem angegebenenprotocol zu handhaben).Wenn Sie keinen Protokoll-String angeben, wird ein leerer String angenommen.

Der Konstruktor löst einenSecurityError aus, wenn das Ziel keinen Zugriff erlaubt.Dies kann passieren, wenn Sie versuchen, eine unsichere Verbindung zu verwenden (die meistenUser Agents erfordern jetzt eine sichere Verbindung für alle WebSocket-Verbindungen, es sei denn, sie befinden sich auf demselben Gerät oder möglicherweise im selben Netzwerk).

Wenn ein Fehler beim Versuch auftritt, die Verbindung herzustellen, wird zuerst einerror Event an dasWebSocket-Objekt gesendet (wodurch alle Handler aufgerufen werden), gefolgt von einemclose Event, das den Grund für das Schließen der Verbindung angibt.

Der Browser kann auch eine detailliertere Fehlermeldung sowie einen Schließcode gemäßRFC 6455, Abschnitt 7.4 über dasCloseEvent ausgeben.

Dieses einfache Beispiel erstellt einen neuen WebSocket und verbindet sich mit dem Server unterwss://www.example.com/socketserver.Ein benutzerdefiniertes Protokoll mit dem Namen "protocolOne" wird in der Anfrage für den Socket in diesem Beispiel angegeben, obwohl dies weggelassen werden kann.

const exampleSocket = new WebSocket(  "wss://www.example.com/socketserver",  "protocolOne",);

Beim Zurückkehren istexampleSocket.readyStateCONNECTING.DerreadyState wirdOPEN, sobald die Verbindung bereit ist, Daten zu übertragen.

Wenn Sie eine Verbindung öffnen möchten und flexibel bezüglich der unterstützten Protokolle sind, können Sie ein Array von Protokollen angeben:

const exampleSocket = new WebSocket("wss://www.example.com/socketserver", [  "protocolOne",  "protocolTwo",]);

Sobald die Verbindung hergestellt ist (alsoreadyStateOPEN ist), wird IhnenexampleSocket.protocol mitteilen, welches Protokoll der Server ausgewählt hat.

Die Herstellung einer WebSocket-Verbindung basiert auf demHTTP Upgrade-Mechanismus, sodass die Anforderung für das Protokoll-Upgrade implizit ist, wenn wir den Webserver alsws://www.example.com oderwss://www.example.com ansprechen.

Sobald Sie Ihre Verbindung geöffnet haben, können Sie beginnen, Daten an den Server zu übertragen.Dazu rufen Sie bei jeder Nachricht, die Sie senden möchten, die Methodesend() desWebSocket-Objekts auf:

exampleSocket.send("Here's some text that the server is urgently awaiting!");

Sie können Daten als String,Blob oderArrayBuffer senden.

Da das Herstellen einer Verbindung asynchron ist und zu Fehlern führen kann, gibt es keine Garantie dafür, dass der Aufruf dersend()-Methode unmittelbar nach dem Erstellen eines WebSocket-Objekts erfolgreich ist.Wir können zumindest sicher sein, dass das Senden von Daten nur stattfindet, sobald eine Verbindung hergestellt ist, indem wir einenonopen-Event-Handler definieren, um die Arbeit zu erledigen:

exampleSocket.onopen = (event) => {  exampleSocket.send("Here's some text that the server is urgently awaiting!");};

Eine praktische Sache, die Sie tun können, ist die Verwendung vonJSON, um recht komplexe Daten an den Server zu senden.Ein Chat-Programm könnte zum Beispiel mit einem Server über ein Protokoll interagieren, das mit Paketen von in JSON gekapselten Daten implementiert ist:

// Send text to all users through the serverfunction sendText() {  // Construct a msg object containing the data the server needs to process the message from the chat client.  const msg = {    type: "message",    text: document.getElementById("text").value,    id: clientID,    date: Date.now(),  };  // Send the msg object as a JSON-formatted string.  exampleSocket.send(JSON.stringify(msg));  // Blank the text input element, ready to receive the next line of text from the user.  document.getElementById("text").value = "";}

WebSockets ist eine ereignisgesteuerte API; wenn Nachrichten empfangen werden, wird einmessage-Ereignis an dasWebSocket-Objekt gesendet. Um es zu verarbeiten, fügen Sie einen Event-Listener für dasmessage-Event hinzu oder verwenden Sie denonmessage-Event-Handler.Um mit dem Abhören von eingehenden Daten zu beginnen, können Sie etwas wie Folgendes tun:

exampleSocket.onmessage = (event) => {  console.log(event.data);};

Betrachten wir die Chat-Client-Anwendung, die inVerwendung von JSON zum Übertragen von Objekten zuvor erwähnt wurde. Es gibt verschiedene Arten von Datenpaketen, die der Client empfangen könnte, wie etwa:

• Login-Handshake
• Nachrichtentext
• Benutzerlisten-Updates

Der Code, der diese eingehenden Nachrichten interpretiert, könnte wie folgt aussehen:

exampleSocket.onmessage = (event) => {  const f = document.getElementById("chat-box").contentDocument;  let text = "";  const msg = JSON.parse(event.data);  const time = new Date(msg.date);  const timeStr = time.toLocaleTimeString();  switch (msg.type) {    case "id":      clientID = msg.id;      setUsername();      break;    case "username":      text = `User <em>${msg.name}</em> signed in at ${timeStr}<br>`;      break;    case "message":      text = `(${timeStr}) ${msg.name} : ${msg.text} <br>`;      break;    case "reject-username":      text = `Your username has been set to <em>${msg.name}</em> because the name you chose is in use.<br>`;      break;    case "user-list":      document.getElementById("user-list-box").innerText = msg.users.join("\n");      break;  }  if (text.length) {    f.write(text);    document.getElementById("chat-box").contentWindow.scrollByPages(1);  }};

Hier verwenden wirJSON.parse(), um das JSON-Objekt zurück in das ursprüngliche Objekt zu konvertieren, und prüfen und handeln dann auf seinen Inhalt.

Der über eine WebSocket-Verbindung empfangene Text ist im UTF-8-Format.

Wenn Sie die WebSocket-Verbindung nicht mehr benötigen, rufen Sie die WebSocket-Methodeclose() auf:

exampleSocket.close();

Es kann hilfreich sein, das AttributbufferedAmount des Sockets zu überprüfen, bevor Sie versuchen, die Verbindung zu schließen, um festzustellen, ob noch Daten im Netzwerk übertragen werden müssen.Wenn dieser Wert nicht 0 ist, sind noch ausstehende Daten vorhanden, sodass Sie möglicherweise warten möchten, bevor Sie die Verbindung schließen.

WebSockets sollten nicht in einer Umgebung mit gemischten Inhalten verwendet werden; das heißt, Sie sollten keine nicht-sichere WebSocket-Verbindung von einer Seite aus öffnen, die über HTTPS geladen wurde, oder umgekehrt.Die meisten Browser erlauben jetzt nur noch sichere WebSocket-Verbindungen und unterstützen diese nicht mehr in unsicheren Kontexten.