Vue Academy · Lezione

Creazione di un componente chat in tempo reale

Elenco dei messaggi con v-for, binding dell'input, emit all'invio, scorrimento in fondo al ricevimento di un nuovo messaggio.

Creazione di un componente chat in tempo reale è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Obiettivo: una chat in tempo reale

Assembleremo un componente di chat piccolo ma completo: mostra un elenco scorrevole di messaggi, consente all'utente di scrivere e inviare messaggi e aggiunge quelli in arrivo in tempo reale.

In questo modo riuniremo stato reattivo, hook del ciclo di vita e accesso al DOM.

Il ref dei messaggi

Conservi la conversazione in un array reattivo. Ogni elemento è un semplice oggetto con un id, un autore e un testo.

import { ref } from "vue"

const messages = ref([
  { id: 1, user: "system", text: "Welcome to the room" },
])

Un ref per l'input

Colleghi la casella di testo a un ref separato con v-model. Questo ref contiene il messaggio in fase di composizione prima dell'invio.

// template:
// <input v-model="draft" @keyup.enter="sendMessage" />

const draft = ref("")

Registrare il listener del socket

In onMounted, si sottoscriva ai messaggi in arrivo e aggiunga ciascuno di essi all'array. L'uso di onMounted garantisce che il componente sia pronto prima di collegare i gestori.

import { onMounted } from "vue"

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

Inviare un messaggio

La funzione sendMessage emette la bozza verso il server e svuota l'input. Impedisca l'invio di stringhe vuote.

function sendMessage() {
  const text = draft.value.trim()
  if (!text) return
  socket.emit("send", { text })
  draft.value = ""
}

Visualizzare l'elenco

Il template scorre messages con v-for, usando l'id come chiave. Ogni riga mostra l'autore e il testo.

<!-- template -->
<div ref="chatBox" class="chat">
  <p v-for="m in messages" :key="m.id">
    <strong>{{ m.user }}:</strong> {{ m.text }}
  </p>
</div>

Il problema dello scorrimento

Quando arriva un nuovo messaggio, l'utente vuole che la visualizzazione rimanga ancorata in fondo. Tuttavia, se scorre subito dopo aver aggiunto il messaggio all'array, la nuova riga non è ancora nel DOM: Vue non ha ancora applicato l'aggiornamento.

Scorrete troppo presto e perdete l'ultima riga.

Un ref del template per il contenitore

Recuperi il contenitore dello scorrimento con un ref del template, così potrà leggerne e impostarne la posizione di scorrimento.

import { ref } from "vue"

const chatBox = ref(null)

// template: <div ref="chatBox"> ... </div>

Attesa del DOM con nextTick

nextTick restituisce una promise che si risolve dopo che Vue ha applicato gli aggiornamenti del DOM in attesa. La attenda prima di scorrere, così il nuovo messaggio sarà presente nel DOM.

import { nextTick } from "vue"

async function scrollToBottom() {
  await nextTick()
  const el = chatBox.value
  el.scrollTop = el.scrollHeight
}

Scorrere dopo ogni nuovo messaggio

Chiami scrollToBottom subito dopo aver aggiunto un messaggio, sia per quelli in arrivo sia per quelli in uscita. Impostare scrollTop = scrollHeight porta direttamente in fondo.

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

Flusso completo

Ora il componente riceve un messaggio, aggiorna lo stato reattivo, attende il DOM tramite nextTick e quindi scorre. L'invio segue lo stesso percorso. Pulito, prevedibile, in tempo reale.

async function sendMessage() {
  const text = draft.value.trim()
  if (!text) return
  socket.emit("send", { text })
  draft.value = ""
  await scrollToBottom()
}

Verifica rapida

Verifichi la comprensione dei tempi di aggiornamento del DOM nel componente di chat.

Riepilogo

In questa lezione ha costruito un componente di chat in tempo reale. Punti chiave:

Conservi i messaggi in un array ref reattivo e la bozza nel proprio ref.
Registri il listener del socket in onMounted e aggiunga i messaggi in arrivo.
sendMessage emette la bozza e cancella il contenuto dell'input.
Utilizzi un template ref e await nextTick() prima di impostare scrollTop = scrollHeight, così il messaggio più recente sarà visibile.

Domande Frequenti

La lezione «Creazione di un componente chat in tempo reale» è gratuita?

Sì — il testo completo di «Creazione di un componente chat in tempo reale» è 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 «Creazione di un componente chat in tempo reale»?

Elenco dei messaggi con v-for, binding dell'input, emit all'invio, scorrimento in fondo al ricevimento di un nuovo messaggio. 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 3 di 4.

Quanto tempo richiede la lezione «Creazione di un componente chat in tempo reale»?

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