WebSocket详解（二）：揭开webSocket的神秘面纱

最新推荐文章于 2025-05-08 19:13:31 发布

程序员盒子技术学院

最新推荐文章于 2025-05-08 19:13:31 发布

阅读量667

点赞数 24

文章标签： websocket 网络协议网络 java

本文链接：https://blog.youkuaiyun.com/weixin_36063821/article/details/144124442

版权

在上篇文章《 006 ｜ WebSocket详解（一）：初识WebSocket前世今生》中分享了Socket套接字、通信端点、web1.0、web2.0、表单提交数据、Ajax提交数据、轮训以及longPolling等基础知识，最终引出WebSocket出现的必要性，建议小伙伴还没看的，先去阅读上篇文章。

本篇文章重点分享WebScoket的实现原理。WebSocket是一种在‌浏览器和‌服务器之间进行全双工通信的协议，通过一个长久的、双向的通信通道来实现实时数据传输。WebSocket协议的底层原理包括‌握手、数据帧格式和数据传输三个主要部分。这篇文章我们也只需要搞清楚这三部分即可。

一、websocket通过“握手”过程来建立连接

这个过程是比较好理解的，客户端发起握手请求（基于http协议发起的），服务端如果支持WebSocket则会响应同意，我们从数据包层面来具体看下这个过程。大家启动webchat，打开控制台，切换到网络请求查看ws请求信息：

我们可以在ws下面看到客户端发起了一个特殊http请求：

ws://localhost:8101/ws/chat/{userId}

客户端发起握手请求

这个请求包含了一些特定的HTTP头信息，其中最重要的是Upgrade头，其值设置为websocket，以及Connection头，其值设置为Upgrade。此外，还会包含Sec-WebSocket-Key（一个Base64编码的随机值），用于服务器生成响应中的Sec-WebSocket-Accept。

示例HTTP请求头：

GET /ws/chat/{userId}
accept-encoding: gzip, deflate, br, zstd
accept-language: zh-CN,zh;q=0.9,en;q=0.8
cache-control: no-cache
connection: Upgrade
host: localhost:8101
origin: http://localhost:8101
pragma: no-cache
sec-websocket-extensions: permessage-deflate; client_max_window_bits
sec-websocket-key: QPxDgo2xMfQZIwPQ0WM/+w==
sec-websocket-version: 13
upgrade: websocket

服务器响应握手请求

如果服务器同意建立WebSocket连接，它会发送一个HTTP响应，其中包含Upgrade和Connection头，确认协议升级和连接保持。服务器还会提供一个Sec-WebSocket-Accept头，其值是客户端Sec-WebSocket-Key的SHA-1散列值，后面加上258EAFA5-E914-47DA-95CA-C5AB0DC85B11，然后再进行Base64编码。

示例HTTP响应头：

connection: upgrade
sec-websocket-accept: lC2Sf4Kzw3KTVQ3M3j/FaaPk2FY=
sec-websocket-extensions: permessage-deflate;client_max_window_bits=15
upgrade: websocket

总结下来，我们在客户端通过new WebSocket()浏览器会发起ws握手请求，服务端如果支持会响应：

new WebSocket("ws://localhost:8101/ws/chat/" + userId);

具体代码详见：/resources/templates/client/chat.html文件，这是webchat pc端对话页面文件，在底部script脚本中先通过loadCurrUserInfo（）函数的调用来获取当前登录用户信息，当判断用户登录成功，可以获取到登录用户userId之后调用了initWebSocket()方来在建议websocket链接。

这里需要注意的是请求websocket建立链接的地址需要时ws:// 或者wss://,两个有什么区别呢，其实同http跟https的区别一样，多出来的这个s时SSL的意思，如果你的服务支持SSL安装证书，拿我们整个网络传输过程是加密安全的，ws也一样，如果服务支持SSL，则需要使用wss:// 来建立链接。

二、数据帧格式

了解完“握手”建立链接过程，来看第二个部分 数据帧传输格式。所以什么是数据帧？如何理解？

WebSocket 协议中的数据帧是 WebSocket 通信的基本单元，用于在客户端和服务器之间传输数据。WebSocket 协议定义了一种二进制格式来封装数据帧，这种格式既高效又灵活，能够支持多种类型的数据传输，包括文本和二进制数据。

比如我们要描述现在的时间，我们会说今天是2024年11月24号23点57分10秒，在这里这个时间就是用户描述日期的基本单元，包括年月日时分秒等几部分的组成。类比websocket的数据帧概念也是一样的，就是用来定义websocket传输数据的一个基本格式/结构，一般会有几部分的组成，方便端点服务更好的理解所传输的数据内容以及传输过程的数据安全性保证等作用。

在 WebSocket 中，数据帧是一段包含特定结构的二进制数据，用于在 WebSocket 连接上传输信息。每个数据帧至少包含以下几个部分：

Fin（Final）位：表示帧是否为最后一个片段。如果Fin位为1，则表示这个消息的结束；如果为0，则表示消息还在继续。

RSV1、RSV2、RSV3位：这些位保留给将来的WebSocket协议扩展使用。

Opcode（操作码）：表示帧的数据类型或操作类型。WebSocket 协议定义了以下几种操作码：0x0：继续帧（Continuation Frame），用于消息的连续部分。0x1：文本帧（Text Frame），用于传输文本数据。0x2：二进制帧（Binary Frame），用于传输二进制数据。0x3-0x7：保留为非控制帧。0x8：关闭帧（Close Frame），用于关闭连接。0x9：心跳帧（Ping Frame），用于检查连接是否活跃。0xA：Pong帧，响应心跳。0xB-0xF：保留为控制帧。

Mask位：如果这个位为1，表示数据帧的“Payload Data”部分被掩码处理，用于安全传输。

Payload Length：表示“Payload Data”的长度。

Masking-key：如果Mask位为1，这个字段会包含一个32位的掩码密钥，用于解码“Payload Data”。

Payload Data：实际要传输的数据内容。

ps：这部分内容有点枯燥、晦涩难懂，很正常，只是一个知识科普，有一个基本的了解即可。