HTML5网页如何实现实时通信 HTML5网页WebSocket的使用教程-html教程-PHP中文网

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

蓮花仙者

发布： 2025-10-24 18:32:01

原创

883人浏览过

WebSocket是HTML5实现实时通信的核心技术，通过全双工TCP连接实现浏览器与服务器间的低延迟双向数据交换。使用new WebSocket('ws://...')建立连接后，可通过onopen、onmessage、onerror和onclose事件处理通信过程，支持文本及JSON数据传输，需服务端配合（如Node.js的ws库），广泛应用于聊天室、实时通知等场景。

html5网页如何实现实时通信 html5网页websocket的使用教程

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

登录后复制

说明：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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('欢迎连接！');
});

登录后复制