WebSockets Echtzeit Kommunikation
WebSockets: Echtzeit-Kommunikation
WebSockets ermöglichen bidirektionale Echtzeit-Kommunikation zwischen Client und Server. Ideal für Chats, Live-Notifications, Gaming und Collaboration-Tools.
WebSockets vs. HTTP
| HTTP | WebSocket |
|---|---|
| Request-Response | Bidirektional |
| Verbindung wird geschlossen | Verbindung bleibt offen |
| Client initiiert | Beide können senden |
| Polling nötig | Echtzeit |
Node.js Server (Socket.io)
// npm install express socket.io
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// Verbindung
io.on('connection', (socket) => {
console.log('User connected:', socket.id);
// Nachricht empfangen
socket.on('chat message', (msg) => {
console.log('Message:', msg);
// An alle senden
io.emit('chat message', msg);
});
// Nur an Sender
socket.on('private', (data) => {
socket.emit('response', 'Nur für dich');
});
// An alle außer Sender
socket.on('broadcast', (data) => {
socket.broadcast.emit('news', data);
});
// Disconnect
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server läuft auf Port 3000');
});Client (Browser)
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<input id="input" />
<button onclick="send()">Senden</button>
<script>
const socket = io();
// Nachricht empfangen
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
// Nachricht senden
function send() {
const input = document.getElementById('input');
socket.emit('chat message', input.value);
input.value = '';
}
// Verbindungsstatus
socket.on('connect', () => console.log('Connected'));
socket.on('disconnect', () => console.log('Disconnected'));
</script>
</body>
</html>Räume (Rooms)
// Server
io.on('connection', (socket) => {
// Raum beitreten
socket.on('join room', (room) => {
socket.join(room);
io.to(room).emit('user joined', socket.id);
});
// Nachricht an Raum
socket.on('room message', ({ room, msg }) => {
io.to(room).emit('message', msg);
});
// Raum verlassen
socket.on('leave room', (room) => {
socket.leave(room);
});
});Native WebSocket (ohne Socket.io)
// Server (ws library)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
// An alle Clients senden
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
// Client
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => ws.send('Hello Server');
ws.onmessage = (event) => console.log(event.data);
ws.onclose = () => console.log('Disconnected');Anwendungsfälle
- 💬 Chat-Anwendungen
- 🔔 Live-Notifications
- 📊 Echtzeit-Dashboards
- 🎮 Online-Games
- 📝 Collaborative Editing
- 📈 Live-Kurse (Börse)
Weitere Hilfe
- 📖 Socket.io Dokumentation
- 📧 E-Mail: support@enjyn.de