HTML5网页如何实现实时通信 HTML5网页WebSocket的使用教程

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('连接已关闭');
};

说明：

ASP.NET 4.0电子商城

在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者

下载

• 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 接收并显示新消息。

可加入心跳机制防止连接断开，或在网络异常时自动重连。