HTML5 WebSocket 教程

WebSocket 是一种网络通信协议，允许服务器和客户端之间进行全双工通信。HTML5 提供了对 WebSocket 的原生支持，使得实现实时、双向的通信变得更加简单。

什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 请求-响应模式不同，WebSocket 允许服务器主动推送信息到客户端。

使用 WebSocket 的优势

实时通信：服务器可以主动推送信息到客户端，无需客户端不断轮询服务器。
减少延迟：WebSocket 连接一旦建立，数据传输将更加迅速。
降低服务器负载：WebSocket 连接保持打开状态，减少了频繁建立和关闭连接的开销。

创建 WebSocket 连接

在 HTML 中，可以使用 WebSocket 对象来创建 WebSocket 连接。

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

WebSocket 事件

WebSocket 提供了一系列事件，用于处理连接的生命周期。

open：连接成功建立时触发。
message：接收到服务器发送的消息时触发。
close：连接关闭时触发。
error：连接发生错误时触发。

示例：发送和接收消息

// 连接成功建立时触发
ws.onopen = function(event) {
  console.log('连接成功');
  // 发送消息到服务器
  ws.send('Hello, server!');
};

// 接收到服务器发送的消息时触发
ws.onmessage = function(event) {
  console.log('接收到消息：' + event.data);
};

// 连接关闭时触发
ws.onclose = function(event) {
  console.log('连接关闭');
};

// 连接发生错误时触发
ws.onerror = function(error) {
  console.log('发生错误：' + error.message);
};

图片展示

扩展阅读

想了解更多关于 WebSocket 的知识？请访问本站提供的 WebSocket 深入教程。

注意事项

使用 WebSocket 时，请确保遵守相关法律法规，不得用于非法用途。