78 Dokumentationen verfügbar

Wissensdatenbank

Zurück zur Übersicht

WebSockets Echtzeit Kommunikation

Zuletzt aktualisiert: 11.01.2026 um 12:07 Uhr

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