Nachrichten senden und empfangen
Tauschen Sie Daten mit send und onmessage aus.
Nachrichten senden und empfangen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Text senden
Sobald die Verbindung geöffnet ist, überträgt socket.send(string) eine Textnachricht an den Server.
socket.onopen = () => {
socket.send("ping");
};Mit onmessage empfangen
onmessage wird für jeden eingehenden Frame ausgelöst. Die Daten befinden sich in event.data.
socket.onmessage = (event) => {
console.log("Received:", event.data);
};JSON-Formatierung
WebSockets übertragen rohe Zeichenfolgen. Um strukturierte Daten zu senden, serialisieren Sie sie mit JSON.stringify und analysieren Sie sie beim Empfang.
socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
console.log(msg.type, msg.text);
};Nachrichten nach Typ weiterleiten
Ein häufig verwendetes Muster: Fügen Sie ein Feld type ein und leiten Sie die Nachricht anhand dieses Felds weiter.
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
switch (msg.type) {
case "chat": showChat(msg); break;
case "presence": updatePresence(msg); break;
}
};Binärdaten senden
send akzeptiert auch ArrayBuffer, typisierte Arrays und Blob für binäre Nutzdaten.
const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);Binärdaten empfangen
Mit binaryType = "arraybuffer" ist event.data ein ArrayBuffer, den Sie in ein typisiertes Array einschließen können.
socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
if (e.data instanceof ArrayBuffer) {
const view = new Uint8Array(e.data);
console.log(view.length);
}
};Backpressure mit bufferedAmount
bufferedAmount gibt die Anzahl der Bytes an, die in der Warteschlange stehen, aber noch nicht gesendet wurden. Prüfen Sie diesen Wert, bevor Sie den Socket mit Nachrichten überfluten, um ein unbeschränktes Speicherwachstum zu vermeiden.
if (socket.bufferedAmount < 1_000_000) {
socket.send(payload);
}Heartbeats
Senden Sie regelmäßig Ping-Nachrichten, damit beide Seiten wissen, dass die Verbindung aktiv ist, und Vermittler inaktive Verbindungen nicht schließen.
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: "ping" }));
}
}, 30000);Anfrage-Antwort-Kommunikation über WebSocket
Versehen Sie ausgehende Nachrichten mit einer ID und erfüllen Sie ein ausstehendes Promise, sobald die passende Antwort eintrifft.
const pending = new Map();
function request(payload) {
const id = crypto.randomUUID();
socket.send(JSON.stringify({ id, ...payload }));
return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};Vor dem Öffnen in die Warteschlange stellen
Wenn Sie möglicherweise vor dem Öffnen des Sockets senden, puffern Sie die Nachrichten und leeren Sie den Puffer in onopen.
const queue = [];
function safeSend(data) {
if (socket.readyState === WebSocket.OPEN) socket.send(data);
else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };Eingehende Daten validieren
Vertrauen Sie niemals den empfangenen Daten. Schließen Sie JSON.parse in try/catch ein und validieren Sie die Struktur vor der Verwendung.
socket.onmessage = (e) => {
let msg;
try { msg = JSON.parse(e.data); }
catch { return; }
if (typeof msg.type !== "string") return;
handle(msg);
};Kurztest
Testen Sie das Senden und Empfangen von Nachrichten.
Rückblick: Senden und Empfangen
Sie haben Text und Binärdaten gesendet, onmessage verarbeitet, Daten als JSON formatiert, Nachrichten nach Typ weitergeleitet, mit bufferedAmount den Rückstau überwacht, Heartbeats hinzugefügt und Nachrichten vor dem Öffnen des Sockets in die Warteschlange gestellt. Als Nächstes: der Lebenszyklus der Verbindung.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 59
- Lektionen
- 200
Häufig gestellte Fragen
Ist die Lektion „Nachrichten senden und empfangen“ kostenlos?
Ja — der vollständige Text von „Nachrichten senden und empfangen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Nachrichten senden und empfangen“?
Tauschen Sie Daten mit send und onmessage aus. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Nachrichten senden und empfangen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Eine WebSocket-Verbindung öffnen
- Nachrichten senden und empfangen
- Verbindungslebenszyklus und Fehler
- Strategien zur Wiederverbindung