Node JS WebSocket Programmierbeispiele
Published: 2023-11-28 14:39:33

Wenn Sie dies lesen, sind Sie wahrscheinlich daran interessiert, eine Anwendung oder einen Dienst zu erstellen, der eine bidirektionale Kommunikation benötigt, die von beiden Seiten initiiert werden kann. Node JavaScript (Node.js) kann verwendet werden, um diese Anwendung mit Hilfe von WebSockets, die für diesen Anwendungsfall entwickelt wurden, schnell zu entwickeln und einzusetzen.

Was ist ein WebSocket?
----------------------

A [WebSocket](https://www.pubnub.com/guides/what-are-websockets-and-when-should-you-use-them/) ist ein Computer-Kommunikationsprotokoll, das [Duplex](https://en.wikipedia.org/wiki/Duplex_(telecommunications)) Kommunikationskanäle über eine einzige [TCP-Verbindung](https://www.pubnub.com/guides/tcp-ip/). Mit anderen Worten, es ermöglicht internetfähigen Geräten, miteinander zu kommunizieren, wobei eines als Client und das andere als Server fungiert und beide die Kommunikation einleiten können.

### Welche Arten von Anwendungen verwenden WebSockets?

Das WebSocket-Protokoll wird überall dort eingesetzt, wo eine Lösung Echtzeitkommunikation erfordert:

-   [Chat-Apps](https://www.pubnub.com/solutions/chat/)
    
-   [Aktienkurs-Updates](https://www.pubnub.com/solutions/data-streaming/)
    
-   [Live-Standortverfolgung auf einer Karte](https://www.pubnub.com/solutions/geolocation/)
    
-   [Live-Zuschauer-Interaktion](https://www.pubnub.com/solutions/live-audience-engagement/)
    
-   [Online-Auktionen](https://www.pubnub.com/solutions/marketplaces/)
    
-   [IoT-Geräte-Updates](https://www.pubnub.com/solutions/iot-device-control/)
    

WebSockets erstellen eine TCP-Socket-Verbindung zwischen mehreren Geräten oder Prozessen. Wie später noch erläutert wird, können ähnliche Funktionen mit folgenden Mitteln implementiert werden [HTTP-Langzeitabfrage](https://www.pubnub.com/learn/glossary/http-long-polling/) oder einem gehosteten Pub/Sub-Dienst implementiert werden, aber lassen Sie uns zunächst ein einfaches Beispiel mit WebSockets und Node.js erstellen.

Ist Node.js gut für WebSockets?
-------------------------------

Ja, Node.js ist eine gute Wahl für die Implementierung von WebSockets, da es eine schnelle und skalierbare serverseitige Umgebung bietet, die die beliebte [ws-Bibliothek](https://www.npmjs.com/package/ws).

### Warum verwenden wir Node.js für WebSockets?

WebSockets erfordern eine dauerhafte Verbindung zwischen dem Client und dem Server, was bedeutet, dass der Server in der Lage sein muss, eine große Anzahl gleichzeitiger Verbindungen zu handhaben. Node.js verwendet ein [ereignisgesteuertes](https://www.pubnub.com/guides/event-driven-architecture/), nicht blockierendes E/A-Modell, wodurch es gut geeignet ist, die Ressourcenanforderungen von WebSocket-basierten Anwendungen zu erfüllen.

### Wie man WebSockets in Node.js implementiert

Die folgende Anleitung führt Sie durch die Erstellung eines WebSocket-Servers in Node.js und zeigt, wie Sie sich mit einem im Browser laufenden WebSocket-Client mit ihm verbinden können.

### Wie viele WebSocket-Verbindungen kann ein Node.js-Server verarbeiten?

Produktionsanwendungen können Zehntausende von WebSocket-Verbindungen gleichzeitig verarbeiten, aber die genaue Anzahl hängt von verschiedenen Faktoren wie den Hardware-Ressourcen des Servers, der Netzwerkbandbreite und der Komplexität der Anwendungslogik ab.

Node.js WebSocket API Beispiel - eine einfache Chat-Anwendung
-------------------------------------------------------------

Der gesamte Quellcode zu diesem Blog wird auf [GitHub](https://github.com/PubNubDevelopers/nodejs-websocket-examples)

Um eine einfache Chat-Anwendung mit WebSockets zu erstellen, benötigen Sie sowohl eine Client- als auch eine Serverkomponente.

Für den Server werden wir Node.js verwenden, und der clientseitige Code wird in einem Webbrowser wie Chrome ausgeführt.

### Node.js WebSockets-Code (Server)

Diese Anwendung benötigt sowohl einen Webserver[(HTTP-Server](https://www.pubnub.com/guides/http/)) als auch einen WebSocket-Server (wss). Der Webserver ermöglicht es uns, unseren Client zu laden (der in einem Browser läuft), und der WebSocket-Server verarbeitet die bidirektionalen Chat-Nachrichten.

### Wie erstellt man einen WebSocket-Server in NodeJS?

Erstellen Sie die Node.js-Anwendung und installieren Sie sowohl die [Express.js](https://expressjs.com/) und '[ws](https://www.npmjs.com/package/ws)Pakete, die unseren Webserver bzw. WebSocket-Server bereitstellen werden.

```js
npm init [Folgen Sie den Eingabeaufforderungen und akzeptieren Sie die Standardeinstellungen] npm install --save express npm install --save ws
```

Der Webserver-Teil wird dem Client eine einzelne Webseite, websocket-client.html, auf Port 3000 zur Verfügung stellen:

```js
const express = require('express') const webserver = express() .use((req, res) => res.sendFile('/websocket-client.html', { root: __dirname }) ) .listen(3000, () => console.log(`Listening on ${3000}`))
```

Ein WebSocket-Server kann mit dem Node.js-Paket WebSocket Library (ws) in nur wenigen Zeilen erstellt werden:

```js
const { WebSocketServer } = require('ws') const sockserver = new WebSocketServer({ port: 443 })
```

### Schreiben von Websocket-Ereignissen für NodeJS-Beispiele

Nachdem wir eine Instanz eines WebSocket-Servers erstellt und den Port angegeben haben, auf dem er laufen soll, können wir jede Aktion definieren, die nach dem Aufbau der WebSocket-Verbindung passieren soll. In unserem Fall schreiben wir Verbindungsereignisse in die Konsole und leiten alle Nachrichten, die wir erhalten, an zuvor verbundene Clients weiter. WebSockets sind so konzipiert, dass sie auf denselben Ports wie HTTP/HTTPS laufen (d. h. 80 und 443).

```js
sockserver.on('connection', ws => { console.log('New client connected!') ws.send('connection established') ws.on('close', () => console.log('Client has disconnected!')) ws.on('message', data => { sockserver.clients.forEach(client => { console.log(`Nachricht verteilen: ${data}`) client.send(`${data}`) }) }) ws.onerror = function () { console.log('websocket error') } })
```

Und damit ist der Serverteil abgeschlossen. Jedes Mal, wenn eine Nachricht auf einem Socket empfangen wird, leitet er die Nachricht an jeden verbundenen Client weiter, was die Grundlage jeder Gruppen-Chat-App ist.

Der vollständige index.js-Code sieht wie folgt aus:

```js
const express = require('express') const webserver = express() .use((req, res) => res.sendFile('/websocket-client.html', { root: __dirname }) ) .listen(3000, () => console.log(`Listening on ${3000}`)) const { WebSocketServer } = require('ws') const sockserver = new WebSocketServer({ port: 443 }) sockserver.on('connection', ws => { console.log('Neuer Client verbunden!') ws.send('Verbindung aufgebaut') ws.on('close', () => console.log('Client hat die Verbindung getrennt!')) ws.on('message', data => { sockserver.clients.forEach(client => { console.log(`Nachricht verteilen: ${data}`) client.send(`${data}`) }) }) ws.onerror = function () { console.log('websocket error') } })
```

Und Sie können es wie folgt von der Befehlszeile aus ausführen:

```js
node index.js
```

Nachrichten können entweder als Text oder JSON kodiert sein (JSON.stringify). Dieser Code verwendet standardmäßig den Zeichensatz utf-8.

### WebSockets-Codebeispiel (Client/Browser)

Wir müssen keine zusätzliche Software oder Pakete installieren, um WebSockets mit modernen Webbrowsern zu verwenden. Erstellen Sie einen hörenden WebSocket, indem Sie eine korrekt formatierte URI bereitstellen:

```js
const webSocket = new WebSocket('ws://localhost:443/');
```

Und definieren Sie einen Event-Handler für den Empfang einer Nachricht vom Server:

```js
webSocket.onmessage = (event) => { console.log(event) document.getElementById('messages').innerHTML += 'Nachricht vom Server: ' + event.data + "<br>"; };
```

Das war's. Wir können jetzt Daten vom WebSocket-Server empfangen.

Um ein Nachrichtenereignis vom Client zu senden, verwenden Sie send() auf dem Socket-Objekt:

```js
webSocket.send('hello')
```

Um unsere Chat-App funktionsfähig zu machen, müssen wir nur noch ein Eingabefeld und eine Schaltfläche "Nachricht senden" hinzufügen, so dass Ihr Frontend-HTML-Code etwa so aussehen sollte (Styling und CSS der Kürze halber weggelassen):

```js
<html> <head> </head> <body> <form id="input-form"> <label for="message">Enter Message:</label> <input type="text" id="message" name="message"><br><br> <input type="submit" value="Send"> </form> <div id="messages"></div> <script> const webSocket = new WebSocket('ws://localhost:443/'); webSocket.onmessage = (event) => { console.log(event) document.getElementById('messages').innerHTML += 'Nachricht vom Server: ' + event.data + "<br>"; }; webSocket.addEventListener("open", () => { console.log("Wir sind verbunden"); }); function sendMessage(event) { var inputMessage = document.getElementById('message') webSocket.send(inputMessage.value) inputMessage.value = "" event.preventDefault(); } document.getElementById('input-form').addEventListener('submit', sendMessage); </script> </body> </html>
```

Geben Sie Ihrer HTML-Seite den Namen "websocket-client.html" und öffnen Sie einige Tabs in Ihrem Browser, indem Sie zu [http://localhost:3000.](http://localhost:3000/)Sie sollten in jeder Registerkarte empfangene Nachrichten sehen:

![](https://images.ctfassets.net/3prze68gbwl1/6fmgnp5AhVVAvBOt3jxdmQ/330a9faef0f816db63f34f6cf49ab0a6/node.js-websockets.png)

Die gleiche Chat-App ohne Node.js-Server erstellen
--------------------------------------------------

Wenn Sie keinen Server haben oder Bedenken bezüglich der Skalierung Ihrer Serverinfrastruktur haben, um den zukünftigen Anforderungen Ihrer Anwendung gerecht zu werden, sollten Sie sich für eine gehostete Echtzeitkommunikationslösung wie Socket.io oder [PubNub](https://www.pubnub.com/).

PubNub ist eine global verteilte und skalierbare Cloud-Plattform, so dass Sie sich nicht um die Bereitstellung und Wartung von Servern in Ihrem Backend kümmern müssen. [PubNub SDKs](https://www.pubnub.com/docs/sdks) können Benutzer identifizieren und Nachrichten an bestimmte Kanäle senden, die nur von abonnierten Benutzern empfangen werden können.

Wie könnte also die oben vorgestellte einfache Chat-App mit PubNub geschrieben werden? Ein Vorteil von PubNub ist, dass es [Protokoll-unabhängig](https://support.pubnub.com/hc/en-us/articles/360051496552-Does-PubNub-use-WebSockets-or-some-other-protocol-)PubNub verwendet die 'publish'- und 'subscribe'-Architektur (pub/sub), um bidirektionale Nachrichten zu senden und zu empfangen.

### JavaScript SDK Code-Beispiel

Fügen Sie zunächst das PubNub JavaScript SDK in den Header ein, das über das CDN von PubNub verfügbar ist:

```js
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script>
```

Um eingehende Nachrichten zu abonnieren, erstellen Sie eine PubNub-Instanz, definieren Sie den Kanal und fügen Sie einen Listener hinzu:

```js
var pubnub = new PubNub({ publishKey: 'demo', subscribeKey: 'demo', userId: "" + Math.random() }) pubnub.subscribe({ channels: ['ws-channel'] }) pubnub.addListener({ message: payload => { console.log() document.getElementById('messages').innerHTML += 'Nachricht vom Client: ' + payload.message + "<br>"; } })
```

Die Seite wird immer dann aktualisiert, wenn Nachrichten auf dem 'ws-channel' empfangen werden. Der obige Code verwendet 'Demo'-Schlüssel, aber Sie können Ihre eigenen [PubNub-Schlüssel](https://admin.pubnub.com/#/register) kostenlos erhalten.

Um Nachrichten über PubNub zu versenden, veröffentlichen Sie auf demselben Kanal, den Sie zuvor abonniert haben, in diesem Fall

```js
pubnub.publish({ channel: 'ws-channel', message: inputMessage.value })
```

Das Kanalmodell ist sehr flexibel und erweiterbar, aber für dieses einfache Beispiel reicht es aus, Nachrichten auf demselben Kanal zu senden und zu empfangen. Ihre Nachricht wird in weniger als 100 ms überall auf der Welt zugestellt.

Da bei einer PubNub-Bereitstellung keine Serverkomponente erforderlich ist, ist die gesamte Anwendung, die in HTML und JS geschrieben ist, in einer einzigen Datei enthalten:

```js
<html> <head> <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script> </head> <body> <H1>Dieser Code verwendet PubNub, das protokollunabhängig ist</H1> <form id="input-form"> <label for="message">Enter Message:</label> <input type="text" id="message" name="message"><br><br> <input type="submit" value="Send"> </form> <div id="messages"></div> <script> var pubnub = new PubNub({ publishKey: 'demo', subscribeKey: 'demo', userId: "" + Math.random() }) pubnub.subscribe({ channels: ['ws-channel'] }) pubnub.addListener({ message: payload => { console.log() document.getElementById('messages').innerHTML += 'Nachricht vom Client: ' + payload.message + "<br>"; } }) function sendMessage(event) { var inputMessage = document.getElementById('message') pubnub.publish({ channel: 'ws-channel', message: inputMessage.value }) inputMessage.value = "" event.preventDefault(); } document.getElementById('input-form').addEventListener('submit', sendMessage); </script> </body> </html>
```

Eine Live-Version dieses Codes finden Sie unter

[https://pubnubdevelopers.github.io/nodejs-websocket-examples/pubnub-client.html](https://pubnubdevelopers.github.io/nodejs-websocket-examples/pubnub-client.html)

![](https://images.ctfassets.net/3prze68gbwl1/75i6TIsSzEevRV2gsusTd1/2e8d9e8e9acba51f103a18a9a6bb27af/pubnub.png)

Und das war's dann auch schon! Weitere Informationen zur Entwicklung mit PubNub finden Sie in einer Reihe von [Tutorials](https://www.pubnub.com/tutorials/) und [Demos](https://www.pubnub.com/demos/)Oder schauen Sie sich die [PubNub interaktive Live-Tour](https://www.pubnub.com/tour/introduction/) um zu verstehen, wie die Plattform Echtzeit-Interaktivität für Anwendungen bietet.

Wie kann PubNub Ihnen helfen?
=============================

Dieser Artikel wurde ursprünglich auf [PubNub.com](https://pubnub.com/blog/nodejs-websocket-programming-examples/) veröffentlicht

Unsere Plattform unterstützt Entwickler bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben
--------------

Sehen Sie sich die [Live Tour](https://www.pubnub.com/tour/introduction/) an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten
----------

Melden Sie sich für einen [PubNub-Account](https://admin.pubnub.com/signup/) an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie
------------

Mit den [PubNub-Dokumenten](https://www.pubnub.com/docs) können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder [SDK](https://www.pubnub.com/docs)