Vue Academy · Ders

Gerçek Zamanlı Sohbet Bileşeni Oluşturma

v-for ile ileti listesi, input bağlama, gönderimde emit ve yeni iletide en alta kaydırma.

Gerçek Zamanlı Sohbet Bileşeni Oluşturma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Amaç: Canlı Bir Sohbet Kutusu

Küçük ama eksiksiz bir sohbet bileşeni oluşturacağız: bileşen, kaydırılabilir bir mesaj listesi gösterir, kullanıcının yazıp göndermesine olanak tanır ve gelen mesajları gerçek zamanlı olarak ekler.

Bu uygulama reaktif durumu, yaşam döngüsü kancalarını ve DOM erişimini bir araya getirir.

Mesajlar Ref'i

Konuşmayı reaktif bir dizide tutun. Her girdi, bir id, yazar ve metin içeren basit bir nesnedir.

import { ref } from "vue"

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

Girdi İçin Bir Ref

Metin kutusunu v-model ile ayrı bir ref'e bağlayın. Bu ref, mesaj gönderilmeden önce oluşturulmakta olan mesajı tutar.

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

const draft = ref("")

Soket Dinleyicisini Kaydetme

onMounted içinde gelen mesajlara abone olun ve her birini diziye ekleyin. onMounted kullanmak, işleyicileri bağlamadan önce bileşenin hazır olmasını garanti eder.

import { onMounted } from "vue"

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

Mesaj Gönderme

sendMessage işlevi, taslağı sunucuya gönderir ve girdiyi temizler. Boş dizeler gönderilmesini engelleriz.

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

Listeyi Oluşturma

Şablon, messages üzerinde v-for ile döngü kurar ve anahtar olarak id kullanır. Her satırda yazar ve metin gösterilir.

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

Kaydırma Sorunu

Yeni bir mesaj geldiğinde kullanıcı görünümün en alta sabitlenmesini ister. Ancak diziye ekleme yaptıktan hemen sonra kaydırırsanız yeni satır henüz DOM'da değildir — Vue güncellemeyi henüz uygulamamıştır.

Çok erken kaydırdığınız için en son satırı kaçırırsınız.

Kapsayıcı İçin Şablon Ref'i

Kaydırma konumunu okuyup ayarlayabilmek için kaydırma kapsayıcısını bir şablon ref'i ile alın.

import { ref } from "vue"

const chatBox = ref(null)

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

nextTick ile DOM'u bekleme

nextTick, Vue bekleyen DOM güncellemelerini uyguladıktan sonra çözümlenen bir promise döndürür. Yeni mesajın DOM'da var olmasını sağlamak için kaydırmadan önce bunu bekleyin.

import { nextTick } from "vue"

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

Her Yeni Mesajdan Sonra Kaydırma

Hem gelen hem de giden mesajlar için, bir mesajı ekledikten hemen sonra scrollToBottom işlevini çağırın. scrollTop = scrollHeight ayarı sizi doğrudan en alta götürür.

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

Tam Akış

Bileşen artık şu işlemleri yapıyor: bir mesaj alıyor, reaktif durumu güncelliyor, nextTick aracılığıyla DOM'u bekliyor ve ardından kaydırıyor. Gönderme işlemi de aynı yolu izliyor. Temiz, öngörülebilir ve gerçek zamanlı.

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

Hızlı Kontrol

Sohbet bileşeninde DOM zamanlamasını anlayıp anlamadığınızı kontrol edin.

Özet

Bu derste gerçek zamanlı bir sohbet bileşeni oluşturdunuz. Önemli noktalar:

Mesajları reaktif bir ref dizisinde, taslağı ise kendi ref'inde tutun.
Soket dinleyicisini onMounted içinde kaydedin ve gelen mesajları ekleyin.
sendMessage taslağı gönderir ve giriş alanını temizler.
Yeni mesajın görünür olması için şablon ref'i ve await nextTick() kullanarak scrollTop = scrollHeight ayarını bundan sonra yapın.

Sıkça Sorulan Sorular

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersi ücretsiz mi?

Evet — “Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersinde ne öğreneceğim?

v-for ile ileti listesi, input bağlama, gönderimde emit ve yeni iletide en alta kaydırma. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Gerçek Zamanlı Sohbet Bileşeni Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Tarayıcıda WebSocket Temelleri
Vue ile Socket.io İstemcisi
Gerçek Zamanlı Sohbet Bileşeni Oluşturma
Yeniden Bağlanma Özellikli useWebSocket Composable'ı

← Vue Academy Sayfasına Dön