html 5 本身不直接提供实时通信功能，但通过集成 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
- 处理连接断开、重连逻辑可提升用户体验
基本上就这些。用 HTML5 的 WebSocket API 加上一个简单的后端服务，就能实现高效的实时通信。不复杂但容易忽略心跳机制和异常处理，在实际项目中要补全。
