学习笔记(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 连接。
相关推荐
知识分享小能手12 分钟前
MongoDB入门学习教程,从入门到精通,MongoDB的选择片键 - 完整知识点(16)
数据库·学习·mongodb
知识分享小能手18 分钟前
MongoDB入门学习教程,从入门到精通,MongoDB分片配置完全指南(15)
数据库·学习·mongodb
Dyanic1 小时前
AMSFusion:一种基于注意力机制的自适应多尺度红外与可见光图像融合网络
图像处理·人工智能·学习
少许极端1 小时前
算法奇妙屋(四十三)-贪心算法学习之路10
学习·算法·贪心算法
南境十里·墨染春水1 小时前
Linux学习进展 进程管理命令 及文件压缩解压
linux·运维·笔记·学习
航Hang*2 小时前
第2章:进阶Linux系统——第4节:配置与管理NFS服务器
linux·运维·服务器·笔记·学习·vmware
ZhiqianXia2 小时前
Pytorch 学习笔记(8): PyTorch FX
pytorch·笔记·学习
xuhaoyu_cpp_java2 小时前
Boyer-Moore 投票算法
java·经验分享·笔记·学习·算法
雨浓YN2 小时前
OPC UA 通讯开发笔记 - 基于Opc.Ua.Client
笔记·c#
沪漂阿龙3 小时前
深度剖析神经网络学习:从损失函数到SGD,手写数字识别完整实战
人工智能·神经网络·学习