当前位置：首页 > HTML

h5 实现websocket

2026-03-06 15:57:29HTML

WebSocket 的基本概念

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间进行实时数据交换。HTML5 提供了 WebSocket API，使得在浏览器中实现 WebSocket 通信变得简单。

创建 WebSocket 连接

在客户端（浏览器）中，可以通过 JavaScript 的 WebSocket API 创建 WebSocket 连接。需要指定服务器的 WebSocket URL，通常以 ws:// 或 wss://（加密）开头。

h5 实现websocket

const socket = new WebSocket('ws://example.com/socket');

监听 WebSocket 事件

WebSocket 对象提供了几个事件，用于处理连接的不同状态：

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

socket.onopen = function(event) {
    console.log('连接已建立');
};

socket.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

socket.onerror = function(error) {
    console.error('发生错误:', error);
};

socket.onclose = function(event) {
    console.log('连接已关闭');
};

发送数据

通过 WebSocket 的 send 方法可以向服务器发送数据。数据可以是字符串、Blob 或 ArrayBuffer。

h5 实现websocket

socket.send('Hello, Server!');

关闭连接

使用 close 方法可以主动关闭 WebSocket 连接。

socket.close();

服务器端实现

服务器端需要支持 WebSocket 协议。常见的后端框架如 Node.js 的 ws 库、Python 的 websockets 库等都可以实现 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 incoming(message) {
        console.log('收到消息:', message);
        ws.send('服务器已收到消息');
    });
});