Fondamenti dei WebSocket nel browser
Apra connessioni WebSocket, invii messaggi e gestisca eventi con l'API WebSocket nativa.
Fondamenti dei WebSocket nel browser è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cos’è WebSocket
WebSocket è un protocollo che fornisce una comunicazione full-duplex su un’unica connessione TCP. A differenza di HTTP, la connessione rimane aperta e consente al server di inviare dati al client in qualsiasi momento.
Apertura di una connessione
Crei un oggetto WebSocket con un URL ws:// o wss://. La connessione viene aperta in modo asincrono.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Invio dei messaggi
Utilizzi ws.send() per inviare dati. Può inviare stringhe o dati binari (ArrayBuffer, Blob). Codifichi gli oggetti in JSON prima di inviarli.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Ricezione dei messaggi
L’evento onmessage viene attivato ogni volta che il server invia dati. I dati si trovano in event.data sotto forma di stringa o di tipo binario.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Gestione degli errori e chiusura
Gestisca gli eventi onerror e onclose. L’evento di chiusura include un codice e una motivazione che spiegano perché la connessione è terminata.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Codici di chiusura
Codici di chiusura WebSocket standard: 1000 = normale, 1001 = chiusura in corso perché l’endpoint sta per essere abbandonato, 1006 = anomala (nessun frame di chiusura), 1008 = violazione dei criteri.
readyState
ws.readyState indica lo stato attuale della connessione: CONNECTING (0), OPEN (1), CLOSING (2) o CLOSED (3). Verifichi sempre questo valore prima di inviare dati.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Chiusura della connessione
Chiami ws.close(code, reason) per avviare una chiusura corretta. Il server riceve il frame di chiusura e può rispondere con il proprio.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Dati binari
Imposti ws.binaryType = 'arraybuffer' (oppure 'blob') per ricevere messaggi binari. È utile per audio, immagini o protocolli personalizzati.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Heartbeat / ping-pong
Le API WebSocket del browser non espongono i frame ping, ma può implementare un heartbeat a livello applicativo: invii un messaggio ping ogni N secondi e attenda una risposta pong.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket e Server-Sent Events
Utilizzi WebSocket per la comunicazione bidirezionale (chat, giochi). Utilizzi Server-Sent Events (SSE) per gli stream unidirezionali dal server al client (notifiche, feed in tempo reale): SSE funziona su HTTP semplice e si riconnette automaticamente.
Verifica rapida
Quale valore di readyState di WebSocket indica che la connessione è aperta e pronta per l’invio?
Riepilogo
Crei le connessioni con new WebSocket(url), invii oggetti convertiti in stringhe JSON tramite ws.send() e gestisca gli eventi onmessage, onerror e onclose. Verifichi readyState prima dell’invio e chiuda correttamente con ws.close(1000).
Domande Frequenti
La lezione «Fondamenti dei WebSocket nel browser» è gratuita?
Sì — il testo completo di «Fondamenti dei WebSocket nel browser» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Fondamenti dei WebSocket nel browser»?
Apra connessioni WebSocket, invii messaggi e gestisca eventi con l'API WebSocket nativa. Eserciti React 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 React Academy?
Non è richiesta alcuna esperienza precedente. React 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 1 di 4.
Quanto tempo richiede la lezione «Fondamenti dei WebSocket nel browser»?
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 React Academy?
Sì. Ogni lezione React 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
- Fondamenti dei WebSocket nel browser
- Utilizzo di Socket.IO con React
- Creazione di un componente chat in tempo reale
- Riconnessione, gestione degli errori e pulizia