Vue Academy · 课时

浏览器中的 WebSocket 基础

new WebSocket(url)、onopen/onmessage/onerror/onclose、send()，以及 readyState

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

浏览器中的实时通信

HTTP 采用请求/响应模式：客户端发起请求，服务器返回响应，然后连接关闭。对于聊天、实时仪表板或多人游戏，您需要服务器在无人请求时也能推送数据。

WebSocket 协议会在浏览器与服务器之间建立一个持久的双向连接。

打开连接

浏览器提供了一个全局的 WebSocket 构造函数。请使用 ws://（普通连接）或 wss://（TLS）方案传入 URL。

创建对象后，连接握手会立即开始。

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

open 事件处理程序

连接并不会在构造对象的瞬间就准备好。握手完成且 socket 已准备好传输数据后，onopen 事件才会触发一次。

请在 onopen 内部发送第一条消息，不要提前发送。

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

接收消息

传入的数据会通过 onmessage 到达。负载位于 event.data 中，默认类型为字符串。

大多数应用发送 JSON，因此您需要使用 parse 将其还原为对象。

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

发送消息

使用 ws.send() 进行传输。WebSockets 传输原始字符串或二进制数据，因此请先使用 JSON.stringify 编码对象。

通信双方需要约定数据结构——这里是一个包含 type 和 payload 的结构。

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

完整往返流程

将打开、发送和接收组合起来，就得到了一个完整的回显客户端。打开 socket，在打开后发送消息，并记录返回的所有内容。

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

关闭连接

连接结束时会触发 onclose 事件——无论是您调用了 ws.close()，还是网络连接中断。该事件包含一个数值型 code 和一个字符串型 reason。

代码 1000 表示正常关闭。

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

处理错误

传输失败时会触发 onerror 事件。出于安全考虑，错误事件本身有意不提供太多细节；请将它视为出现问题的信号，并预计连接很快会关闭。

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

readyState 属性

ws.readyState 是一个数值，用于表示 socket 处于生命周期的哪个阶段。发送前请始终检查它，以免在 socket 尚未打开时抛出错误。

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

命名的 readyState 常量

不要使用魔法数字，而应使用 WebSocket 类上的常量。与 0、1 或 3 相比，它们的含义清晰得多。

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

在 Vue 中整合

在 Vue 组件中，您通常会在 onMounted 中创建 socket，并在 onUnmounted 中将其拆除。处理程序会更新响应式引用，模板会渲染这些引用。

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

快速检查

检查您对 WebSocket readyState 值的理解。

回顾

在本课中，您学到了：

new WebSocket(url) 会使用 ws:// 或 wss:// 建立双向连接。
socket 准备好后会触发 onopen；只能在此之后发送。
onmessage 会通过 event.data 提供数据——解析 JSON 即可得到对象。
ws.send(JSON.stringify(msg)) 会传输数据。
onclose 和 onerror 会处理拆除和失败情况。
readyState 的值分别是 0 CONNECTING、1 OPEN、2 CLOSING、3 CLOSED。

常见问题解答

「浏览器中的 WebSocket 基础」课时是免费的吗？

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

「浏览器中的 WebSocket 基础」这节课中我会学到什么？

new WebSocket(url)、onopen/onmessage/onerror/onclose、send()，以及 readyState 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「浏览器中的 WebSocket 基础」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy