Vue Academy · Pelajaran

Membina Komponen Sembang Masa Nyata

Senarai mesej dengan v-for, pengikatan input, emit semasa penghantaran, tatal ke bawah apabila mesej baharu diterima.

Pelajaran 3 daripada 413 langkah

Membina Komponen Sembang Masa Nyata ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Matlamat: Kotak Sembang Langsung

Kita akan membina komponen sembang kecil tetapi lengkap: komponen ini memaparkan senarai mesej yang boleh ditatal, membolehkan pengguna menaip dan menghantar mesej, serta menambah mesej masuk dalam masa nyata.

Ini menggabungkan keadaan reaktif, cangkuk kitar hayat dan akses kepada DOM.

Rujukan Mesej

Simpan perbualan dalam tatasusunan reaktif. Setiap entri ialah objek ringkas dengan id, pengarang dan teks.

import { ref } from "vue"

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

Rujukan untuk Input

Ikat kotak teks kepada rujukan berasingan dengan v-model. Rujukan ini menyimpan mesej yang sedang disusun sebelum dihantar.

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

const draft = ref("")

Mendaftarkan Pendengar Soket

Dalam onMounted, langgan mesej masuk dan tambah setiap mesej ke dalam tatasusunan. Penggunaan onMounted menjamin komponen sudah bersedia sebelum kita melampirkan pengendali.

import { onMounted } from "vue"

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

Menghantar Mesej

Fungsi sendMessage menghantar draft kepada pelayan dan mengosongkan input. Kami menghalang penghantaran rentetan kosong.

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

Memaparkan Senarai

Templat mengulangi messages dengan v-for, menggunakan id sebagai kunci. Setiap baris memaparkan pengarang 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 Penatalan

Apabila mesej baharu tiba, pengguna mahu paparan kekal di bahagian bawah. Namun, jika anda menatal sejurus selepas menambah mesej ke dalam tatasusunan, baris baharu itu belum berada dalam DOM — Vue belum menerapkan kemas kini tersebut.

Anda menatal terlalu awal lalu terlepas baris terkini.

Rujukan Templat untuk Bekas

Dapatkan bekas penatalan dengan rujukan templat supaya anda boleh membaca dan menetapkan kedudukan penatalannya.

import { ref } from "vue"

const chatBox = ref(null)

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

Menunggu DOM dengan nextTick

nextTick mengembalikan janji yang selesai selepas Vue menggunakan kemas kini DOM yang tertangguh. Tunggu janji itu sebelum menatal supaya mesej baharu wujud dalam DOM.

import { nextTick } from "vue"

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

Menatal Selepas Setiap Mesej Baharu

Panggil scrollToBottom sejurus selepas menolak mesej — untuk mesej masuk dan mesej keluar. Menetapkan scrollTop = scrollHeight akan terus pergi ke bahagian paling bawah.

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

Aliran Lengkap

Komponen kini menerima mesej, mengemas kini keadaan reaktif, menunggu DOM melalui nextTick, kemudian menatal. Penghantaran menggunakan laluan yang sama. Kemas, boleh dijangka dan dalam masa nyata.

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

Semakan Pantas

Semak pemahaman anda tentang pemasaan DOM dalam komponen sembang.

Jawab dalam pelajaran interaktif

Rumusan

Dalam pelajaran ini, anda membina komponen sembang masa nyata. Perkara penting:

Simpan mesej dalam tatasusunan ref reaktif dan draf dalam ref tersendiri.
Daftarkan pendengar soket dalam onMounted dan tolak mesej masuk ke dalam tatasusunan.
sendMessage menghantar draf dan mengosongkan medan input.
Gunakan ref templat serta await nextTick() sebelum menetapkan scrollTop = scrollHeight supaya mesej terbaharu kelihatan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membina Komponen Sembang Masa Nyata” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Membina Komponen Sembang Masa Nyata”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membina Komponen Sembang Masa Nyata”?

Senarai mesej dengan v-for, pengikatan input, emit semasa penghantaran, tatal ke bawah apabila mesej baharu diterima. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Membina Komponen Sembang Masa Nyata” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Asas WebSocket dalam Pelayar
Klien Socket.io dengan Vue
Membina Komponen Sembang Masa Nyata
Komposabel useWebSocket dengan Sambungan Semula

← Kembali ke Vue Academy