【JS】WebSocket 入门笔记

1. WebSocket 是什么？

WebSocket 是一种网络通信协议 ，可以让浏览器（客户端）和服务器实时双向通信。

传统 HTTP ：像发短信，每次发消息都要重新建立连接，效率低。
WebSocket ：像打电话，一次接通后，双方随时可以说话，实时高效。

2. 为什么需要 WebSocket？

HTTP 协议的问题：

单向通信：只能客户端发请求，服务器回响应，不能主动推送。
短连接：每次请求完就断开，频繁连接浪费资源。
实时性差：比如聊天室，HTTP 只能靠"不停刷新"或"轮询"来获取新消息，效率低。

WebSocket 的优势 ：

✅ 全双工通信 ：服务器和客户端可以同时收发数据。

✅ 持久连接 ：一次握手，长期保持连接，减少开销。

✅ 低延迟：数据实时推送，适合在线聊天、游戏、股票行情等场景。

3. WebSocket 工作原理

（1）握手阶段（HTTP 升级）

WebSocket 一开始会借助 HTTP 协议建立连接：

客户端发送一个 HTTP 请求，带上特殊头部：

vbnet 复制代码

GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxxx

服务器同意升级协议，返回：

makefile 复制代码

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: yyyy

握手成功，HTTP 升级为 WebSocket，后续通信不再走 HTTP，而是直接传输数据。

（2）数据传输

连接建立后，客户端和服务器可以随时互发消息（文本或二进制）。
数据以**帧（Frame）**的形式传输，比 HTTP 更轻量。

（3）关闭连接

任意一方可以发送关闭指令，结束通信。

4. WebSocket 应用场景

实时聊天（微信、QQ、钉钉）
在线游戏（王者荣耀、LOL 实时同步）
股票行情（股价实时刷新）
协同编辑（多人同时编辑文档，如腾讯文档）
物联网控制（智能家居设备实时状态更新）

5. WebSocket vs HTTP

对比项	WebSocket	HTTP
连接方式	持久化（一次连接，长期保持）	短连接（每次请求完断开）
通信模式	双向通信（服务器可主动推送）	单向通信（只能客户端请求）
实时性	高（数据实时到达）	低（需要轮询或长轮询）
适用场景	聊天、游戏、实时数据	网页浏览、API 请求

6. 简单代码示例（前端 JavaScript）

javascript 复制代码

// 1. 创建 WebSocket 连接（wss 表示加密，类似 HTTPS）
const socket = new WebSocket("wss://example.com/chat");

// 2. 监听连接成功
socket.onopen = () => {
  console.log("连接成功！");
  socket.send("你好，服务器！"); // 发送消息
};

// 3. 接收服务器消息
socket.onmessage = (event) => {
  console.log("收到消息：", event.data);
};

// 4. 监听连接关闭
socket.onclose = () => {
  console.log("连接已关闭");
};

// 5. 发生错误时
socket.onerror = (error) => {
  console.error("连接出错：", error);
};

7. 总结

WebSocket 是实时双向通信的协议，比 HTTP 更高效。
适合实时应用，如聊天、游戏、股票行情等。
工作原理：先 HTTP 握手，升级成 WebSocket，然后持久化通信。
前端使用 ：new WebSocket() + 事件监听（onopen、onmessage）。