Vue Academy · Lektion

Bygg en chattkomponent i realtid

Meddelandelista med v-for, bindning av indata, emit vid skickande och scrollning längst ned vid nya meddelanden.

Lektion 3 av 413 steg

Bygg en chattkomponent i realtid är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Mål: En livechattruta

Vi ska sätta ihop en liten men komplett chattkomponent: den visar en rullningsbar lista med meddelanden, låter användaren skriva och skicka samt lägger till inkommande meddelanden i realtid.

Det här knyter ihop reaktivt tillstånd, livscykelhakar och åtkomst till DOM.

Meddelande-refen

Lagra konversationen i en reaktiv array. Varje post är ett enkelt objekt med ett id, en författare och en text.

import { ref } from "vue"

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

En ref för inmatningen

Bind textrutan till en separat ref med v-model. Den innehåller meddelandet som skrivs innan det skickas.

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

const draft = ref("")

Registrera socket-lyssnaren

I onMounted prenumererar du på inkommande meddelanden och lägger till varje meddelande i arrayen. onMounted garanterar att komponenten är redo innan vi kopplar in hanterarna.

import { onMounted } from "vue"

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

Skicka ett meddelande

Funktionen sendMessage skickar utkastet till servern och rensar inmatningen. Vi förhindrar att tomma strängar skickas.

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

Rendera listan

Mallen loopar över messages med v-for och använder id som nyckel. Varje rad visar författaren och texten.

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

Problemet med rullningen

När ett nytt meddelande anländer vill användaren att vyn ska vara fäst längst ned. Men om du rullar direkt efter att du lagt till meddelandet i arrayen finns den nya raden ännu inte i DOM:en – Vue har inte tillämpat uppdateringen än.

Du rullar för tidigt och missar den senaste raden.

En template-ref för containern

Hämta rullningscontainern med en template-ref, så att du kan läsa och ange dess rullningsposition.

import { ref } from "vue"

const chatBox = ref(null)

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

Vänta på DOM med nextTick

nextTick returnerar ett löfte som löser sig efter att Vue har tillämpat väntande DOM-uppdateringar. Invänta det innan du rullar, så att det nya meddelandet finns i DOM:en.

import { nextTick } from "vue"

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

Rulla efter varje nytt meddelande

Anropa scrollToBottom direkt efter att du har lagt till ett meddelande – både för inkommande och utgående meddelanden. Om du anger scrollTop = scrollHeight hoppar du längst ned.

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

Hela flödet

Komponenten gör nu följande: tar emot ett meddelande, uppdaterar reaktivt tillstånd, inväntar DOM:en via nextTick och rullar sedan. Att skicka följer samma väg. Rent, förutsägbart och i realtid.

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

Snabb kontroll

Kontrollera att du förstår DOM-tidpunkter i chattkomponenten.

Besvara frågan i den interaktiva lektionen

Sammanfattning

I den här lektionen byggde du en chattkomponent i realtid. Viktiga punkter:

Behåll meddelandena i en reaktiv ref-array och utkastet i en egen ref.
Registrera socket-lyssnaren i onMounted och lägg till inkommande meddelanden.
sendMessage skickar utkastet och rensar inmatningsfältet.
Använd en template-ref och await nextTick() innan du anger scrollTop = scrollHeight, så att det senaste meddelandet blir synligt.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygg en chattkomponent i realtid” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Bygg en chattkomponent i realtid”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygg en chattkomponent i realtid”?

Meddelandelista med v-for, bindning av indata, emit vid skickande och scrollning längst ned vid nya meddelanden. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Bygg en chattkomponent i realtid”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Grunderna i WebSocket i webbläsaren
Socket.io-klienten med Vue
Bygg en chattkomponent i realtid
useWebSocket-composable med återanslutning

← Tillbaka till Vue Academy