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 应用非常关键。
以上就是HTML5网页如何实现实时通信 HTML5网页WebSocket的使用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588311.html
微信扫一扫 
支付宝扫一扫 
