当前位置：首页 > HTML

h5 websocket实现

2026-03-06 14:03:03HTML

Websocket 在 H5 中的实现

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。通过 WebSocket，客户端和服务器可以实时交换数据。

创建 WebSocket 连接

要建立 WebSocket 连接，需要使用 WebSocket 构造函数并传入服务器地址：

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

地址以 ws://（非加密）或 wss://（加密）开头。建立连接后，会触发 onopen 事件。

监听 WebSocket 事件

WebSocket 对象提供了多个事件用于处理连接状态和数据接收：

h5 websocket实现

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

发送数据

通过 send 方法可以向服务器发送数据：

socket.send('Hello Server!');

可以发送字符串、Blob 或 ArrayBuffer 类型的数据。

关闭连接

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

h5 websocket实现

socket.close();

可以传入状态码和关闭原因：

socket.close(1000, '正常关闭');

实际应用示例

以下是一个完整的 WebSocket 客户端实现示例：

const socket = new WebSocket('wss://echo.websocket.org');

socket.onopen = function() {
    console.log('连接成功');
    socket.send('测试消息');
};

socket.onmessage = function(event) {
    console.log('收到回复: ' + event.data);
};

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

// 处理用户输入
document.getElementById('sendBtn').addEventListener('click', function() {
    const message = document.getElementById('messageInput').value;
    socket.send(message);
});