Vue Academy · Pelajaran

Membangun Komponen Chat Real-Time

Daftar pesan dengan v-for, binding input, emit saat submit, serta scroll ke bawah saat ada pesan baru.

Membangun Komponen Chat Real-Time adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Tujuan: Kotak Percakapan Langsung

Kita akan merangkai komponen percakapan kecil yang lengkap: komponen ini menampilkan daftar pesan yang dapat digulir, memungkinkan pengguna mengetik dan mengirim pesan, serta menambahkan pesan masuk secara waktu nyata.

Hal ini menyatukan keadaan reaktif, pengait siklus hidup, dan akses DOM.

Ref Pesan

Simpan percakapan dalam larik reaktif. Setiap entri adalah objek sederhana dengan pengenal, penulis, dan teks.

import { ref } from "vue"

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

Ref untuk Masukan

Ikat kotak teks ke ref terpisah dengan v-model. Ref ini menyimpan pesan yang sedang ditulis sebelum dikirim.

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

const draft = ref("")

Mendaftarkan Pendengar Soket

Di dalam onMounted, berlangganan pesan masuk dan tambahkan masing-masing pesan ke larik. Penggunaan onMounted menjamin komponen siap sebelum kita memasang penangan.

import { onMounted } from "vue"

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

Mengirim Pesan

Fungsi sendMessage mengirimkan draft ke server dan mengosongkan masukan. Kita mencegah pengiriman teks kosong.

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

Merender Daftar

Templat melakukan perulangan pada messages dengan v-for, menggunakan pengenal sebagai kunci. Setiap baris menampilkan penulis dan teks.

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

Masalah Pengguliran

Saat pesan baru tiba, pengguna ingin tampilan tetap berada di bagian bawah. Namun, jika Anda menggulir tepat setelah menambahkan pesan ke larik, baris baru belum ada di DOM — Vue belum menerapkan pembaruan tersebut.

Anda menggulir terlalu cepat dan melewatkan baris terbaru.

Ref Templat untuk Wadah

Ambil wadah gulir dengan ref templat agar Anda dapat membaca dan menetapkan posisi gulirnya.

import { ref } from "vue"

const chatBox = ref(null)

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

Menunggu DOM dengan nextTick

nextTick mengembalikan hasil asinkron yang selesai setelah Vue menerapkan pembaruan DOM yang tertunda. Tunggulah hingga selesai sebelum menggulir agar pesan baru sudah ada di DOM.

import { nextTick } from "vue"

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

Menggulir Setiap Ada Pesan Baru

Panggil scrollToBottom segera setelah menambahkan pesan—baik pesan masuk maupun pesan keluar. Menetapkan scrollTop = scrollHeight akan langsung membawa tampilan ke bagian paling bawah.

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

Alur Lengkap

Sekarang komponen: menerima pesan, memperbarui keadaan reaktif, menunggu DOM melalui nextTick, lalu menggulir. Pengiriman pesan mengikuti alur yang sama. Bersih, mudah diprediksi, dan waktu nyata.

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

Uji Cepat

Periksa pemahaman Anda tentang waktu pembaruan DOM dalam komponen chat.

Ringkasan

Dalam pelajaran ini, Anda membangun komponen chat waktu nyata. Poin-poin penting:

Simpan pesan dalam array ref reaktif dan draf dalam ref terpisah.
Daftarkan pendengar soket di onMounted dan tambahkan pesan masuk.
sendMessage memancarkan draf lalu mengosongkan input.
Gunakan ref templat dan await nextTick() sebelum menetapkan scrollTop = scrollHeight agar pesan terbaru terlihat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Komponen Chat Real-Time” gratis?

Ya — teks lengkap “Membangun Komponen Chat Real-Time” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Komponen Chat Real-Time”?

Daftar pesan dengan v-for, binding input, emit saat submit, serta scroll ke bawah saat ada pesan baru. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membangun Komponen Chat Real-Time” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Dasar-Dasar WebSocket di Browser
Klien Socket.io dengan Vue
Membangun Komponen Chat Real-Time
Composable useWebSocket dengan Penyambungan Ulang

← Kembali ke Vue Academy