Vue Academy · 课时

构建实时聊天组件

Q: 「构建实时聊天组件」这节课中我会学到什么？

使用 v-for 渲染消息列表、绑定输入内容、提交时触发事件，以及新消息到达时滚动到底部 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 v-for 渲染消息列表、绑定输入内容、提交时触发事件，以及新消息到达时滚动到底部

构建实时聊天组件 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

目标：实时聊天框

我们将组装一个小型但完整的聊天组件：它会显示可滚动的消息列表，允许用户输入并发送消息，还会实时追加收到的消息。

这会综合运用响应式状态、生命周期钩子和 DOM 访问。

消息引用

将对话保存在一个响应式数组中。每条记录都是一个包含标识符、作者和文本的简单对象。

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("")

注册 socket 监听器

在 onMounted 中订阅传入的消息，并将每条消息推入数组。使用 onMounted 可以确保组件准备好后再附加处理程序。

import { onMounted } from "vue"

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

发送消息

sendMessage 函数会将 draft 发送给服务器并清空输入。我们会阻止发送空字符串。

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

渲染列表

模板使用 v-for 遍历 messages，并以标识符作为键。每一行都会显示作者和文本。

<!-- 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>

使用 nextTick 等待 DOM

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()
  })
})

完整流程

现在，组件会接收消息、更新响应式状态、通过 nextTick 等待 DOM 更新，然后滚动到底部。发送消息也遵循相同的流程。简洁、可预测，而且实时。

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，并在设置 scrollTop = scrollHeight 前执行 await nextTick()，这样就能显示最新消息。

常见问题解答

「构建实时聊天组件」课时是免费的吗？

是的 — 「构建实时聊天组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「构建实时聊天组件」这节课中我会学到什么？

使用 v-for 渲染消息列表、绑定输入内容、提交时触发事件，以及新消息到达时滚动到底部你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「构建实时聊天组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy