Vue Academy · Lezione

Nozioni di base sui WebSocket nel browser

new WebSocket(url), onopen/onmessage/onerror/onclose, send(), readyState.

Nozioni di base sui WebSocket nel browser è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Tempo reale nel browser

HTTP funziona secondo il modello richiesta/risposta: il client invia una richiesta, il server risponde e la connessione si chiude. Per chat, dashboard aggiornate in tempo reale o giochi multiplayer, è necessario che il server possa inviare dati senza che gli vengano richiesti.

Il protocollo WebSocket offre un'unica connessione bidirezionale e di lunga durata tra browser e server.

Aprire una connessione

Il browser mette a disposizione il costruttore globale WebSocket. Passi un URL usando lo schema ws:// (non crittografato) o wss:// (TLS).

La creazione dell'oggetto avvia immediatamente l'handshake della connessione.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Il gestore onopen

La connessione non è pronta nell'istante in cui viene creato l'oggetto. L'evento onopen viene emesso al completamento dell'handshake, quando il socket è pronto a trasportare dati.

Invii il primo messaggio dall'interno di onopen, mai prima.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Ricevere i messaggi

I dati in arrivo vengono ricevuti tramite onmessage. Il contenuto si trova in event.data ed è una stringa per impostazione predefinita.

La maggior parte delle app invia JSON, quindi lo analizzi per riconvertirlo in un oggetto.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Inviare i messaggi

Usi ws.send() per trasmettere i dati. I WebSocket trasportano stringhe semplici o dati binari, quindi codifichi prima gli oggetti con JSON.stringify.

Entrambi i lati concordano una struttura: in questo caso, un type e un payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Un round trip completo

Unendo apertura, invio e ricezione si ottiene un client echo completo. Apra il socket, invii il messaggio all'apertura e registri ciò che torna indietro.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Chiudere la connessione

L'evento onclose viene emesso quando la connessione termina, sia che abbiate chiamato ws.close(), sia che la rete si sia interrotta. L'evento contiene un code numerico e una stringa reason.

Il codice 1000 indica una chiusura normale.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Gestire gli errori

L'evento onerror viene emesso in caso di errori del trasporto. Per motivi di sicurezza, l'evento di errore contiene intenzionalmente pochi dettagli; lo consideri un segnale che qualcosa è andato storto e che probabilmente la connessione verrà chiusa.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

La proprietà readyState

ws.readyState è un numero che indica la fase del ciclo di vita in cui si trova il socket. Lo verifichi sempre prima di inviare dati, per evitare errori quando il socket non è ancora aperto.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Costanti readyState denominate

Invece di usare numeri magici, utilizzi le costanti della classe WebSocket. Sono molto più chiare di 0, 1 o 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Integrare tutto in Vue

All'interno di un componente Vue, di solito si crea il socket in onMounted e lo si chiude in onUnmounted. I gestori aggiornano i ref reattivi visualizzati dal template.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Verifica rapida

Verifichi la Sua comprensione dei valori di readyState di WebSocket.

Riepilogo

In questa lezione ha imparato che:

new WebSocket(url) avvia una connessione bidirezionale usando ws:// o wss://.
onopen viene emesso quando il socket è pronto; invii dati solo dopo questo evento.
onmessage fornisce i dati in event.data: analizzi il JSON per ottenere un oggetto.
ws.send(JSON.stringify(msg)) trasmette i dati.
onclose e onerror gestiscono la chiusura e gli errori.
readyState vale 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

Domande Frequenti

La lezione «Nozioni di base sui WebSocket nel browser» è gratuita?

Sì — il testo completo di «Nozioni di base sui 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Nozioni di base sui WebSocket nel browser»?

new WebSocket(url), onopen/onmessage/onerror/onclose, send(), readyState. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 «Nozioni di base sui 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 Vue Academy?

Sì. Ogni lezione Vue 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

Nozioni di base sui WebSocket nel browser
Client Socket.io con Vue
Creazione di un componente chat in tempo reale
Composable useWebSocket con riconnessione

← Torna a Vue Academy