2016-12-27 11 views
1

私は活字体/ JavaScriptに新たなんだと私は、RFC 7233によると、マルチパート/ byteranges応答を2typescript/javascriptを使用してmultipart/byterangesレスポンスを正しく解析する方法は?

を、バイナリファイルのさまざまな部分のためのマルチパート範囲要求(RFC 7233)をやろうとして活字体を使用してのXMLHttpRequestています以下を有する:

HTTP/1.1 206 Partial Content 
Date: Wed, 15 Nov 1995 06:25:24 GMT 
Last-Modified: Wed, 15 Nov 1995 04:58:08 GMT 
Content-Length: 1741 
Content-Type: multipart/byteranges; boundary=THIS_STRING_SEPARATES 

--THIS_STRING_SEPARATES 
Content-Type: application/pdf 
Content-Range: bytes 500-999/8000 

...the first range... 
--THIS_STRING_SEPARATES 
Content-Type: application/pdf 
Content-Range: bytes 7000-7999/8000 

...the second range 
--THIS_STRING_SEPARATES-- 

Iの2つのオプションを参照:

  1. をBINAに境界文字列を変換、(XMLHttpRequest.responseType = "arraybuffer"セット)バイナリデータアレイとしてレスポンスのボディトリートバイト列に変換された境界文字列で区切られた各本体部分のバイナリデータ配列を検索し、各ペイロードのヘッダーを抽出して文字列に変換しますか?または
  2. bodyを文字列として扱い(XMLHttpRequest.responseType = "text")、boundary-stringで区切られたボディ部分を特定し、ペイロードをバイナリデータ配列に変換しますか?

応答にはそれぞれ独自のヘッダー(文字列)とペイロード(バイナリ)を持つ複数の本文部分が含まれているため、javascript/typescriptでそのような応答を処理/解析する適切な方法はありますか?

もっと簡単な方法はありますか?

どのような提案も歓迎されます。ありがとう!

答えて

2

私はあなたが"arraybuffer"応答タイプを使用してそれを行うだろうかさえもわからないんだけど、私はマルチパート解析する前にこれを使用しました/応答をbyteranges:

function parseMultipartBody (body, boundary) { 
    return body.split(`--${boundary}`).reduce((parts, part) => { 
    if (part && part !== '--') { 
     const [ head, body ] = part.trim().split(/\r\n\r\n/g) 
     parts.push({ 
     body: body, 
     headers: head.split(/\r\n/g).reduce((headers, header) => { 
      const [ key, value ] = header.split(/:\s+/) 
      headers[key.toLowerCase()] = value 
      return headers 
     }, {}) 
     }) 
    } 
    return parts 
    }, []) 
} 

とのXMLHttpRequestでそれを使用するためのそれはおそらく次のようになりたい:

const client = new XMLHttpRequest() 
client.open('GET', 'example.pdf', true) 
client.setRequestHeader('Range', 'bytes=500-999,7000-7999') 
client.onreadystatechange = function() { 
    if (client.readyState == 4 && client.status === 206) { 
    const boundary = client.getResponseHeader('Content-Type').match(/boundary=(.+)$/i)[1] 
    if (boundary) console.log('PARTS', parseMultipartBody(client.resposeText, boundary)) 
    } 
} 
client.send() 

あなたの例応答からの出力は次のようになります。

[ 
    { 
    "body": "...the first range...", 
    "headers": { 
     "content-type": "application/pdf", 
     "content-range": "bytes 500-999/8000" 
    } 
    }, 
    { 
    "body": "...the second range", 
    "headers": { 
     "content-type": "application/pdf", 
     "content-range": "bytes 7000-7999/8000" 
    } 
    } 
] 
関連する問題