WebSocket是HTML5实现实时通信的核心技术，通过全双工TCP连接实现浏览器与服务器间的低延迟双向数据交换。使用new WebSocket('ws://...')建立连接后，可通过onopen、onmessage、onerror和onclose事件处理通信过程，支持文本及JSON数据传输，需服务端配合（如Node.js的ws库），广泛应用于聊天室、实时通知等场景。
HTML5 的实时通信主要依靠 WebSocket 技术，它允许客户端和服务器之间建立持久、双向的连接，实现低延迟的数据交换。相比传统的轮询或长轮询方式，WebSocket 更高效、更实时。下面介绍如何在 HTML5 网页中使用 WebSocket 实现实时通信。
什么是 WebSocket
WebSocket 是 HTML5 提供的一种全双工通信协议，通过一个 TCP 连接，浏览器和服务器可以随时互相发送数据。与 HTTP 请求-响应模式不同，WebSocket 建立连接后保持打开状态，适合聊天应用、实时通知、在线游戏等场景。
WebSocket 使用 ws://（非加密）或 wss://（加密）协议，端口通常为 80 或 443。
创建 WebSocket 连接
在前端 JavaScript 中，使用 WebSocket 构造函数即可创建连接：
立即学习“前端免费学习笔记（深入）”；
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
console.log('连接已建立');
socket.send('你好，服务器！');
};
// 接收服务器消息
socket.onmessage = function(event) {
console.log('收到消息：' + event.data);
};
// 处理错误
socket.onerror = function(error) {
console.error('发生错误：', error);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log('连接已关闭');
};
说明：
- new WebSocket(url)：初始化连接，URL 必须是 ws 或 wss 协议。
- onopen：连接建立后执行，可在此发送初始消息。
- onmessage：每当收到服务器消息时触发，event.data 包含数据内容。
- onerror：通信过程中发生错误时调用。
- onclose：连接关闭时执行，可用于重连逻辑。
发送和接收数据
WebSocket 支持文本和二进制数据传输。
- 发送文本：socket.send("Hello")
- 发送 JSON 数据：
const data = { type: 'message', content: '你好世界' }; socket.send(JSON.stringify(data)); - 接收时解析 JSON：
socket.onmessage = function(event) { const msg = JSON.parse(event.data); console.log(msg.content); };
注意：只能在连接建立后（onopen 触发后）调用 send 方法，否则会报错。
服务器端支持
WebSocket 需要服务端也支持该协议。常见实现方式：
-
Node.js + ws 库：
const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { ws.on('message', function(data) { console.log('收到：' + data); ws.send('已收到你的消息'); }); ws.send('欢迎连接！'); }); - Python 可使用 websockets 或 Socket.IO 搭配 Flask/Django。
- Java 可使用 Spring WebSocket 或 Netty。
实际应用场景示例
比如做一个简单的网页聊天室：
- 用户输入消息点击发送，调用 socket.send() 发给服务器。
- 服务器广播消息给所有连接的客户端。
- 每个客户端通过 onmessage 接收并显示新消息。
可加入心跳机制防止连接断开，或在网络异常时自动重连。
基本上就这些。WebSocket 让网页具备了真正的实时能力，掌握它对开发交互式 Web 应用非常关键。
