0Pricing
Vue Academy · Lektion

Eine Echtzeit-Chatkomponente erstellen

Nachrichtenliste mit v-for, Input-Binding, Emit beim Absenden und zum Ende scrollen, sobald eine neue Nachricht eintrifft

Eine Echtzeit-Chatkomponente erstellen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Ziel: Ein Live-Chat-Fenster

Sie erstellen eine kleine, aber vollständige Chat-Komponente: Sie zeigt eine scrollbare Nachrichtenliste, ermöglicht dem Benutzer, Text einzugeben und zu senden, und fügt eingehende Nachrichten in Echtzeit hinzu.

Damit verbinden Sie reaktiven Zustand, Lebenszyklus-Hooks und den Zugriff auf das DOM.

Die Nachrichten-Ref

Halten Sie die Unterhaltung in einem reaktiven Array. Jeder Eintrag ist ein einfaches Objekt mit einer ID, einem Autor und einem Text.

import { ref } from "vue"

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

Eine Ref für die Eingabe

Binden Sie das Textfeld mit v-model an eine separate Ref. Darin wird die Nachricht gespeichert, die vor dem Senden gerade verfasst wird.

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

const draft = ref("")

Den Socket-Listener registrieren

Abonnieren Sie in onMounted eingehende Nachrichten und fügen Sie jede zum Array hinzu. Mit onMounted stellen Sie sicher, dass die Komponente bereit ist, bevor Sie Handler registrieren.

import { onMounted } from "vue"

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

Eine Nachricht senden

Die Funktion sendMessage sendet den Entwurf an den Server und leert die Eingabe. Leere Strings werden dabei nicht gesendet.

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

Liste rendern

Das Template durchläuft messages mit v-for und verwendet die ID als Schlüssel. Jede Zeile zeigt Autor und Text.

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

Das Problem mit dem Scrollen

Wenn eine neue Nachricht eintrifft, soll die Ansicht am unteren Rand bleiben. Wenn Sie jedoch direkt nach dem Hinzufügen zum Array scrollen, befindet sich die neue Zeile noch nicht im DOM — Vue hat die Aktualisierung noch nicht in den DOM übernommen.

Sie scrollen zu früh und verpassen die neueste Zeile.

Eine Template-Ref für den Container

Erfassen Sie den Scroll-Container mit einer Template-Ref, damit Sie seine Scrollposition lesen und setzen können.

import { ref } from "vue"

const chatBox = ref(null)

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

Auf das DOM mit nextTick warten

nextTick gibt ein Promise zurück, das aufgelöst wird, nachdem Vue ausstehende DOM-Aktualisierungen angewendet hat. Warten Sie darauf, bevor Sie scrollen, damit die neue Nachricht im DOM vorhanden ist.

import { nextTick } from "vue"

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

Nach jeder neuen Nachricht scrollen

Rufen Sie scrollToBottom direkt nach dem Hinzufügen einer Nachricht auf – sowohl bei eingehenden als auch bei ausgehenden Nachrichten. Durch das Setzen von scrollTop = scrollHeight springen Sie ganz nach unten.

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

Der vollständige Ablauf

Die Komponente führt nun folgende Schritte aus: Sie empfängt eine Nachricht, aktualisiert den reaktiven Zustand, wartet mit nextTick auf das DOM und scrollt anschließend. Beim Senden wird derselbe Ablauf verwendet. Sauber, vorhersehbar und in Echtzeit.

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

Schnelltest

Überprüfen Sie Ihr Verständnis des DOM-Timings in der Chat-Komponente.

Zusammenfassung

In dieser Lektion haben Sie eine Chat-Komponente für Echtzeitkommunikation erstellt. Die wichtigsten Punkte:

  • Speichern Sie Nachrichten in einem reaktiven ref-Array und den Entwurf in einem eigenen Ref.
  • Registrieren Sie den Socket-Listener in onMounted und fügen Sie eingehende Nachrichten hinzu.
  • sendMessage sendet den Entwurf und leert das Eingabefeld.
  • Verwenden Sie einen Template-Ref und anschließend await nextTick(), bevor Sie scrollTop = scrollHeight setzen, damit die neueste Nachricht sichtbar ist.

Häufig gestellte Fragen

Ist die Lektion „Eine Echtzeit-Chatkomponente erstellen“ kostenlos?

Ja — der vollständige Text von „Eine Echtzeit-Chatkomponente erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine Echtzeit-Chatkomponente erstellen“?

Nachrichtenliste mit v-for, Input-Binding, Emit beim Absenden und zum Ende scrollen, sobald eine neue Nachricht eintrifft Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Eine Echtzeit-Chatkomponente erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. WebSocket-Grundlagen im Browser
  2. Socket.io-Client mit Vue
  3. Eine Echtzeit-Chatkomponente erstellen
  4. useWebSocket-Composable mit Wiederverbindung
← Zurück zu Vue Academy