关于前端:结合融云-WebSDK-了解-WebSocket-基本原理

联合融云 WebSDK 理解 WebSocket 基本原理

近期应用融云开发聊天页面, 通过抓包, 发现融云 SDK 应用 WebSocket 实现与服务端通信, 因而简略理解 WebSocket 的实现原理

融云 SDK 文档: https://docs.rongcloud.cn/v4/

WebSocket 与 HTTP

1、HTTP 协定没有为了 WebSocket 的呈现扭转

2、WebSocket 属于 HTTP 之后的新协定

3、两者有交加, 也各有不同

4、WebSocket 借用 HTTP 协定实现一部分握手

WebSocket 握手

通过抓包融云 WebSocket 申请, 重点关注以下几个字段

<img src=”https://wyh29.gitee.io/image/ws-req.jpeg” width=”400″>

以上为发动 WebSocekt 申请抓包, 首先关注比 HTTP 多出的数值:

// 告知服务器, 发动的是 WebSocket 协定, 服务需进行 WebSocket 解决
Upgrade: websocket
Connection: Upgrade

Sec-WebSocket-Key: aI0TsvW7jltfmNOF+1eSqg== // Base64, 浏览器随机生成. 与前面服务端响应的 Sec-WebSocket-Accept 配套, 提供根本的防护. 比方歹意的连贯, 或者无心的连贯
Sec-WebSocket-Version: 13 // 示意 websocket 的版本. 如果服务端不反对该版本, 须要返回一个 Sec-WebSocket-Versionheader, 外面蕴含服务端反对的版本号

再查看 Response Headers:

<img src=”https://wyh29.gitee.io/image/ws-res.png” width=”400″>

Sec-WebSocket-Accept: OfEosYlCAcvV/jdwbW33VU0B50k= // 平安验证. 依据客户端申请首部 Sec-WebSocket-Key 计算 (base64(sha1($Sec-WebSocket-Accept,'258EAFA5-E914-47DA-95CA-C5AB0DC85B11')) )

// 告知客户端, 已胜利降级为 WebSocket
Upgrade: websocket
Connection: Upgrade

代替计划

浏览器没有完满代替 WebSocket 的计划. 只能用 ajax 轮询 或 长轮训(long poll) 模仿, 两者都有性能问题且消耗资源

ajax 轮询、长轮训阐明: https://zhuanlan.zhihu.com/p/25690011