Vue Academy · 课时

在 Vue 中使用 Socket.io 客户端

socket.io-client、io(url)、socket.on/emit，以及由 Socket.io 事件驱动的响应式 Vue 状态

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

为什么使用 Socket.IO

原始 WebSockets 属于底层接口。Socket.IO 是一个常用库，它在此基础上增加了自动重新连接、回退传输方式、房间和简洁的事件驱动 API。

它提供相互匹配的服务器端和客户端软件包；这里将重点介绍 Vue 中使用的浏览器客户端。

安装客户端

将客户端软件包添加到您的 Vue 项目中。它与服务器端软件包相互独立。

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

使用 io() 连接

调用 io(url) 来创建 socket 并建立连接。与原始 WebSockets 不同，您需要传入 http(s):// URL——Socket.IO 会为您协商传输方式。

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

使用 socket.on 监听

Socket.IO 围绕命名事件构建。使用 socket.on(name, handler) 来响应服务器事件。处理程序会接收服务器发出的任意负载。

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

内置生命周期事件

Socket.IO 会发出自身的生命周期事件，您可以监听这些事件：connect、disconnect 和 connect_error。

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

使用 socket.emit 发送

要发送数据，请调用 socket.emit(name, payload)。事件名称由您选择，服务器会监听同名事件。无需手动编码 JSON——Socket.IO 会为您完成序列化。

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

响应式消息数组

在 Vue 中，将收到的消息保存在响应式的 ref 数组中。您的 socket.on 处理程序会向其中推入消息，模板也会自动重新渲染。

import { ref } from "vue"

const messages = ref([])

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

在 script setup 中接线

典型组件会在 onMounted 中建立连接、注册监听器，并向模板公开一个发送函数。

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

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

function send(text) {
  socket.emit("send", { text })
}

清理监听器

使用 socket.on 注册的监听器会一直保留。如果组件重新挂载，可能会叠加重复的处理程序。拆除组件时，请使用 socket.off 将它们移除。

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

在 onUnmounted 中断开连接

组件销毁时，请使用 socket.disconnect() 关闭连接，以免在页面导航过程中泄漏处于打开状态的 socket。

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

确认回执

Socket.IO 的一个实用功能是：将回调作为 emit 的最后一个参数传入，服务器便可以调用它来确认已收到消息。这非常适合实现“消息已送达”的用户体验。

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

快速检查

检查您对 Socket.IO 客户端 API 的理解。

回顾

在本课中，您学到了：

socket.io-client 中的 io(url) 会使用 http(s) URL 建立连接。
socket.on(name, handler) 会响应命名的服务器事件。
socket.emit(name, payload) 会发送事件，并自动序列化负载。
将传入数据推入响应式 ref 数组，供模板使用。
在 onUnmounted 中使用 socket.off 和 socket.disconnect() 完成清理。

常见问题解答

「在 Vue 中使用 Socket.io 客户端」课时是免费的吗？

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

「在 Vue 中使用 Socket.io 客户端」这节课中我会学到什么？

socket.io-client、io(url)、socket.on/emit，以及由 Socket.io 事件驱动的响应式 Vue 状态你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「在 Vue 中使用 Socket.io 客户端」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy