HTTP协议中的Range和Content-Range

 琢磨HTTP协议的每一个细节。


HTTP协议博大精深,每一个细节都应细细体会。


否则,在协议还原的过程中,你会遇到各种问题。


今天,本文中将对HTTP协议的Range和Content-Range进行分析。


Range和Content-Range是 HTTP/1.1中新增的HTTP头字段。它用于从服务器中获取一个大文件的某一部分内容,这极大地提高了HTTP的运行效率,很适合下载软件进行多线程下载和断点续传。


一个典型使用Range字段的HTTP会话如下:

640?wx_fmt=jpeg


在请求头部,使用“Range”字段描述了需要请求的内容起止:

Range: bytes=0-204799


可以看出,对数据内容,它是以字节来计数的,并且其字节的序号是以0开始的。


在响应头部,使用“Content-Range”字段描述了返回的数据内容的起止位置以及整个需要请求的内容的长度:

Content-Range: bytes 0-169704/169705


在字段中,以“/”为分隔,前半部分描述的是当前传输的内容的起止,后半部分为整个需要请求的内容的长度。本文的例子中,整个需要请求内容长度为169705字节,因此返回的数据要比请求头部描述的数据要少。


对含“Range”字段的HTTP数据,其响应码并非通常的200等,而是206和416。206的含义是“Partial Content”,即服务器发回的是请求的那一部分内容。416的含义是“Range Not Satisfiable”,表明客户端请求的数据范围不合法。


在协议还原中,对HTTP协议本身而言,处理Range并不复杂。复杂的是如果需要还原的是一个文件,会涉及到多个HTTP会话间的同步和协作,这需要大家谨慎处理。


对HTTP的还原,如果有一些心得体会,请联系我分享哦。

640?wx_fmt=jpeg

长按进行关注。





  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTTP Range 是 HTTP 协议用于实现断点续传和多线程下载的一种机制。在 Vue 使用 HTTP Range 实现断点续传可以通过以下步骤完成: 1. 在 Vue 组件引入 axios 库: ```javascript import axios from 'axios'; ``` 2. 创建一个 axios 实例,并设置请求头 Range,示例代码如下: ```javascript const instance = axios.create({ headers: { Range: 'bytes=' + start + '-' + end } }); ``` 其,start 和 end 分别表示需要请求数据的起始位置和结束位置。 3. 发送 HTTP 请求,并在响应获取数据的总长度,示例代码如下: ```javascript instance.get(url).then(res => { const contentRange = res.headers['content-range']; const totalLength = contentRange ? parseInt(contentRange.split('/')[1]) : res.data.length; // 处理请求返回的数据 }); ``` 其content-range 是响应头返回的数据范围信息,totalLength 表示需要请求的数据总长度。 4. 将请求返回的数据拼接到已有数据后面,示例代码如下: ```javascript instance.get(url, { responseType: 'arraybuffer' }).then(res => { const data = new Uint8Array(res.data); const buffer = new ArrayBuffer(totalLength); const arr = new Uint8Array(buffer); arr.set(chunk, start); // 处理数据 }); ``` 其,arraybuffer 表示响应数据的类型为二进制数据。 5. 在处理数据时,需要将请求返回的数据拼接到已有数据后面,示例代码如下: ```javascript const blob = new Blob([data], { type: 'application/octet-stream' }); const url = URL.createObjectURL(blob); this.videoSrc = url; ``` 其,data 是请求返回的数据,videoSrc 是需要播放的视频地址。 通过以上步骤,就可以使用 HTTP Range 实现断点续传,在 Vue 播放视频等大文件时,可以提高用户体验,减少视频卡顿等问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值