Vue Academy · درس

بناء مكوّن محادثة فورية

قائمة رسائل باستخدام v-for، وربط حقل الإدخال، وإطلاق الحدث عند الإرسال، والتمرير إلى الأسفل عند وصول رسالة جديدة

الدرس 3 من 413 خطوة

بناء مكوّن محادثة فورية درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

الهدف: مربع دردشة مباشر

سنجمع مكوّن دردشة صغيرًا لكنه مكتمل: يعرض قائمة رسائل قابلة للتمرير، ويتيح للمستخدم الكتابة والإرسال، ويلحق الرسائل الواردة في الوقت الفعلي.

يجمع هذا بين الحالة التفاعلية وخطافات دورة الحياة والوصول إلى DOM.

مرجع الرسائل

احتفظوا بالمحادثة في مصفوفة تفاعلية. ويكون كل عنصر كائنًا بسيطًا يتضمن id وauthor وtext.

import { ref } from "vue"

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

مرجع لحقل الإدخال

اربطوا مربع النص بمرجع منفصل باستخدام v-model. ويحتفظ هذا المرجع بالرسالة التي تتم صياغتها قبل إرسالها.

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

const draft = ref("")

تسجيل مستمع المقبس

في onMounted، اشتركوا في الرسائل الواردة وأضيفوا كل رسالة إلى المصفوفة. ويضمن استخدام onMounted أن يكون المكوّن جاهزًا قبل إرفاق المعالجات.

import { onMounted } from "vue"

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

إرسال رسالة

تُصدر الدالة sendMessage المسودة إلى الخادم وتمسح حقل الإدخال. ونتحقق قبل ذلك من عدم إرسال سلاسل نصية فارغة.

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

عرض القائمة

يكرّر القالب العناصر الموجودة في messages باستخدام v-for، مع تحديدها بواسطة id. ويعرض كل صف اسم المؤلف والنص.

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

مشكلة التمرير

عند وصول رسالة جديدة، يريد المستخدم أن يظل العرض مثبتًا في الأسفل. لكن إذا مرّرتم مباشرةً بعد إضافة الرسالة إلى المصفوفة، فلن يكون الصف الجديد موجودًا في DOM بعد — إذ لم ينفّذ Vue تحديث الواجهة بعد.

ستمرّرون مبكرًا جدًا، فتفوتكم أحدث رسالة.

مرجع قالب للحاوية

احصلوا على حاوية التمرير باستخدام مرجع قالب، حتى تتمكنوا من قراءة موضع التمرير وتعيينه.

import { ref } from "vue"

const chatBox = ref(null)

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

انتظار DOM باستخدام nextTick

تعيد nextTick وعدًا يكتمل بعد أن تطبّق Vue تحديثات DOM المعلّقة. انتظر اكتماله قبل التمرير حتى تصبح الرسالة الجديدة موجودة في DOM.

import { nextTick } from "vue"

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

التمرير بعد كل رسالة جديدة

استدعِ scrollToBottom مباشرةً بعد إضافة رسالة، سواء كانت واردة أم صادرة. يؤدي ضبط scrollTop = scrollHeight إلى الانتقال مباشرةً إلى أسفل المحتوى تمامًا.

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

التدفق الكامل

أصبح المكوّن الآن يستقبل رسالة، ويحدّث الحالة التفاعلية، وينتظر DOM عبر nextTick، ثم يمرّر المحتوى. ويتبع الإرسال المسار نفسه. تدفق نظيف ومتوقع وفي الوقت الفعلي.

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

تحقق سريع

تحقق من فهمك لتوقيت DOM في مكوّن الدردشة.

أجب عليها في الدرس التفاعلي

مراجعة

في هذا الدرس بنيت مكوّن دردشة يعمل في الوقت الفعلي. النقاط الأساسية:

احتفظ بالرسائل في مصفوفة ref تفاعلية، وبمسودة الرسالة في ref مستقل.
سجّل مستمع المقبس داخل onMounted وأضف الرسائل الواردة.
يبث sendMessage المسودة ثم يمسح حقل الإدخال.
استخدم ref للقالب مع await nextTick() قبل ضبط scrollTop = scrollHeight حتى تظهر أحدث رسالة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «بناء مكوّن محادثة فورية» مجاني؟

نعم — نص درس «بناء مكوّن محادثة فورية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «بناء مكوّن محادثة فورية»؟

قائمة رسائل باستخدام v-for، وربط حقل الإدخال، وإطلاق الحدث عند الإرسال، والتمرير إلى الأسفل عند وصول رسالة جديدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «بناء مكوّن محادثة فورية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

أساسيات WebSocket في المتصفح
عميل Socket.io مع Vue
بناء مكوّن محادثة فورية
‏useWebSocket Composable مع إعادة الاتصال

← العودة إلى Vue Academy