HTML5 WebSocket
WebSocket 是 HTML5 提供的全双工通信协议，浏览器与服务器之间只需一次握手就能建立连接，之后两边都能随时互发消息，没有 HTTP 请求/响应那种一问一答的开销，是聊天室、在线游戏、协同编辑这类实时应用的基石。
什么是 WebSocket
- 双向通信：浏览器和服务器都能主动发数据。
- 低开销：一条连接上持续传输，不必每发一条都重新建连。
- 支持文本和二进制：既能发字符串，也能发 ArrayBuffer、Blob。
- 协议地址：
ws://（明文）、wss://（TLS 加密），例如ws://example.com/chat。
创建 WebSocket 连接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>WebSocket 示例</title>
</head>
<body>
<h3>聊天消息</h3>
<ul id="chat"></ul>
<script>
// 1. 创建连接（需先启动 WebSocket 服务端，地址要一致）
var ws = new WebSocket("ws://example.com/chat");
// 2. onopen：连接建立成功后触发，可在此发送消息
ws.onopen = function () {
console.log("连接已建立");
ws.send("大家好，我是小明"); // 发送文本消息
};
// 3. onmessage：收到服务器消息时触发
ws.onmessage = function (event) {
var li = document.createElement("li");
li.textContent = "收到：" + event.data;
document.getElementById("chat").appendChild(li);
};
// 4. onclose / onerror：关闭与出错处理
ws.onclose = function () { console.log("连接已关闭"); };
ws.onerror = function () { console.log("连接出错"); };
</script>
</body>
</html>
在浏览器中显示为：控制台先输出"连接已建立"，服务器回复的消息会以列表形式出现在"聊天消息"下方。
常用事件与状态
| 事件/属性 | 说明 |
|---|---|
| onopen | 连接建立成功 |
| onmessage | 收到服务器消息（event.data 为内容） |
| onclose | 连接关闭（code、reason 可查关闭信息） |
| onerror | 通信出错 |
| readyState | 连接状态：0 连接中 / 1 已连接 / 2 关闭中 / 3 已关闭 |
| bufferedAmount | 已排队尚未发出的数据字节数 |
发送数据 send()
send() 可发送文本、JSON 字符串或二进制数据：
<script>
var ws = new WebSocket("wss://example.com/socket");
ws.onopen = function () {
// 发送 JSON 字符串，服务器解析后处理
ws.send(JSON.stringify({ type: "login", user: "xiaoming" }));
// 发送二进制数据（ArrayBuffer）
var buf = new ArrayBuffer(4);
ws.send(buf);
};
</script>
WebSocket 与 HTTP 的区别
- HTTP 是"请求 → 响应"模式，一问一答，服务器难以主动推送。
- WebSocket 握手阶段借 HTTP 完成（带 Upgrade 头），之后升级为双向长连接。
- 需要持续实时交互的场景适合 WebSocket；普通网页浏览仍用 HTTP 更合适。
小结：WebSocket 让浏览器与服务器保持一条双向长连接，通过 onopen、onmessage、onclose、onerror 四个事件即可收发消息，是实现聊天、在线游戏、实时协作的首选技术。