HTML5怎么实现WebSocket通信_HTML5 WebSocket实时通信-html教程-PHP中文网

HTML5怎么实现WebSocket通信_HTML5 WebSocket实时通信

絕刀狂花

发布： 2025-10-22 23:45:02

原创

722人浏览过

WebSocket是一种HTML5全双工通信协议，可实现客户端与服务器间的实时数据交互。通过new WebSocket('ws://...')创建连接，使用onopen、onmessage、onerror、onclose监听状态事件，调用send()发送数据，服务端可用Node.js的ws库实现消息广播，配合心跳与重连机制适用于聊天、通知等场景。

html5怎么实现websocket通信_html5 websocket实时通信

WebSocket 是 HTML5 提供的一种全双工通信协议，能让客户端和服务器之间实现低延迟、高效率的实时数据交互。相比传统的轮询或长轮询方式，WebSocket 能真正实现“服务端推”功能。

1. 创建 WebSocket 连接

在浏览器中使用 JavaScript 可以轻松创建一个 WebSocket 实例，连接到指定的服务器地址。

const socket = new WebSocket('ws://localhost:8080');

登录后复制

注意：协议是 ws://（非加密）或 wss://（加密，类似 HTTPS），不能使用 http 或 https 协议。

2. 监听连接状态与事件

WebSocket 提供了多个事件回调来处理连接状态和数据通信：

立即学习“前端免费学习笔记（深入）”；

onopen：连接建立时触发
onmessage：收到服务器消息时触发
onerror：通信发生错误时触发
onclose：连接关闭时触发

示例代码：

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

登录后复制

3. 发送与接收数据

使用 send() 方法向服务器发送数据，支持字符串、Blob 或 ArrayBuffer。

小程序websocket用法示例

该示例将演示在原生微信小程序中使用GoEasy快速实现websocket实时通讯。

查看详情

// 发送文本
socket.send('这是一条消息');

// 发送 JSON 数据
const data = { type: 'chat', content: 'Hello World' };
socket.send(JSON.stringify(data));

登录后复制

服务器返回的数据通过 event.data 获取，可根据内容类型进行解析。

4. 服务端简单示例（Node.js + ws 库）

前端需要配合支持 WebSocket 的服务端。以下是使用 Node.js 和 ws 模块的简单服务端实现：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function(socket) {
  console.log('客户端已连接');

  socket.on('message', function(data) {
    console.log('收到数据：' + data);
    // 将收到的消息广播给所有客户端
    server.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send('广播：' + data);
      }
    });
  });

  socket.send('欢迎接入 WebSocket 服务！');
});

登录后复制

安装依赖：