Will man Informationen möglichst in Echtzeit zwischen Client und Server austauschen, kann das Nachladen von Inhalten in Intervallen mittels Ajax manchmal unpraktisch sein. Socket.io ist eine Javascript-Bibliothek für Webanwendungen, die Echtzeitkommunikation zwischen Client und Server auf einfache Art und Weise ermöglicht. Sie besteht aus zwei Teilen: einer clientseitigen Bibliothek, die im Browser läuft, und einer serverseitigen Bibliothek für node.js. Beide Komponenten haben eine nahezu identische API. Ähnlich wie node.js ist die Bibliothek ereignisgesteuert und reagiert auf verschiedene Events.

Damit man Informationen als Client von einer Website bzw. einem Server aktualisieren kann, gibt es typischerweise drei unterschiedliche Vorgehensweisen:

• Vollständiges erneutes Laden aller Informationen
• Nachladen von Inhalten mit AJAX
• Regelmäßige Abfrage in Intervallen

Diese Methoden haben alle ihre Anwendungsgebiete, werden aber spätestens dann unpraktisch, wenn Informationen möglichst schnell, am besten in Echtzeit, zur Verfügung stehen müssen. Hier schafft WebSockets Abhilfe, welches ein auf TCP basierendes Netzwerkprotokoll ist und parallel zur HTTP-Abfrage des Clients eine weitere Verbindung zum Server herstellt. Socket.io verwendet in erster Linie das WebSockets-Protokoll mit Polling über HTTP als Fallback-Option, falls das genannte Kommunikationsprotokoll nicht unterstützt wird. Die Bibliothek kann einfach als Wrapper für WebSockets verwendet werden, bietet aber darüber hinaus auch viele weitere Funktionen im Vergleich zu WebSockets, einschließlich Broadcasting an mehrere Sockets, speichern von Daten, die mit jedem Client verbunden sind, und asynchrones I/O.

Wofür kann man socket.io verwenden?

Die verschiedenen Anwendungsmöglichkeiten für socket.io lassen sich prinzipiell in vier Bereiche untergliedern:

1. Benachrichtigungen – Wenn serverseitig ein Ereignis auftritt und der Client benachrichtigt werden muss, eignet sich der eventbasiertes Aufbau von socket.io besonders gut.
2. Kommunikation – Nachrichten lassen sich mit einer geringen Serverlast und einer schneller Durchlaufzeit versenden, da nur dann Informationen geladen werden, wenn dies erforderlich ist. Besonders hier ist die Broadcast-Option von socket.io praktisch.
3. Spiele – Ebenfalls bietet sich die Bibliothek für Echtzeit-Online-Spiele an, um beispielsweise Positionen von Spielfiguren zu synchronisieren.
4. Steuerung – Die Steuerung von Microcontrollen bzw. Sensoren ist auch eine gute Anwendungsmöglichkeit dieser JavaScript-Bibliothek.

Installation über npm

Die offizielle Implementierung der serverseitigen Bibliothek setzt auf node.js als Framework auf. Von der Community gibt es aber auch Implementierungen in Python, C++ oder Java. Um das Package von socket.io für seine Node-Projekt verwenden zu können, muss man ein neues Projekt anlegen und in diesem Verzeichnis in der Konsole einfach npm install socket.io eingeben, um die Installation zu starten.

How To

Um einen einfachen Überblick zu bekommen, wie genau die Client-Server-Kommunikation mit socket.io funktioniert, lässt sich am besten mit einem einfachen Beispiel illustrieren.

Serverseitiger Code – server.js

// Kleiner HTTP-Server auf Port 8080
var app = require('http').createServer(serveStaticIndex).listen(8080);
 
// Laden von Socket.io
//(Gibt für die Demo nur Fehler/Warnungen auf der Konsole aus)
var io = require('socket.io').listen(app).set('log level', 1);
 
// Zugriff auf das Dateisystem (zum Ausliefern der index.html)
var fs = require('fs');
 
// Liefert die Startseite aus
function serveStaticIndex(req, res) {
  var fileStream = fs.createReadStream(__dirname + '/index.html');
      res.writeHead(200);
      fileStream.pipe(res);
}
 
// Socket.io-Events
io.sockets.on('connection', function (socket) {
  console.log('[socket.io] Ein neuer Client (Browser) hat sich verbunden.\n');
 
  console.log('[socket.io] SENDE "welcome"-Event an den Client.\n');
  socket.emit('welcome', "Hello world");
 
  socket.on('user agent', function (data) {
    console.log('[socket.io] EMPFANGE "user agent"-Event vom Client:');
    console.log(data, '\n');
  });
});

Code für den Client – index.html

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Test</title>
 
  <!-- Dieses Script wird von Socket.io automatisch zu Verfügung gestellt -->
  <script src="/socket.io/socket.io.js"></script>
 
  <script>
    // Mit dem Socket.io-Server verbinden
    var socket = io.connect('http://localhost');
 
    // Warten auf Nachrichten
    socket.on('welcome', function (data) {
      console.log('[socket.io] "welcome"-Event vom Server empfangen:\n' + data);
 
      // Eigenen Event vom Client an den Server schicken
      socket.emit('user agent', navigator.userAgent);
    });
  </script>
</head>
 
<body>
</body>
 
</html>

Viel mehr Code wird nicht benötigt, um die Funktionsweise von WebSockets bzw. der socket.io-Bibliothek zu demonstrieren. Zum Ausprobieren muss lediglich der Server mit node server.js gestartet werden, was anschließend den Server auf Port 8000 startet. Ruft man dann in seinem Browser die URL http://localhost:8080/ auf, kann man in der Entwickler-Konsole bzw. dem Terminal von Node beobachten, wie die übermittelten Nachrichten zwischen Client und Server ausgegeben werden.

In a nutshell

Die JavaScript-Bibliothek socket.io bietet eine unglaublich einfache Option, in seinen Projekten eine Echtzeitkommunikation umzusetzen. Vor allem das eventbasierte System und die breite Browserunterstützung machen dieses Werkzeug für viele Anwendungsbeispiele relevant. Wer mehr über die Bibliothek lernen will, wirft am besten einen Blick in die Dokumentation.

https://socket.io/docs/v4/