百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

websocket协议,tcp分包与粘包解决

zhezhongyun 2025-01-14 19:06 71 浏览

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服务器端来和客户端进行数据交互。

本教程需要以下环境:

  1. Ubuntu 12.04
  2. JDK 1.7.0.21
  3. Glassfish 4.0

关注+私信‘资料’MF分享相关资料。内容包括:C/C++,Linux,Nginx,ZeroMQ,MySQL,Redis,fastdfs,MongoDB,ZK,ffmpeg流媒体,CDN,P2P,K8S,Docker,Golang,TCP/IP,协程,嵌入式,ARM,DPDK等等。。。

相关推荐

Excel高效技巧:批量合并重复数据的实用指南

在日常数据处理中,我们常会遇到需要合并相邻重复单元格的场景。无论是整理分类标签、统计重复项还是优化报表格式,手动逐个合并不仅耗时且容易出错。本文将详细介绍三种专业高效的批量合并方法,助您轻松应对各种复...

自主研发高速动车组列车又添新成员(新时代画卷)

数据来源:国铁集团">数据来源:国铁集团CR400AF—S型列车驶过重庆。龙帆摄(人民视觉)">CR400AF—S型列车驶过重庆。龙帆摄(人民视觉)CR400BF—GZ型列车行驶在京...

福彩双色球幻圆图的VBA程序(第一部分)

很多朋友喜欢玩福彩双色球彩票,都知道下面的这张图——福彩双色球红球幻圆图和篮球幻方图。图2是福彩双色球2024104期(红色)和2024105期(黄色)的幻圆图。图3是福彩双色球2024105期(红色...

技巧 | 往MCP服务器添加提示词模板

在我的上一篇文章[1]中,我已经构建了一个本地MCP服务器并向其添加了一些工具。在本文中,我们将向该MCP服务器添加提示词。这是如同上一篇博客的文件结构。但在这里,我为此创建了两个新文件。.├──...

Avalonia日志组件实现与优化指南

背景Avalonia目前没有富文本框可实现日志输出显示,但提供了SelectableTextBlock控件可以替换,这是站长实现的一个日志组件效果:可展示日志时间、日志级别、日志详细内容等,后台除输...

vim编辑器最后几行@代表什么意思

使用vim编辑文本时,屏幕下方会出现一些@符号,这些符号代表什么意思?当vim设置了wrap属性时,若一行太长则就会发生折行现象,此时一个逻辑行就会显示多个屏幕行,如下图由于文件的第2行太长,一个真实...

浅色AI云食堂APP完整代码(二)

以下是整合后的浅色AI云食堂APP完整代码,包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发,支持库存管理、订单处理、财务管理等核心功能,并包含库存预警、数据导出、权限管理等增...

QML控件:TextInput, TextField, TextEdit, TextArea用法及自定义

本文主要介绍基本元素TextInput,TextField,TextEdit,TextArea等的基本属性。Textlnput与TextField为行编辑控件,TextEdit与T...

WPF - 10.特殊容器控件

摘要这里我们要介绍的特殊容器空间是ScrollViewer,该控件与其他控件不同的是,可以支持滚动显示容器内的元素。下面我们举例说明如何在WPF中使用ScrollViewer控件。新建一个WPF程...

rhino6.0 python中ETO的组件案例

1.按钮组件按钮几乎放置在每个对话框上。创建一个新的按钮很简单。使用forms.Button并指定Text显示在按钮面上。除了创建新按钮外,通常还通过.Click事件附加一个操作。使用+=语法,如下...

Rhino6.0 窗口开发使用角本说明

第1个:生成窗口代码第2点:Eto界面主要由Dialog(主程序界面)、Layout(界面布局)和Controls(控件)三个部分构成,逻辑简单且清晰。这个脚本被分为三个主要部分。该import...

手把手教你搭建属于自己的服务器!

最近总是想搭建自己的网站,奈何皮夹里空空如也,服务器也租不起,更别说域名了。于是我就寻思能否自己搭建个服务器,还不要钱呢?还真行!!!经过几天的冲浪,我发现有两个免费的建站工具:Apache和Ng...

HEAT杂志《欧美猛男》排行!“雷神”居然没进前三!

提到猛男的必备条件,应该就是要有着让人看了会流口水的大块肌肉,而一说到猛男,小编第一个想到的就是spanstyle="text-transform:none;background-color:...

Power Query 表格列历遍函数Table.TransformColumns函数

PowerQuery提取数字应该是非常方便的,EH有这样一道题:一看到这题首先想的是PowerQuery,可能中毒有点深,思路挺简单的,PowerQuery有一个从数字到非数字的分列分列后再提取...

自学前端踩了30个坑,终于整理出这份新手避坑指南

这是我在自学前端的第37天,对着一个简单的HTML页面卡了整整一下午。不是逻辑错误,不是语法问题,只是我不知道为什么,一个div死活居中不了。那时候的我,以为前端就是写写页面、调调样式,直到后来才...