学习笔记(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 连接。
相关推荐
Xudde.6 分钟前
PwnLab: init 靶机渗透测试(Vulnhub Writeup)
笔记·学习·安全·web安全
2402_8462957710 分钟前
eDNA常用的基因片段
笔记
我命由我1234517 分钟前
Function Calling 模型
人工智能·python·学习·ai·学习方法·ai编程·ai写作
别动我齐刘海37 分钟前
实时控制学习2
linux·c++·人工智能·学习·算法
AI视觉网奇1 小时前
3Dconnexion 按照笔记
笔记
海海不掉头发1 小时前
软件开发方法第七周笔记_CSDN博客
人工智能·笔记·学习·软件工程
Vae_Mars1 小时前
幂等性学习笔记
笔记·学习·wpf
Xudde.2 小时前
HackMe 靶机渗透测试(Vulnhub Writeup)
笔记·学习·安全·web安全
先途检测认证2 小时前
塑料、硅胶、不锈钢材质,欧盟食品接触的测试项目有什么区别?
笔记·材质
hellojackjiang20112 小时前
IM聊天不掉线?生产级WebSocket断线重连、心跳保活实战
websocket·网络协议·网络编程·html5·即时通讯·im