学习笔记(4)HTML5新特性(第3章)- WebSocket

目录

WebSocket 是一种独立的应用层协议(协议标识: ws(明文)/wss(加密,推荐生产环境使用,对应 HTTPS)),并非基于 HTTP,但握手阶段依赖 HTTP 协议。

1、WebSocket与HTTP对比

特性 WebSocket HTTP
协议标识 ws / wss http / https
通信模式 全双工通信(双向实时交互) 半双工通信(请求-响应模式)
连接持久性 长连接(建立后持续保持,除非主动关闭) 短连接(每次请求响应完成后关闭,可通过Keep-Alive保持长连接)
服务端推送能力 有(建立连接,服务启可随时主动推送)
协议开销 首帧握手后,仅需少量帧头控制 每次请求需携带完整头部(如Cookie)
实时性 毫秒级延迟(适合高频数据推送) 依赖轮询(延迟高,资源浪费)
适用场景 实时聊天、在线游戏、股票行情 网页浏览、非实时数据交互
数据格式 支持二进制帧和文本帧 通常为文本(如JSON/XML)

2、WebSocket运行流程

整个流程分为 3 个阶段(握手 + 通信 + 关闭),其中握手阶段依赖 HTTP 协议,后续通信阶段使用 WebSocket 自有协议。

2.1、握手阶段(建立连接)

  1. 客户端通过 JavaScript 创建 WebSocket 实例,向服务器发起连接请求(基于 HTTP GET 方法)。
    客户端请求头中携带关键字段,告知服务器「想要升级为 WebSocket 协议」,核心字段:

Upgrade: websocket:告知服务器需要升级协议为 WebSocket。

Connection: Upgrade:告知服务器这是一个协议升级请求。

Sec-WebSocket-Key:客户端生成的随机字符串,用于服务器验证。

Sec-WebSocket-Version:WebSocket 协议版本(通常为 13)。

  1. 服务器收到请求后,验证通过,返回 HTTP 101 响应(协议切换成功),并携带验证后的字段(Sec-WebSocket-Accept)。
  2. 客户端收到 101 响应后,连接建立成功,后续通信不再使用 HTTP 协议,而是使用 WebSocket 二进制帧协议。

2.2、通信阶段(双向数据传输)

  1. 连接建立后,客户端和服务器可以随时、双向发送数据,无需等待对方请求。
  2. 数据传输格式支持两种:「文本数据」(字符串,通常为 JSON 格式)、「二进制数据」(如图片、文件)。
  3. 双方通过各自的 API 监听对方发送的数据,实时处理。

2.3、关闭阶段(断开连接)

  1. 可由客户端主动关闭(调用 ws.close()),或服务器主动关闭(发送关闭帧)。
  2. 关闭时会触发双方的「关闭事件」,可在事件中做清理工作(如保存状态、提示用户)。
  3. 连接断开后,若需要重新通信,需重新创建 WebSocket 连接。
相关推荐
-Springer-2 小时前
STM32 学习 —— 个人学习笔记2-2(新建工程)
笔记·stm32·学习
tb_first2 小时前
万字超详细苍穹外卖学习笔记4
java·spring boot·笔记·学习·spring·mybatis
日更嵌入式的打工仔2 小时前
C内存布局
笔记
卡布叻_星星3 小时前
达梦数据库笔记之使用教程以及不推荐迁移选择小写
笔记
山岚的运维笔记3 小时前
SQL Server笔记 -- 第15章:INSERT INTO
java·数据库·笔记·sql·microsoft·sqlserver
孞㐑¥3 小时前
算法—队列+宽搜(bfs)+堆
开发语言·c++·经验分享·笔记·算法
代码游侠3 小时前
学习笔记——Linux字符设备驱动开发
linux·arm开发·驱动开发·单片机·嵌入式硬件·学习·算法
charlie1145141913 小时前
嵌入式C++教程——ETL(Embedded Template Library)
开发语言·c++·笔记·学习·嵌入式·etl
李小星同志4 小时前
VID2WORLD: CRAFTING VIDEO DIFFUSION MODELSTO INTERACTIVE WORLD MODELS论文学习
学习