首先需创建支持WebSocket协议的服务端，如使用Node.js与ws库搭建服务器；然后在客户端通过JavaScript的WebSocket API建立连接并监听事件；接着利用全双工特性实现双向通信，客户端与服务器可随时互发消息；最后需处理连接状态与异常，包括重连、错误提示及心跳机制以保持连接稳定。整个过程基于单一TCP连接，不依赖HTTP请求响应模式，适用于实时聊天、通知等场景，关键在于服务端支持与前端事件驱动协同，同时注意使用wss加密、跨域策略及JSON格式传输数据。
HTML5 使用 WebSocket 实现全双工实时通信，可以让客户端与服务器之间建立持久连接，实现数据的双向即时传输。整个过程不依赖传统的 HTTP 请求-响应模式，而是通过单一 TCP 连接持续交换信息。以下是具体实现步骤。
1. 创建 WebSocket 服务器
要使用 WebSocket，首先需要一个支持 WebSocket 协议的服务端程序。可以使用 Node.js 搭配 ws 库快速搭建：
- 安装 ws：运行 npm install ws
- 创建服务端脚本（如 server.js）：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('客户端已连接');
ws.on('message', (data) => {
console.log('收到:', data);
ws.send(`服务器回复: ${data}`); // 回传消息
});
ws.send('欢迎连接到 WebSocket 服务器！');
});
2. 客户端使用 JavaScript 建立连接
在 HTML 页面中，通过原生 WebSocket API 与服务器通信：
- 创建 WebSocket 实例，指定服务器地址（ws:// 或 wss://）
- 监听 open、message、error 和 close 事件
- 使用 send() 方法发送数据
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('连接已建立');
socket.send('你好，服务器！');
};
socket.onmessage = (event) => {
console.log('来自服务器的消息:', event.data);
};
socket.onerror = (error) => {
console.error('连接错误:', error);
};
socket.onclose = () => {
console.log('连接已关闭');
};
</script>
3. 实现双向通信（全双工）
WebSocket 的核心优势是全双工，即客户端和服务器可同时收发数据，互不干扰。
立即学习“前端免费学习笔记（深入）”；
- 客户端调用 socket.send() 发送消息
- 服务器通过 ws.send() 主动推送消息
- 任意一方都能随时发送，无需等待请求
例如：用户在页面输入内容并发送，服务器接收后广播给其他客户端，实现聊天室效果。
4. 处理连接状态与异常
保持通信稳定需要合理处理连接状态：
- onopen 触发时可启用发送功能
- onclose 可尝试重连：setTimeout 重新实例化 WebSocket
- onerror 避免静默失败，提示用户或记录日志
建议加入心跳机制，定期发送 ping/pong 消息检测连接是否存活。
基本上就这些。WebSocket 让 HTML5 应用具备真正的实时能力，适用于聊天、通知、协同编辑等场景。关键在于服务端支持和前端事件驱动编程的配合。不复杂但容易忽略细节，比如协议安全（wss）、跨域限制和消息格式（常使用 JSON）。
