您当前的位置:首页 > 电脑百科 > 网络技术 > 网络知识

WebSocket 通信过程与实现

时间:2019-11-06 10:01:54  来源:  作者:
作者:wzhvictor
来源:https://segmentfault.com/a/1190000014643900

 

什么是 WebSocket ?

WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输。但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现。

以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较大。另外一种轮询就是采用 long poll 的方式,这就跟打电话差不多,没收到消息就一直不挂电话,也就是说,客户端发起连接后,如果没消息,就一直不返回 Response 给客户端,连接阶段一直是阻塞的。

而 WebSocket 解决了 HTTP 的这几个难题。当服务器完成协议升级后( HTTP -> WebSocket ),服务端可以主动推送信息给客户端,解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手,服务端就能一直与客户端保持通信,直到关闭连接,这样就解决了服务器需要反复解析 HTTP 协议,减少了资源的开销。

 

WebSocket 通信过程与实现

 

随着新标准的推进,WebSocket 已经比较成熟了,并且各个主流浏览器对 WebSocket 的支持情况比较好(不兼容低版本 IE,IE 10 以下),有空可以看看。

 

WebSocket 通信过程与实现

 

使用 WebSocket 的时候,前端使用是比较规范的,js 支持 ws 协议,感觉类似于一个轻度封装的 Socket 协议,只是以前需要自己维护 Socket 的连接,现在能够以比较标准的方法来进行。

 

WebSocket 通信过程与实现

 

 

下面我们就结合上图具体来聊一下 WebSocket 的通信过程。

建立连接

客户端请求报文 Header

客户端请求报文:

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

与传统 HTTP 报文不同的地方:

Upgrade: websocket
Connection: Upgrade

这两行表示发起的是 WebSocket 协议。

Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

Sec-WebSocket-Key 是由浏览器随机生成的,提供基本的防护,防止恶意或者无意的连接。

Sec-WebSocket-Version 表示 WebSocket 的版本,最初 WebSocket 协议太多,不同厂商都有自己的协议版本,不过现在已经定下来了。如果服务端不支持该版本,需要返回一个 Sec-WebSocket-Versionheader,里面包含服务端支持的版本号。

创建 WebSocket 对象:

var ws = new websocket("ws://127.0.0.1:8001");

ws 表示使用 WebSocket 协议,后面接地址及端口

完整的客户端代码:

WebSocket 通信过程与实现

 

服务端响应报文 Header

首先我们来看看服务端的响应报文:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

我们一行行来解释

  • 首先,101 状态码表示服务器已经理解了客户端的请求,并将通过 Upgrade 消息头通知客户端采用不同的协议来完成这个请求;
  • 然后,Sec-WebSocket-Accept 这个则是经过服务器确认,并且加密过后的 Sec-WebSocket-Key;
  • 最后,Sec-WebSocket-Protocol 则是表示最终使用的协议。

Sec-WebSocket-Accept 的计算方法:

  • 将 Sec-WebSocket-Key 跟 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 拼接;
  • 通过 SHA1 计算出摘要,并转成 base64 字符串。

注意:Sec-WebSocket-Key/Sec-WebSocket-Accept 的换算,只能带来基本的保障,但连接是否安全、数据是否安全、客户端 / 服务端是否合法的 ws 客户端、ws 服务端,其实并没有实际性的保证。

创建主线程,用于实现接受 WebSocket 建立请求:

WebSocket 通信过程与实现

 

进行通信

服务端解析 WebSocket 报文

Server 端接收到 Client 发来的报文需要进行解析

Client 包格式

 

WebSocket 通信过程与实现

 

 

1、FIN: 占 1bit

0:不是消息的最后一个分片

1:是消息的最后一个分片

2、RSV1, RSV2, RSV3:各占 1bit

一般情况下全为 0。当客户端、服务端协商采用 WebSocket 扩展时,这三个标志位可以非0,且值的含义由扩展进行定义。如果出现非零的值,且并没有采用 WebSocket 扩展,连接出错。

3、Opcode: 4bit

  • %x0:表示一个延续帧。当 Opcode 为 0 时,表示本次数据传输采用了数据分片,当前收到的数据帧为其中一个数据分片;
  • %x1:表示这是一个文本帧(text frame);
  • %x2:表示这是一个二进制帧(binary frame);
  • %x3-7:保留的操作代码,用于后续定义的非控制帧;
  • %x8:表示连接断开;
  • %x9:表示这是一个心跳请求(ping);
  • %xA:表示这是一个心跳响应(pong);
  • %xB-F:保留的操作代码,用于后续定义的控制帧。

4、Mask: 1bit

表示是否要对数据载荷进行掩码异或操作。

0:否

1:是

5、Payload length: 7bit or (7 + 16)bit or (7 + 64)bit

表示数据载荷的长度

  • 0~126:数据的长度等于该值;
  • 126:后续 2 个字节代表一个 16 位的无符号整数,该无符号整数的值为数据的长度;
  • 127:后续 8 个字节代表一个 64 位的无符号整数(最高位为 0),该无符号整数的值为数据的长度。

6、Masking-key: 0 or 4bytes

  • 当 Mask 为 1,则携带了 4 字节的 Masking-key;
  • 当 Mask 为 0,则没有 Masking-key。

掩码算法:按位做循环异或运算,先对该位的索引取模来获得 Masking-key 中对应的值 x,然后对该位与 x 做异或,从而得到真实的 byte 数据。

注意:掩码的作用并不是为了防止数据泄密,而是为了防止早期版本的协议中存在的代理缓存污染攻击(proxy cache poisoning attacks)等问题。

7、Payload Data: 载荷数据

解析 WebSocket 报文代码如下:

WebSocket 通信过程与实现

 

服务端发送 WebSocket 报文

返回时不携带掩码,所以 Mask 位为 0,再按载荷数据的大小写入长度,最后写入载荷数据。

struct 模块解析

struct.pack(fmt, v1, v2, ...)

按照给定的格式 fmt,把数据封装成字符串 ( 实际上是类似于 C 结构体的字节流 )

struct 中支持的格式如下表:

 

WebSocket 通信过程与实现


为了同 C 语言中的结构体交换数据,还要考虑有的 C 或 C++ 编译器使用了字节对齐,通常是以 4 个字节为单位的 32 位系统,故而 struct 根据本地机器字节顺序转换。可以用格式中的第一个字符来改变对齐方式,定义如下:

 

WebSocket 通信过程与实现

 

 

发送 WebSocket 报文代码如下:

WebSocket 通信过程与实现

 

总结

没有其他能像 WebSocket 一样实现全双工传输的技术了,迄今为止,大部分开发者还是使用 Ajax 轮询来实现,但这是个不太优雅的解决办法,WebSocket 虽然用的人不多,可能是因为协议刚出来的时候有安全性的问题以及兼容的浏览器比较少,但现在都有解决。如果你有这些需求可以考虑使用 WebSocket:

  • 多个用户之间进行交互;
  • 需要频繁地向服务端请求更新数据。

比如弹幕、消息订阅、多玩家游戏、协同编辑、股票基金实时报价、视频会议、在线教育等需要高实时的场景。



Tags:WebSocket   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
前言:作为一个刚踏入职场的实习生,我很幸运参加了某个政府项目,并且在项目中负责一个核心模块功能的开发,而不是从头到尾对数据库的crud。虽然我一直心里抱怨我的工作范围根本...【详细内容】
2021-05-24  Tags: WebSocket  点击:(81)  评论:(0)  加入收藏
1)通知功能:保持一个长连接,当服务端游新的消息,能够实时的推送到使用方。像知乎的点赞通知、评论等,都可以使用WebSocket通信。某些使用H5的客户端,为了简化开发,也会使用WebSocke...【详细内容】
2021-03-03  Tags: WebSocket  点击:(74)  评论:(0)  加入收藏
背景:一般与服务端交互频繁的需求,可以使用轮询机制来实现。然而一些业务场景,比如游戏大厅、直播、即时聊天等,这些需求都可以或者说更适合使用长连接来实现,一方面可以减少轮询...【详细内容】
2020-12-17  Tags: WebSocket  点击:(72)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送...【详细内容】
2020-11-11  Tags: WebSocket  点击:(46)  评论:(0)  加入收藏
前段时间我有这样一个需求,想和一个异地的人一起看电影,先后在网上找了一些方案,不过那几个案都有一些缺点...【详细内容】
2020-10-21  Tags: WebSocket  点击:(42)  评论:(0)  加入收藏
1. 前言Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数...【详细内容】
2020-09-18  Tags: WebSocket  点击:(46)  评论:(0)  加入收藏
前言服务器和客户端保持长连接通信,实现方式比较多。有很多成熟的框架可以完成,底层无非都是对Socket流的封装和使用。一、SOCKET原理Socket大致是指在端到端的一个连接中,这...【详细内容】
2020-08-06  Tags: WebSocket  点击:(38)  评论:(0)  加入收藏
1. 心跳重连原由 心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。websocket连接断开有以下两种情况:前端断开在使用websocket过程中,可能会出现...【详细内容】
2020-07-29  Tags: WebSocket  点击:(260)  评论:(0)  加入收藏
用这些简化了 WebSockets 的开源支持工具来控制你的流媒体。 来源:https://linux.cn/article-12347-1.html 作者:Kevin Sonney 译者:Xingyu.Wang(本文字数:4340,阅读时长大约:6 分...【详细内容】
2020-06-25  Tags: WebSocket  点击:(42)  评论:(0)  加入收藏
前言项目中有即时聊天的需求,经过调研我们采用了socket.io自己实现了一个聊天服务器。开始的一段时间由于用户不是很多,消息的发送接收都还算流畅,最近随着在线用户数量飙升,每...【详细内容】
2020-05-04  Tags: WebSocket  点击:(80)  评论:(0)  加入收藏
▌简易百科推荐
这里来详细了解一下Sip协议。以下内容大致分为以下几个部分: 协议简介 两种Sip会话模式Session Model与Pager Model; Sip 消息体结构 Sip 消息举例一、Sip协议简介:SIP(Session...【详细内容】
2021-07-14  移动信息杂谈    Tags:SIP 协议   点击:(7)  评论:(0)  加入收藏
从字面意义上讲,有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下,它只是利用 IP 进行通信时所必须用到的协议群...【详细内容】
2021-07-14  一一的妈妈哈哈    Tags:TCP/IP协议   点击:(2)  评论:(0)  加入收藏
最近,有不少同学都在问我这个问题。其实无论是哪个行业、哪个岗位,每个人都对自己的岗位有一个“核心”技术的理解。就像做网工,我总觉得理论扎实和学习能力才是最重要的技术,而...【详细内容】
2021-07-12  网络工程师俱乐部  公众号  Tags:网络工程师   点击:(5)  评论:(0)  加入收藏
“引擎”的潜台词就是增长,不增长就意味着被别人蚕食。最近关注到字节跳动的巨量引擎和快手的磁力引擎这两大“引擎”,是因为在朋友圈里先后看到这两家做的两组相似性颇高的营...【详细内容】
2021-07-12  未来价值研究院    Tags:巨量引擎   点击:(5)  评论:(0)  加入收藏
SSL 缩写 Secure Socket Layer ,是几十年前网景公司制定的保证服务器和客户端安全通信的一种协议,大量使用在http的安全通信中,这里的安全通信有两层含义: 通信双方身份的认证 ...【详细内容】
2021-07-09  尚硅谷教育    Tags:SSL   点击:(5)  评论:(0)  加入收藏
之前有读者问了我这么个问题: 大致问题是,TCP 的 Keepalive 和 HTTP 的 Keep-Alive 是一个东西吗?这是个好问题,应该有不少人都会搞混,因为这两个东西看上去太像了,很容易误以为是...【详细内容】
2021-07-09  小林Coding  公众号  Tags:Keepalive   点击:(6)  评论:(0)  加入收藏
网络即服务(NaaS),指客户可以通过互联网访问第三方网络传输服务,并采用基于订阅模式的付费方式。NaaS使企业能够在4-7层“如软件定义广域网 (SD-WAN)和应用交付控制器(ADC)”...【详细内容】
2021-07-06  IT168企业级    Tags:NaaS   点击:(9)  评论:(0)  加入收藏
IT之家 7 月 4 日消息 今日中国电信再次在微博进行科普,带来的是晚上睡觉要不要关闭 WiFi 路由器的问题。官方表示,我们平常使用的 WiFi 无线电波,属于“非电离辐射”,辐射剂量...【详细内容】
2021-07-05    IT之家  Tags: 路由器   点击:(9)  评论:(0)  加入收藏
今年 6 月 17 日下午,在线服务普遍中断。在澳大利亚,它影响了该国三大银行、国家邮政服务、国家储备银行和一家航空公司。距离澳大利亚更远的地方,停电影响了香港证券交易所和...【详细内容】
2021-07-05  飞鱼在浪屿    Tags:CDN   点击:(14)  评论:(0)  加入收藏
RPC(Remote Procedure Call),是一个大家既熟悉又陌生的词,只要涉及到通信,必然需要某种网络协议。我们很可能用过HTTP,那么RPC又和HTTP有什么区别呢?RPC还有什么特点,常见的选型有哪...【详细内容】
2021-07-04  linux技术栈    Tags:RPC   点击:(23)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条