HTML5 WebSocket

HTML5 WebSocket 是一种基于 Web的协议,它使得客户端和服务器之间能够建立一个持久的、双向的通信连接。这意味着客户端和服务器可以随时相互发送数据,而无需像传统的 HTTP请求那样,每次都要重新建立连接。WebSocket 协议在实时应用程序中非常有用,比如即时聊天、在线游戏、金融应用等。

1 WebSocket 的基本工作原理

  1. 连接建立:
  • 客户端向服务器发起一个 WebSocket 握手请求,使用 HTTP 协议。握手请求的一个关键点是客户端会请求一个 Upgrade

    头,将协议从 HTTP 升级为 WebSocket。

  • 如果服务器支持 WebSocket,它会响应一个 HTTP 101 状态码(切换协议),然后连接正式建立,之后客户端和服务器之间的通信就变成了 WebSocket 协议。

  1. 双向通信:
  • 一旦 WebSocket 连接建立,客户端和服务器可以通过这个持久连接发送消息。通信是全双工的,即双方可以同时发送和接收数据。
  1. 连接关闭:
  • 客户端或服务器可以发起连接关闭请求,结束 WebSocket 通信。关闭时,双方会交换一段消息来确认关闭过程。

2 WebSocket 基本 API

HTML5 WebSocket API 提供了创建 WebSocket 连接、发送和接收消息、以及处理连接关闭和错误的功能。以下是 WebSocket API 的基本用法:

javascript 复制代码
// 创建 WebSocket 连接
let socket = new WebSocket('ws://example.com/socket');

// 监听连接打开事件
socket.onopen = function(event) {
    console.log('连接已建立');
    // 发送数据
    socket.send('Hello, Server!');
};

// 监听服务器发送的消息
socket.onmessage = function(event) {
    console.log('收到消息: ', event.data);
};

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log('连接已关闭', event);
};

// 监听错误事件
socket.onerror = function(error) {
    console.log('发生错误: ', error);
};

// 关闭连接
socket.close();

关键点解释

  1. WebSocket 构造函数:
  • new WebSocket(url) 用于创建 WebSocket 对象,其中 url 是服务器的 WebSocket 地址,通常是以 ws:// 或 wss:// 开头。
javascript 复制代码
ws:// 是 WebSocket 的非加密协议。
javascript 复制代码
wss:// 是 WebSocket 的加密协议,类似于 HTTPS。
  1. 事件处理器:
  • onopen: 连接成功建立后触发。

  • onmessage:接收到消息时触发。

  • onerror:发生错误时触发。

  • onclose:连接关闭时触发。

  1. 发送消息:

socket.send(data) 用于发送数据到服务器。数据可以是文本或二进制数据(如 Blob 或 ArrayBuffer)。

  1. 关闭连接:
  • socket.close() 用于关闭 WebSocket 连接,通常在通信完成或页面卸载时调用。

3 WebSocket 与 HTTP 协议的区别

特性 WebSocket HTTP
协议类型 ws:// 或 wss:// http:// 或 https://
连接方式 双向持久连接 每次请求都建立和断开连接
数据交换 双向数据传输(全双工) 单向请求-响应模型(半双工)
性能 更高效,减少了重复建立连接的开销 每个请求都需要独立的连接,效率较低
实时性 支持实时数据传输 通常用于请求-响应模式,不适合实时应用
相关推荐
charlie11451419117 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头17 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd17 小时前
3种XSS攻击简单案例
前端·xss
盖头盖18 小时前
【xss基本介绍】
前端·xss
一枚前端小能手18 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖18 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号18 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组18 小时前
React JSX 语法讲解
前端·react.js·前端框架
小高00718 小时前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手18 小时前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript