学习笔记(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 连接。
相关推荐
遇乐的果园1 小时前
前端学习笔记-vue状态管理优化
前端·笔记·学习
从零开始的代码生活_1 小时前
C++ 继承详解:访问控制、对象模型、菱形继承与设计取舍
开发语言·c++·后端·学习·算法
可乐奶茶sky2 小时前
AI Agent 学习
人工智能·学习
摇滚侠2 小时前
Java 全栈开发实战教程 课程笔记 29-33
笔记
茯苓gao2 小时前
嵌入式开发笔记:EtherCAT协议从硬件到软件完整配置指南——从零搭建一套EtherCAT通信系统
笔记·嵌入式硬件·学习
whyTeaFo3 小时前
GAMES101: Lecture 9: Shading 3(Texture Mapping cont.) ppt笔记
笔记
RD_daoyi4 小时前
外链权重暴跌至13%,品牌提及反超传统链接——2026年不做Digital PR,你的独立站等于隐形
运维·网络·学习·机器学习·搜索引擎
chase。4 小时前
【学习笔记】PointWorld:迈向通用机器人操控的3D世界模型
笔记·学习·机器人
AOwhisky5 小时前
Python 学习笔记(第十三期)——运维自动化(下·前篇):远程命令执行——paramiko基础篇
运维·python·学习·云原生·自动化·运维开发·paramiko
前端世界5 小时前
MySQL 基础入门(学习第4天)——约束与 DML 操作详解
数据库·学习·mysql