Inviare e ricevere messaggi
Scambi dati con send e onmessage.
Inviare e ricevere messaggi è una lezione JavaScript Academy 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Inviare testo
Quando è aperto, socket.send(string) trasmette un messaggio di testo al server.
socket.onopen = () => {
socket.send("ping");
};Ricevere con onmessage
onmessage viene generato per ogni frame in arrivo. I dati si trovano in event.data.
socket.onmessage = (event) => {
console.log("Received:", event.data);
};Strutturare i messaggi con JSON
I WebSocket trasportano stringhe non elaborate. Per inviare dati strutturati, li serializzi con JSON.stringify e li analizzi quando vengono ricevuti.
socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
console.log(msg.type, msg.text);
};Smistamento in base al tipo di messaggio
Un modello comune consiste nell'includere un campo type e nello smistare i messaggi in base al suo valore.
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
switch (msg.type) {
case "chat": showChat(msg); break;
case "presence": updatePresence(msg); break;
}
};Inviare dati binari
send accetta anche ArrayBuffer, array tipizzati e Blob per i payload binari.
const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);Ricevere dati binari
Con binaryType = "arraybuffer", event.data è un ArrayBuffer che può racchiudere in un array tipizzato.
socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
if (e.data instanceof ArrayBuffer) {
const view = new Uint8Array(e.data);
console.log(view.length);
}
};Backpressure con bufferedAmount
bufferedAmount indica i byte accodati ma non ancora inviati. Lo controlli prima di inondare il socket, per evitare una crescita illimitata della memoria.
if (socket.bufferedAmount < 1_000_000) {
socket.send(payload);
}Heartbeat
Invii periodicamente messaggi ping, così entrambe le parti sanno che la connessione è attiva e i dispositivi intermedi non chiudono le connessioni inattive.
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: "ping" }));
}
}, 30000);Richieste e risposte su WebSocket
Assegni un ID ai messaggi in uscita e risolva una promise in attesa quando arriva la risposta corrispondente.
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); }
};Accodare prima dell'apertura
Se potrebbe inviare dati prima dell'apertura del socket, memorizzi i messaggi in un buffer e li invii 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; };Convalidare i dati in ingresso
Non si fidi mai dei dati trasmessi. Racchiuda JSON.parse in try/catch e convalidi la struttura prima di utilizzarla.
socket.onmessage = (e) => {
let msg;
try { msg = JSON.parse(e.data); }
catch { return; }
if (typeof msg.type !== "string") return;
handle(msg);
};Verifica rapida
Verifichi l'invio e la ricezione dei messaggi.
Riepilogo: invio e ricezione
Ha inviato dati di testo e binari, gestito onmessage, strutturato i dati come JSON, eseguito lo smistamento in base al tipo, monitorato bufferedAmount per gestire il backpressure, aggiunto heartbeat e accodato i messaggi prima dell'apertura del socket. Ora: il ciclo di vita della connessione.
Domande Frequenti
La lezione «Inviare e ricevere messaggi» è gratuita?
Sì — il testo completo di «Inviare e ricevere messaggi» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Inviare e ricevere messaggi»?
Scambi dati con send e onmessage. Eserciti JavaScript Academy 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy 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 messaggi»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript Academy 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
- Aprire una connessione WebSocket
- Inviare e ricevere messaggi
- Ciclo di vita ed errori della connessione
- Strategie di riconnessione