websocket协议,tcp分包与粘包解决
myzbx 2024-12-12 13:36 34 浏览
WebSocket介绍与原理
文章总结有福利送
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。
——百度百科
目的:即时通讯,替代轮询
网站上的即时通讯是很常见的,比如网页的QQ,聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。
HTTP协议是非持久化的,单向的网络协议,在建立连接后只允许浏览器向服务器发出请求后,服务器才能返回相应的数据。当需要即时通讯时,通过轮询在特定的时间间隔(如1秒),由浏览器向服务器发送Request请求,然后将最新的数据返回给浏览器。
缺点:会导致过多不必要的请求,浪费流量和服务器资源,每一次请求、应答,都浪费了一定流量在相同的头部信息上
然而WebSocket的出现可以弥补这一缺点。在WebSocket中,只需要服务器和浏览器通过HTTP协议进行一个握手的动作,然后单独建立一条TCP的通信通道进行数据的传送。
原理
WebSocket protocol 是HTML5一种新的协议。它与HTTP协议一样是基于应用层的协议。它实现了浏览器与服务器全双工通信(full-duplex)。但它实际上是基于TCP协议,它与HTTP协议的关系WebSocket 的握手被http 服务器当做 Upgrade request http包处理,服务器响应过后协议升级为TCP连接,连接建立后client 发送websocket 握手请求.目前在JavaEE7中也实现了WebSocket协议的支持。 websocket api在浏览器端的广泛实现似乎只是一个时间问题了, 值得注意的是服务器端没有标准的api, 各个实现都有自己的一套api, 并且jcp也没有类似的提案, 所以使用websocket开发服务器端有一定的风险.可能会被锁定在某个平台上或者将来被迫升级.
使用场景
现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。这样浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽。WebSocket 协议中,在以下场景中会给我们带来很大便利:
实时通讯
服务器主动向所有客户端进行消息推送
以及越来越火的基于H5手机APP的聊天室以及消息推送
与传统socket的区别
Socket 其实并不是一个协议。它工作在 OSI 模型会话层(第5层),是为了方便大家直接使用更底层协议(一般是 TCP 或 UDP )而存在的一个抽象层。而且而且它大都在java或者C++这类的编程语言中实现,而在浏览器的基于javascript之类的脚本解释型语言中没有实现。而websocket协议大多数浏览器都已经支持,可以让我们在浏览器中像socket通信一样的去使用TCP直接通信
相同点
1. 都是一样基于TCP的,都是可靠性传输协议。
2. 都是应用层协议。
不同点
1. WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息。HTTP是单向的。
2. WebSocket是需要握手进行建立连接的。
联系
WebSocket在建立握手时,数据是通过HTTP传输的。但是建立之后,在真正传输时候是不需要HTTP协议的。
WebSocket与Socket的关系
Socket其实并不是一个协议,而是为了方便使用TCP或UDP而抽象出来的一层,是位于应用层和传输控制层之间的一组接口。
Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议。
当两台主机通信时,必须通过Socket连接,Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议,IP协议的连接则依赖于链路层等更低层次。
WebSocket 机制
以下简要介绍一下 WebSocket 的原理及运行机制。
WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:
WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据,就像 Socket 一样;
WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接,连接成功后才能相互通信。
非 WebSocket 模式传统 HTTP 客户端与服务器的交互如下图所示:
图 1. 传统 HTTP 请求响应客户端服务器交互图
使用 WebSocket 模式客户端与服务器的交互如下图:
图 2.WebSocket 请求响应客户端服务器交互图
上图对比可以看出,相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket 是类似 Socket 的 TCP 长连接的通讯模式,一旦 WebSocket 连接建立后,后续数据都以帧序列的形式传输。在客户端断开 WebSocket 连接或 Server 端断掉连接前,不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,实时性优势明显。
websocket实现websocket数据包协议详解
WebSocket协议主要分为两部分,第一部分是连接许可验证和验证后的数据交互.连接许可验证比较简单,由Client发送一个类似于HTTP的请求,服务端获取请求后根据请求的KEY生成对应的值并返回
.连接请求内容:
12345678GET / HTTP/1.1Connection:UpgradeHost:127.0.0.1:8088Origin:nullSec-WebSocket-Extensions:x-webkit-deflate-frameSec-WebSocket-Key:puVOuWb7rel6z2AVZBKnfw==Sec-WebSocket-Version:13Upgrade:websocket
服务端接收请求后主要是成针对Sec-WebSocket-Key生成对就Sec-WebSocket-Accept 的key,生成Sec-WebSocket-Accept 值比较简单就是Sha1(Sec-WebSocket-Key+258EAFA5-E914-47DA-95CA-C5AB0DC85B11)即可,C#代码如下
:12345SHA1 sha1 = new SHA1CryptoServiceProvider();byte[] bytes_sha1_in = Encoding.UTF8.GetBytes(request.SecWebSocketKey+ "258EAFA5-E914-47DA-95CA-C5AB0DC85B11");byte[] bytes_sha1_out = sha1.ComputeHash(bytes_sha1_in);string str_sha1_out = Convert.ToBase64String(bytes_sha1_out);response.SecWebSocketAccept = str_sha1_out;
服务端返回内容:
12345678HTTP/1.1 101 Switching ProtocolsConnection:UpgradeServer:beetle websocket serverUpgrade:WebSocketDate:Mon, 26 Nov 2012 23:42:44 GMTAccess-Control-Allow-Credentials:trueAccess-Control-Allow-Headers:content-typeSec-WebSocket-Accept:FCKgUr8c7OsDsLFeJTWrJw6WO8Q=
经过服务器的返回处理后连接握手成功,后面就可以进行TCP通讯.WebSocket在握手后发送数据并像下层TCP协议那样由用户自定义,还是需要遵循对应的应用协议规范...这也是在文章之说没有直接基于Socket tcp方便的原因.
数据交互协议:
这图有点难看懂...里面包括几种情况有掩码,数据长度小于126,小于UINT16和小于UINT64等几种情况.后面会慢慢详细说明.整个协议头大概分三部分组成,第一部分是描述消息结束情况和类型,第二部分是描述是否存在掩码长度,第三部分是扩展长度描述和掩码值.从图中可以看到WebSocket协议数据主要通过头两个字节来描述数据包的情况
第一个字节
最高位用于描述消息是否结束,如果为1则该消息为消息尾部,如果为零则还有后续数据包;后面3位是用于扩展定义的,如果没有扩展约定的情况则必须为0.可以通过以下c#代码方式得到相应值
mDataPackage.IsEof = (data[start] >> 7) > 0;
最低4位用于描述消息类型,消息类型暂定有15种,其中有几种是预留设置.c#代码可以这样得到消息类型:
12int type = data[start] & 0xF;mDataPackage.Type = (PackageType)type;
第二个字节
消息的第二个字节主要用一描述掩码和消息长度,最高位用0或1来描述是否有掩码处理,可以通过以下c#代码方式得到相应值
1bool hasMask = (data[start] >>7) > 0
剩下的后面7位用来描述消息长度,由于7位最多只能描述127所以这个值会代表三种情况,一种是消息内容少于126存储消息长度,如果消息长度少于UINT16的情况此值为126,当消息长度大于UINT16的情况下此值为127;这两种情况的消息长度存储到紧随后面的byte[],分别是UINT16(2位byte)和UINT64(4位byte).可以通过以下c#代码方式得到相应值
123456789101112mPackageLength = (uint)(data[start] & 0x7F);start++;if (mPackageLength == 126){ mPackageLength = BitConverter.ToUInt16(data, start); start = start + 2;}else if (mPackageLength == 127){ mPackageLength = BitConverter.ToUInt64(data, start); start = start + 8;}
如果存在掩码的情况下获取4位掩码值:
12345678if (hasMask){ mDataPackage.Masking_key = new byte[4]; Buffer.BlockCopy(data, start, mDataPackage.Masking_key, 0, 4); start = start + 4; count = count - 4;}
获取消息体当得到消息体长度后就可以获取对应长度的byte[],有些消息类型是没有长度的如%x8 denotes a connection close.对于Text类型的消息对应的byte[]是相应字符的UTF8编码.获取消息体还有一个需要注意的地方就是掩码,如果存在掩码的情况下接收的byte[]要做如下转换处理:
123456if (mDataPackage.Masking_key != null) { int length = mDataPackage.Data.Count; for (var i = 0; i < length; i++) mDataPackage.Data.Array[i] = (byte)(mDataPackage.Data.Array[i] ^ mDataPackage.Masking_key[i % 4]); }
总结;
HTML5给Web浏览器带来了全双工TCP连接websocket标准服务器的能力。
换句话说,浏览器能够与服务器建立连接,通过已建立的通信信道来发送和接收数据而不需要由HTTP协议引入额外其他的开销来实现。
在本教程中我们将在Java EE环境下实现一个简单的websockect服务器端来和客户端进行数据交互。
本教程需要以下环境:
- Ubuntu 12.04
- JDK 1.7.0.21
- Glassfish 4.0
关注+私信‘资料’MF分享相关资料。内容包括:C/C++,Linux,Nginx,ZeroMQ,MySQL,Redis,fastdfs,MongoDB,ZK,ffmpeg流媒体,CDN,P2P,K8S,Docker,Golang,TCP/IP,协程,嵌入式,ARM,DPDK等等。。。
相关推荐
- 泰国野猪足球队一17岁队员在英去世,曾被困洞穴18天后奇迹获救
-
泰国网图当地时间2月14日,现年17岁的泰国野猪队队员多姆(Dom,本名DuangpetchPromthep)在英国去世,他曾于2018年被困于洞穴18天后奇迹获救。据英国广播公司(BBC)报道,...
- 你需要知道的 19 个 console 实用调试技巧
-
大家好,我是Echa。之前给大家介绍了《H5移动端调试攻略——超实用》,有兴趣的小伙们可以回过头看看。浏览器的开发者工具为我们提供了强大的调试系统,可以用来查看DOM树结构、CSS样式调试、动画调试...
- 深圳嘉华学校:什么是JQuery?_深圳嘉华职业技术学校
-
什么是JQuery?这里将由北大青鸟深圳嘉华来介绍下关于JQuery部分知识,希望能让大家对JQuery有初步的映象。JQuery是继prototype之后又一个优秀的Javascript库。它是轻量...
- Vue3 实现一个简单的放大动画_vue放大图片
-
设计思路定位动画我们在之前已经实现了。那么这里只要考虑如何实现放大动画,最后将两者结合起来就好。从后端拿到的返回值是一个固定长度的数组,所以这里还是用div利用flex布局将图片平铺展示,利用...
- JavaScript 事件循环机制详解_js事件循环队列
-
记录、分享IT相关知识和见闻!想要了解更多软件相关知识的朋友!记得右上角添加【关注】,支持一下!JavaScript是单线程语言,意味着同一时间只能执行一个任务。为了处理异步操作(如定时器、网络请求...
- 前端性能优化新维度:渲染流水线深度解析
-
当开发者沉迷于框架选型和语法特性时,浏览器渲染引擎正在以每秒60帧的速度执行着精密计算。本文将揭示现代浏览器的渲染流水线工作原理,探索超越传统性能优化的新思路。一、渲染流水线的五大阶段1.JavaSc...
- 如果看未来,DOM应该也不是答案_如果知道未来
-
Managershare:未来,还会有连通APP的APP。不过,一切都不会基于网页。有一个词"手机网站"(mobileweb),指供手机浏览的网站,但它是不存在的。人们提到"移动互联网"的时候,其实...
- Springboot之登录模块探索(含Token,验证码,网络安全等知识)
-
简介登录模块很简单,前端发送账号密码的表单,后端接收验证后即可~淦!可是我想多了,于是有了以下几个问题(里面还包含网络安全问题):1.登录时的验证码2.自动登录的实现3.怎么维护前后端登录状态在这和大...
- 总结100+前端优质库,让你成为前端百事通
-
1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...
- 基于ssm的XATU实验室安全管理系统 [SSM]-计算机毕业设计源码+文档
-
摘要:实验室安全管理是高校和科研机构工作中的重要环节。本文介绍了基于SSM(Spring+SpringMVC+MyBatis)框架的XATU实验室安全管理系统。该系统涵盖系统用户管理、安全教...
- Dynamics.js – 创建逼真的物理动画的 JS 库
-
Dynamics.js是一个用于创建物理动画JavaScript库。你只需要把dynamics.js引入你的页面,然后就可以激活任何DOM元素的CSS属性动画,也可以结合SVG使...
- Vue3 神级工具:终于可以实现打字的动画效果了!
-
Typed.js是一个轻量级的JavaScript库,用于在网页上实现打字机动画效果。它支持自定义打字速度、循环模式、回调函数等,非常适合用于动态展示标语、代码片段或交互式文本效果。核心特性打字...
- 创建酷炫动画效果的10个JavaScript库
-
Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS和SVG属性的DOM(文本对象模型)元素,换句话说,Dynamics.js适用于所有Java...
- 《速度与激情》动画剧首曝剧照,12月26日奈飞上线
-
新京报讯11月19日,《速度与激情》动画剧《速度与激情:间谍赛车手》发布首批剧照,并宣布将于12月26日在奈飞上线。该剧由范·迪塞尔担任制片人,他的女儿SimiliceDiesel加盟配音。此外,...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)