Vue Academy · Lezione

Client Socket.io con Vue

socket.io-client, io(url), socket.on/emit, stato reattivo Vue derivato dagli eventi socket.

Client Socket.io con Vue è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché Socket.IO?

I WebSocket grezzi operano a basso livello. Socket.IO è una libreria diffusa che aggiunge riconnessione automatica, trasporti alternativi, stanze e una semplice API basata sugli eventi.

Dispone di pacchetti corrispondenti per server e client; qui ci concentreremo sul client del browser usato all'interno di Vue.

Installare il client

Aggiunga il pacchetto client al progetto Vue. È separato dal pacchetto server.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

Connettersi con io()

Chiami io(url) per creare un socket e connettersi. A differenza dei WebSocket grezzi, deve fornire un URL http(s)://: Socket.IO negozia il trasporto al posto Suo.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

Ascoltare con socket.on

Socket.IO si basa su eventi denominati. Usi socket.on(name, handler) per reagire a un evento del server. Il gestore riceve il payload emesso dal server, qualunque sia il suo contenuto.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

Eventi del ciclo di vita integrati

Socket.IO emette eventi propri del ciclo di vita a cui può collegarsi: connect, disconnect e connect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

Inviare con socket.emit

Per inviare dati, chiami socket.emit(name, payload). È Lei a scegliere il nome dell'evento; il server ascolta lo stesso nome. Non è necessaria alcuna codifica JSON manuale: Socket.IO serializza i dati automaticamente.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

Un array reattivo di messaggi

In Vue, conservi i messaggi in arrivo in un array ref reattivo. Il gestore socket.on vi aggiunge i messaggi e il template viene nuovamente renderizzato automaticamente.

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

Integrare tutto in script setup

Un componente tipico si connette in onMounted, registra i listener ed espone una funzione di invio al template.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

Rimuovere i listener

I listener registrati con socket.on rimangono attivi. Se il componente viene montato di nuovo, può accumulare gestori duplicati. Li rimuova con socket.off durante la fase di smontaggio.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

Disconnettersi in onUnmounted

Quando il componente viene eliminato, chiuda la connessione con socket.disconnect() per evitare di lasciare un socket aperto durante la navigazione.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

Acknowledgement

Una funzione utile di Socket.IO: passi una callback come ultimo argomento di emit e il server potrà chiamarla per confermare la ricezione. È ideale per un'esperienza utente con conferma di "messaggio consegnato".

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

Verifica rapida

Verifichi la Sua comprensione dell'API client di Socket.IO.

Riepilogo

In questa lezione ha imparato che:

io(url) di socket.io-client si connette usando un URL http(s).
socket.on(name, handler) reagisce agli eventi denominati del server.
socket.emit(name, payload) invia eventi; i payload vengono serializzati automaticamente.
Inserisca i dati in arrivo in un array ref reattivo per il template.
Esegua la pulizia con socket.off e socket.disconnect() in onUnmounted.

Domande Frequenti

La lezione «Client Socket.io con Vue» è gratuita?

Sì — il testo completo di «Client Socket.io con Vue» è 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 «Client Socket.io con Vue»?

socket.io-client, io(url), socket.on/emit, stato reattivo Vue derivato dagli eventi socket. 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 2 di 4.

Quanto tempo richiede la lezione «Client Socket.io con Vue»?

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