HTML5本身不直接提供实时通信功能，但通过集成WebSocket API，可以在浏览器和服务器之间建立全双工通信通道，实现真正的实时数据交互。下面是一个基于HTML5和WebSocket的实时通信搭建教程，包含前端代码和后端Node.js示例。
什么是WebSocket？
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。与传统的HTTP请求不同，WebSocket连接一旦建立，客户端和服务器可以随时互相发送数据，适合聊天应用、实时通知、在线游戏等场景。
前端：HTML5 + JavaScript 搭建WebSocket客户端
使用原生JavaScript即可在HTML页面中连接WebSocket服务：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>WebSocket 实时通信</title>
</head>
<body>
<h2>WebSocket 客户端</h2>
<textarea id="output" rows="10" cols="50" readonly></textarea><br/>
<input type="text" id="message" placeholder="输入消息" />
<button onclick="sendMessage()">发送</button>
<button onclick="closeConnection()">关闭连接</button>
<script>
// 创建WebSocket连接（注意地址为ws或wss）
const socket = new WebSocket("ws://localhost:8080");
// 连接成功
socket.onopen = function(event) {
appendMessage("✅ 连接已建立");
};
// 接收服务器消息
socket.onmessage = function(event) {
appendMessage("? 来自服务器: " + event.data);
};
// 处理错误
socket.onerror = function(event) {
appendMessage("❌ 连接出错");
};
// 连接关闭
socket.onclose = function(event) {
appendMessage("? 连接已关闭");
};
// 发送消息
function sendMessage() {
const input = document.getElementById("message");
const msg = input.value;
if (msg) {
socket.send(msg);
appendMessage("? 我: " + msg);
input.value = "";
}
}
// 关闭连接
function closeConnection() {
socket.close();
}
// 显示消息到文本框
function appendMessage(message) {
const output = document.getElementById("output");
output.value += message + "\n";
output.scrollTop = output.scrollHeight; // 自动滚动到底部
}
</script>
</body>
</html>
后端：Node.js + ws 搭建WebSocket服务器
使用Node.js和ws库快速搭建WebSocket服务器。
立即学习“前端免费学习笔记（深入）”；
步骤一：初始化项目并安装依赖
npm init -y npm install ws
步骤二：创建 server.js 文件
const WebSocket = require('ws');
// 创建WebSocket服务器，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('? 客户端已连接');
// 接收客户端消息
ws.on('message', function(data) {
console.log('? 收到消息:', data.toString());
// 广播给所有连接的客户端（包括发送者）
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播: ${data}`);
}
});
});
// 向客户端发送欢迎消息
ws.send('? 欢迎！你已连接到WebSocket服务器。');
});
步骤三：启动服务器
node server.js
服务器运行后，监听 ws://localhost:8080，等待客户端连接。
测试与注意事项
- 确保前后端在同一域名或允许跨域（生产环境需配置CORS）
- 使用
ws://表示非加密连接，wss://用于加密（类似HTTPS） - 浏览器需支持WebSocket（现代浏览器均支持）
- 服务器部署时建议配合Nginx反向代理，并启用WSS
- 处理连接断开、重连逻辑可提升用户体验
