PubNub Developer RelationsWenn 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 ist ein Computer-Kommunikationsprotokoll, das Duplex Kommunikationskanäle über eine einzige TCP-Verbindung. 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:
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 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.
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, 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
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) 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 und 'wsPakete, die unseren Webserver bzw. WebSocket-Server bereitstellen werden.
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:
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:
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).
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:
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:
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:
const webSocket = new WebSocket('ws://localhost:443/');
Und definieren Sie einen Event-Handler für den Empfang einer Nachricht vom Server:
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:
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):
<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.Sie sollten in jeder Registerkarte empfangene Nachrichten sehen:
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.
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 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ängigPubNub 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:
<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:
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 kostenlos erhalten.
Um Nachrichten über PubNub zu versenden, veröffentlichen Sie auf demselben Kanal, den Sie zuvor abonniert haben, in diesem Fall
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:
<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
Und das war's dann auch schon! Weitere Informationen zur Entwicklung mit PubNub finden Sie in einer Reihe von Tutorials und DemosOder schauen Sie sich die PubNub interaktive Live-Tour 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 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 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 an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln
Beginnen Sie
Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK
