Websockets ermöglichen eine bidirektionale Verbindung zwischen Client und Server. Die entsprechende API ist im Browser bereits vorhanden und kann über JavaScript angesprochen werden. Node enthält ebenfalls eine Websocket-Schnittstelle.
Der Server
Unter Node kann ein Websocket über das Modul ws angefordert werden.
const WebSocket = require('ws');
let zahl = 0;
const wss = new WebSocket.Server({port: 8080});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
setInterval( function() {
zahl = zahl + 1;
ws.send(""+zahl);
}, 1000); // alle Sekunde
});
ws.on('close', function() {
});
});
Der Websocket-Server wird durch eine Anmeldung vom Client angestoßen.
Im Beispiel wird daraufhin alle Sekunde eine neue Zahl an den Client
gesandt.
Websocket-Verbindung vom Client
Die HTML-Datei benötigt einen JavaScript-Teil, der den Websocket-Verkehr übernimmt.
<html>
<body>
<button id="mybut">Send button-click to Server</button>
<h1> Zahlen </h1>
<ul id="zahlen"></ul>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('onopen');
};
ws.onerror = function(error) {
console.error(error);
};
ws.onclose = function() {
console.log('onclose');
};
ws.onmessage = function(event) {
let newElement = document.createElement("li");
newElement.textContent = event.data;
let ul = document.querySelector("#zahlen")
ul.appendChild(newElement)
};
const btn = document.querySelector("#mybut");
btn.addEventListener("click", function(event) {
ws.send('Button geklickt');
});
</script>
</body>
</html>
Die Verbindung wird beim Laden der Webseite hergestellt.
Das Senden der Nachricht, die den Server veranlasst, Pakete zu senden,
erfolgt im EventListener des Buttons.
Sobald eine Nachricht vom Server eintrifft, wird onmessage aufgerufen, das die ul-Komponente um neue li-Elemente erweitert.