WebSockets & Realtime Systems Programming · Lezione

Inviare e ricevere dati

Implementi metodi per inviare messaggi al server e gestire i dati in arrivo dal server.

Lezione 2 di 411 passaggi

Inviare e ricevere dati è una lezione WebSockets & Realtime Systems Programming gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento WebSockets & Realtime Systems Programming, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso WebSockets & Realtime Systems Programming include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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?

Rispondi nella lezione interattiva

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!

Gratis per iniziare

Impara WebSockets & Realtime Systems Programming con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 12
Lezioni: 47

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Inviare e ricevere dati» è gratuita?

Sì — il testo completo di «Inviare e ricevere dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso WebSockets & Realtime Systems Programming, passa a CoddyKit PRO. Il corso WebSockets & Realtime Systems Programming include 4 lezioni in totale.

Cosa imparerò in «Inviare e ricevere dati»?

Implementi metodi per inviare messaggi al server e gestire i dati in arrivo dal server. Eserciti WebSockets & Realtime Systems Programming con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare WebSockets & Realtime Systems Programming?

Non è richiesta alcuna esperienza precedente. WebSockets & Realtime Systems Programming su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Inviare e ricevere dati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione WebSockets & Realtime Systems Programming?

Sì. Ogni lezione WebSockets & Realtime Systems Programming include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Fondamenti della WebSocket API del browser
Inviare e ricevere dati
Gestione degli eventi lato client
Riconnessione automatica sul client

← Torna a WebSockets & Realtime Systems Programming