Http Range

Http Range规范定义:http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.35

14.35 Range

14.35.1 Byte Ranges

Since all HTTP entities are represented in HTTP messages as sequences of bytes, the concept of a byte range is meaningful for any HTTP entity. (However, not all clients and servers need to support byte- range operations.)

Byte range specifications in HTTP apply to the sequence of bytes in the entity-body (not necessarily the same as the message-body).

A byte range operation MAY specify a single range of bytes, or a set of ranges within a single entity.

       ranges-specifier = byte-ranges-specifier
       byte-ranges-specifier = bytes-unit "=" byte-range-set
       byte-range-set  = 1#( byte-range-spec | suffix-byte-range-spec )
       byte-range-spec = first-byte-pos "-" [last-byte-pos]
       first-byte-pos  = 1*DIGIT
       last-byte-pos   = 1*DIGIT

The first-byte-pos value in a byte-range-spec gives the byte-offset of the first byte in a range. The last-byte-pos value gives the byte-offset of the last byte in the range; that is, the byte positions specified are inclusive. Byte offsets start at zero.

If the last-byte-pos value is present, it MUST be greater than or equal to the first-byte-pos in that byte-range-spec, or the byte- range-spec is syntactically invalid. The recipient of a byte-range- set that includes one or more syntactically invalid byte-range-spec values MUST ignore the header field that includes that byte-range- set.

If the last-byte-pos value is absent, or if the value is greater than or equal to the current length of the entity-body, last-byte-pos is taken to be equal to one less than the current length of the entity- body in bytes.

By its choice of last-byte-pos, a client can limit the number of bytes retrieved without knowing the size of the entity.

       suffix-byte-range-spec = "-" suffix-length
       suffix-length = 1*DIGIT

A suffix-byte-range-spec is used to specify the suffix of the entity-body, of a length given by the suffix-length value. (That is, this form specifies the last N bytes of an entity-body.) If the entity is shorter than the specified suffix-length, the entire entity-body is used.

If a syntactically valid byte-range-set includes at least one byte- range-spec whose first-byte-pos is less than the current length of the entity-body, or at least one suffix-byte-range-spec with a non- zero suffix-length, then the byte-range-set is satisfiable. Otherwise, the byte-range-set is unsatisfiable. If the byte-range-set is unsatisfiable, the server SHOULD return a response with a status of 416 (Requested range not satisfiable). Otherwise, the server SHOULD return a response with a status of 206 (Partial Content) containing the satisfiable ranges of the entity-body.

Examples of byte-ranges-specifier values (assuming an entity-body of length 10000):

      - The first 500 bytes (byte offsets 0-499, inclusive):  bytes=0-
        499
      - The second 500 bytes (byte offsets 500-999, inclusive):
        bytes=500-999
      - The final 500 bytes (byte offsets 9500-9999, inclusive):
        bytes=-500
      - Or bytes=9500-
      - The first and last bytes only (bytes 0 and 9999):  bytes=0-0,-1
      - Several legal but not canonical specifications of the second 500
        bytes (byte offsets 500-999, inclusive):
        bytes=500-600,601-999
        bytes=500-700,601-999

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTTP RangeHTTP 协议中用于实现断点续传和多线程下载的一种机制。在 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 中播放视频等大文件时,可以提高用户体验,减少视频卡顿等问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值