6.1 Grundlegende Konzepte von WebSocket
WebSocket ist ein Kommunikationsprotokoll, das einen voll-duplex Kommunikationskanal über eine einzige TCP-Verbindung bereitstellt. Es ermöglicht eine zweiseitige Datenübertragung zwischen Client und Server, was es ideal für Anwendungen macht, die einen ständigen Echtzeitaustausch von Daten benötigen, wie Chats, Online-Spiele und Benachrichtigungssysteme.
Vorteile von WebSocket
- Zweiseitige Kommunikation: WebSocket ermöglicht eine zweiseitige Datenübertragung, die es dem Server und dem Client erlaubt, sich jederzeit Nachrichten zu senden.
- Geringere Latenz: Im Vergleich zu traditionellen HTTP-Anfragen reduziert WebSocket die Latenz dank der dauerhaften Verbindung.
- Geringere Serverbelastung: WebSocket reduziert die Anzahl der HTTP-Anfragen, was die Belastung auf den Server verringert.
Hauptkomponenten von WebSocket
- WebSocket-Server: Der serverseitige Teil, der WebSocket-Verbindungen akzeptiert und verarbeitet.
- WebSocket-Client: Der clientseitige Teil, der eine Verbindung zum WebSocket-Server herstellt und Daten austauscht.
6.2 Arbeiten mit WebSocket in JavaScript
Mit WebSocket in JavaScript zu arbeiten, wird durch das WebSocket-Objekt ermöglicht, das Methoden zum Herstellen von Verbindungen, Senden und Empfangen von Nachrichten sowie zur Ereignisbehandlung bereitstellt.
Erstellen einer WebSocket-Verbindung:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
WebSocket-Ereignisse:
open: wird ausgelöst, wenn die Verbindung hergestellt wurde.message: wird ausgelöst, wenn eine Nachricht vom Server empfangen wird.error: wird ausgelöst, wenn ein Fehler auftritt.close: wird ausgelöst, wenn die Verbindung geschlossen wird.
Beispiel für die Verwendung von WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Verbunden mit dem WebSocket-Server');
socket.send('Hallo Server!');
});
socket.addEventListener('message', (event) => {
console.log('Nachricht vom Server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket-Fehler:', event);
});
socket.addEventListener('close', (event) => {
console.log('Die Verbindung zum WebSocket-Server wurde getrennt');
});
6.3 Beispiel eines WebSocket-Servers in Node.js
Um einen WebSocket-Server zu erstellen, kann man die Bibliothek ws in Node.js verwenden.
Installation der Bibliothek:
Terminal
npm install ws
Beispiel eines WebSocket-Servers:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Neuer Client verbunden');
ws.on('message', (message) => {
console.log('Empfangen:', message);
ws.send(`Server sagt: ${message}`);
});
ws.on('close', () => {
console.log('Client getrennt');
});
});
console.log('WebSocket-Server läuft auf ws://localhost:8080');
6.4 Hauptereignisse und -methoden von WebSocket
Client-Ereignisse:
onopen: wird ausgelöst, wenn die WebSocket-Verbindung hergestellt istonmessage: wird ausgelöst, wenn eine Nachricht vom Server empfangen wirdonclose: wird ausgelöst, wenn die WebSocket-Verbindung geschlossen istonerror: wird ausgelöst, wenn ein WebSocket-Fehler auftritt
Client-Methoden
send(data): sendet Daten an den Serverclose(code, reason): schließt die WebSocket-Verbindung mit dem angegebenen Code und Grund
Server-Ereignisse
connection: wird ausgelöst, wenn sich ein Client mit dem Server verbindetmessage: wird ausgelöst, wenn der Server eine Nachricht vom Client erhältclose: wird ausgelöst, wenn die WebSocket-Verbindung geschlossen isterror: wird ausgelöst, wenn ein WebSocket-Fehler auftritt
Server-Methoden
send(data): sendet Daten an den Clientclose(code, reason): schließt die WebSocket-Verbindung mit dem angegebenen Code und Grund
6.5 Beispiele für die Verwendung von WebSocket
Beispiel: Echtzeit-Chat
Client-Seite:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Nachricht eingeben" />
<button onclick="sendMessage()">Senden</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket ist jetzt offen.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket ist jetzt geschlossen.');
};
socket.onerror = function(event) {
console.error('WebSocket-Fehler beobachtet:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Server-Seite:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('Neuer Client verbunden!');
ws.on('message', (message) => {
console.log('Empfangen:', message);
// Die Nachricht an alle verbundenen Clients senden
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client getrennt');
});
ws.on('error', (error) => {
console.error('WebSocket-Fehler:', error);
});
});
console.log('WebSocket-Server läuft auf ws://localhost:8080');
GO TO FULL VERSION