Vue Academy · Lekcja

Budowanie komponentu czatu czasu rzeczywistego

Lista wiadomości z v-for, powiązanie pola wejściowego, emit przy wysłaniu oraz przewijanie na dół po nadejściu wiadomości.

Lekcja 3 z 413 kroki

Budowanie komponentu czatu czasu rzeczywistego to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Cel: okno czatu na żywo

Złożymy mały, ale kompletny komponent czatu: wyświetla on przewijaną listę wiadomości, pozwala wpisywać i wysyłać wiadomości oraz dodaje wiadomości przychodzące w czasie rzeczywistym.

W ten sposób połączymy stan reaktywny, hooki cyklu życia i dostęp do DOM.

Ref przechowujący wiadomości

Rozmowę należy przechowywać w reaktywnej tablicy. Każdy element to prosty obiekt zawierający id, autora i tekst.

import { ref } from "vue"

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

Ref pola tekstowego

Pole tekstowe należy powiązać z osobnym refem za pomocą v-model. Przechowuje on wiadomość redagowaną przed wysłaniem.

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

const draft = ref("")

Rejestrowanie obsługi zdarzeń gniazda

W onMounted należy rozpocząć nasłuchiwanie wiadomości przychodzących i dodawać każdą z nich do tablicy. Użycie onMounted gwarantuje, że komponent będzie gotowy, zanim zostaną podłączone procedury obsługi.

import { onMounted } from "vue"

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

Wysyłanie wiadomości

Funkcja sendMessage emituje wersję roboczą wiadomości do serwera i czyści pole tekstowe. Należy zabezpieczyć się przed wysyłaniem pustych ciągów znaków.

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

Renderowanie listy

Szablon iteruje po messages za pomocą v-for, używając id jako klucza. Każdy wiersz wyświetla autora i tekst.

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

Problem przewijania

Gdy nadejdzie nowa wiadomość, użytkownik chce, aby widok był przewinięty na sam dół. Jeśli jednak przewinie się widok natychmiast po dodaniu wiadomości do tablicy, nowy wiersz nie znajduje się jeszcze w DOM — Vue nie zakończyło jeszcze aktualizacji.

Widok zostaje przewinięty zbyt wcześnie i najnowsza linia zostaje pominięta.

Ref szablonu kontenera

Należy pobrać kontener przewijania za pomocą refu szablonu, aby móc odczytywać i ustawiać jego pozycję przewijania.

import { ref } from "vue"

const chatBox = ref(null)

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

Oczekiwanie na DOM za pomocą nextTick

nextTick zwraca promise, który zostaje rozstrzygnięty po zastosowaniu przez Vue oczekujących aktualizacji DOM. Przed przewinięciem należy na niego zaczekać, aby nowa wiadomość istniała już w DOM.

import { nextTick } from "vue"

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

Przewijanie po każdej nowej wiadomości

Należy wywołać scrollToBottom natychmiast po dodaniu wiadomości — zarówno przychodzącej, jak i wychodzącej. Ustawienie scrollTop = scrollHeight przenosi widok na sam dół.

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

Pełny przebieg

Komponent teraz: odbiera wiadomość, aktualizuje stan reaktywny, czeka na DOM za pomocą nextTick, a następnie przewija widok. Wysyłanie przebiega taką samą ścieżką. Czysto, przewidywalnie, w czasie rzeczywistym.

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

Szybkie sprawdzenie

Sprawdź zrozumienie momentu aktualizacji DOM w komponencie czatu.

Odpowiedz w interaktywnej lekcji

Podsumowanie

W tej lekcji zbudowano komponent czatu działający w czasie rzeczywistym. Najważniejsze punkty:

Wiadomości należy przechowywać w reaktywnej tablicy ref, a treść roboczą w osobnym ref.
Listener gniazda należy zarejestrować w onMounted i dodawać do tablicy przychodzące wiadomości.
sendMessage emituje treść roboczą i czyści pole tekstowe.
Należy użyć refu szablonu oraz await nextTick() przed ustawieniem scrollTop = scrollHeight, aby najnowsza wiadomość była widoczna.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Budowanie komponentu czatu czasu rzeczywistego” jest bezpłatna?

Tak — pełny tekst „Budowanie komponentu czatu czasu rzeczywistego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Budowanie komponentu czatu czasu rzeczywistego”?

Lista wiadomości z v-for, powiązanie pola wejściowego, emit przy wysłaniu oraz przewijanie na dół po nadejściu wiadomości. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Budowanie komponentu czatu czasu rzeczywistego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Podstawy WebSocket w przeglądarce
Klient Socket.io z Vue
Budowanie komponentu czatu czasu rzeczywistego
Composable useWebSocket z ponownym połączeniem

← Powrót do Vue Academy