WebSockets & Realtime Systems Programming · Lektion

Daten senden und empfangen

Implementieren Sie Methoden zum Senden von Nachrichten an den Server und zur Verarbeitung eingehender Daten vom Server.

Lektion 2 von 411 Schritte

Daten senden und empfangen ist eine kostenlose WebSockets & Realtime Systems Programming-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 WebSockets & Realtime Systems Programming-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Client Data Exchange Intro

Welcome back! In the previous lessons, we learned about establishing WebSocket connections. Now, let's dive into the core of realtime communication: sending and receiving data.

This lesson will show you how to implement methods for clients to send messages to a WebSocket server and how to handle incoming data from that server.

Sending Data with `send()`

To send data from your client to the WebSocket server, you'll use the WebSocket.send() method. It's quite straightforward!

You can send various data types: plain text (strings), binary data (like Blob or ArrayBuffer).
The server will receive this data and can then process it or even broadcast it to other connected clients.

Basic `send()` Example

Here's a simple JavaScript example demonstrating how to send a text message once the WebSocket connection is open. Remember, ws://localhost:8080 is a common address for a local test server.

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to server');
  ws.send('Hello from the client!');
};

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

// This example only sends; we'll cover receiving next.

Data Types for `send()`

While sending simple strings is common, WebSockets also support binary data. This is crucial for applications needing to transfer images, audio, or other non-textual information efficiently.

String: Most common for text messages, JSON.
ArrayBuffer: Raw binary data buffer.
Blob: File-like object representing raw data.

The send() method automatically handles the framing for these types.

Receiving Data: `onmessage`

Receiving data from the server is just as important. The WebSocket API provides an event handler called onmessage for this purpose.

When the server sends a message, your client's onmessage function will be triggered. It receives a MessageEvent object, which contains the actual data.

Processing Received Data

Inside the onmessage handler, you access the message content through event.data. The type of event.data depends on what the server sent:

If the server sent text, event.data will be a string.
If the server sent binary data, event.data will be an ArrayBuffer or a Blob, depending on the WebSocket's binaryType property (default is 'blob').

Basic `onmessage` Example

Let's combine sending and receiving! This client code connects, sends a message, and then listens for any incoming messages, logging them to the console. You'd need a server sending messages back for this to fully demonstrate.

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to server');
  ws.send('Requesting data...');
};

ws.onmessage = (event) => {
  console.log('Received from server:', event.data);
  // event.data could be string, Blob, or ArrayBuffer
};

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

ws.onclose = () => {
  console.log('Disconnected');
};

Structured Data with JSON

For most modern web applications, sending and receiving structured data is crucial. JSON (JavaScript Object Notation) is the de-facto standard for this.

Sending JSON: Use JSON.stringify() to convert your JavaScript object into a JSON string before calling ws.send().
Receiving JSON: Use JSON.parse() to convert the incoming JSON string (event.data) back into a JavaScript object.

JSON Communication Example

This example shows how a client can send a structured JSON object to the server and process a JSON response. This pattern is very common for building interactive applications.

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to server');
  const message = { type: 'greeting', payload: 'Hello Server!' };
  ws.send(JSON.stringify(message));
};

ws.onmessage = (event) => {
  console.log('Raw message:', event.data);
  try {
    const data = JSON.parse(event.data);
    console.log('Parsed JSON:', data);
    if (data.type === 'response') {
      console.log('Server replied:', data.payload);
    }
  } catch (e) {
    console.error('Failed to parse JSON:', e);
  }
};

ws.onerror = (error) => {
  console.error('WS Error:', error);
};

Client Data Handling Quiz

Consider the following client-side WebSocket code snippet:

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  ws.send(JSON.stringify({ action: 'subscribe', topic: 'news' }));
};

ws.onmessage = (event) => {
  let msg = event.data;
  if (typeof msg === 'string') {
    msg = JSON.parse(msg);
  }
  console.log(msg.action);
};

If the server sends the string '{"action":"update","data":"new article"}', what will be logged to the console?

Beantworte es in der interaktiven Lektion

Recap: Send & Receive Data

Great job! You've learned the fundamental methods for exchanging data over WebSockets from the client side.

Use ws.send() to send text (strings) or binary data (Blob, ArrayBuffer) to the server.
Listen for incoming messages using the ws.onmessage event handler.
Access the message content via event.data, which can be a string, Blob, or ArrayBuffer.
For structured communication, always use JSON.stringify() before sending and JSON.parse() after receiving JSON strings.

Next, we'll explore how to handle other crucial client-side events like connection errors and closures!

Kostenlos starten

Lerne WebSockets & Realtime Systems Programming 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: 12
Lektionen: 47

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Daten senden und empfangen“ kostenlos?

Ja — der vollständige Text von „Daten 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 WebSockets & Realtime Systems Programming-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der WebSockets & Realtime Systems Programming-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Daten senden und empfangen“?

Implementieren Sie Methoden zum Senden von Nachrichten an den Server und zur Verarbeitung eingehender Daten vom Server. Du übst WebSockets & Realtime Systems Programming 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 WebSockets & Realtime Systems Programming zu starten?

Keine Vorkenntnisse erforderlich. WebSockets & Realtime Systems Programming 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 „Daten 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 WebSockets & Realtime Systems Programming-Lektion Code schreiben und ausführen?

Ja. Jede WebSockets & Realtime Systems Programming-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

Grundlagen der WebSocket-API im Browser
Daten senden und empfangen
Clientseitige Ereignisverarbeitung
Automatische Wiederverbindung beim Client

← Zurück zu WebSockets & Realtime Systems Programming