Node.js/Chat mit WebSockets

Aus SELFHTML-Wiki
< Node.js(Weitergeleitet von JavaScript/WebSocket)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer

30min

Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Webserver
mit Node.js


In diesem Tutorial erstellen Sie eine Echtzeit-Chat-Anwendung mit mehreren Teilnehmern, die Nachrichten an einen Empfänger sofort und ohne Seitenaktualisierung selbstständig sendet und anzeigt. Dabei wird die Webseite aktualisiert, ohne dass eine Anfrage vom Client an den Server stattfinden muss. Der Einfachheit halber werden wir den Authentifizierungsteil vermeiden.

Node.chat logo.svg

Wir verwenden dazu Node.js, WebSockets, das JavaScript-Framework Express.js und die Bibliotheken Mongoose und Socket.io.

Frontend[Bearbeiten]

Wir können damit beginnen, ein neues Projektverzeichnis zu erstellen und in dieses zu wechseln. Dann können wir unser Projekt mit dem folgenden Befehl initiieren:

HTML-Markup[Bearbeiten]

Der Chat läuft auf einer kleinen Webseite, auf der Benutzer ihren Namen eingeben können.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat mit WebSockets</title>
  </head>
  <body>
    <h1>Chat mit WebSockets</h1>
    <div id="content"></div>
    <aside>
      <span id="status">Verbindung wird gestartet …</span>
      <input id="input" disabled="disabled" />
    </aside>
    <script src="js/frontend.js"></script>
  </body>
</html>

Backend[Bearbeiten]

Der große Vorteil von WebSockets ist die Zwei-Wege-Kommunikation. Ein Benutzer sendet eine Nachricht (Client →Server), die der Server an alle angeschlossenen Benutzer weitergibt (Server → Client).

Für die Client → Server-Kommunikation reicht Plain text. Aber für Server → Client ist es ein bisschen komplexer. Wir müssen zwischen 3 verschiedenen Arten von Nachrichten unterscheiden:

  • Server ordnet dem Benutzer eine Farbe zu
  • Server sendet gesamten Nachrichtenverlauf
  • Server sendet eine Nachricht an alle Benutzer

Daher ist jede Nachricht ein einfaches JavaScript-Objekt, das in JSON kodiert ist.

WebSockets[Bearbeiten]

Die WebSocket API ermöglicht es, eine dauerhafte Verbindung zwischen Webanwendung und Server aufzubauen, bei der Sie Nachrichten zum Server senden und ereignisorientierte Antworten erhalten können, ohne beim Server die Antwort abfragen zu müssen. Gegenüber dem langsameren HTTP-Protokoll, das nach dem Senden einer Anfrage immer auf Antworten warten muss, werden auch keine Header-Felder benötigt, was ebenfalls die Datenübertragung beschleunigt.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

ToDo (weitere ToDos)

wird fortgesetzt


Weblinks[Bearbeiten]

WebSockets[Bearbeiten]