随便写写之js的二进制处理

前言

在JavaScript中，无论是前端还是后端都有很多与二进制相关的概念，例如 Buffer，ArrayBuffer，Blob，Stream 等等。那么这些概念彼此之间的关系是什么？各自的使用场景是什么？

• Blob: 用于前端的一个专门支持文件操作的二进制对象
• ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组
• Buffer：Node.js中提供的一个二进制缓冲区，常用来处理I/O操作
• Stream：Node.js中为了解决Web应用有序的消费小信息块，而不是大信息块的问题

Blob

Blob是用来支持文件操作的。简单的说：在JS中，有两个构造函数 File 和 Blob, 而File继承了所有Blob的属性。所以在我们看来，File对象可以看作一种特殊的Blob对象。在前端工程中，我们可以通过以下操作获得File对象：

1. <input/> 标签中选择文件
2. 拖拽生成的DataTransfer对象

File对象既然是一种特殊的 Blob，那么就可以直接调用Blob对象的方法。Blob具体方法如下：

1. 文件下载

通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，并且用做文件下载或者图片显示的链接。如下例子中生成了一个 Blob URL 的例子： blob:null/e3eba36d-a3d9-4d10-8cce-c452ae47d58b，可以和冗长的Base64格式的Data URL相比，Blob URL的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的"引用",指向了内存中真实缓存的文件。

<a id="content">点此进行下载</a>

<script>
  const blob = new Blob(["Hello World"]);
  const url = window.URL.createObjectURL(blob); 
  console.log(url) // blob:null/e3eba36d-a3d9-4d10-8cce-c452ae47d58b
  let a = document.getElementById("content");
  a.download = "helloworld.txt";
  a.href = url;
</script> 

(需要注意的是：download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化)

2. Blob实现图片本地显示

window.URL.createObjectURL生成的Blob URL还可以赋给img.src，从而实现图片的显示:

<input type="file" id='file' />
<img id='img' style="width: 200px;height:200px;" />

<script>
  document.getElementById('file').addEventListener('change', function (e) {
    const file = this.files[0];
    const img = document.getElementById('img');
    const url = window.URL.createObjectURL(file);
    img.src = url;
    img.onload = function () {
        // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
        window.URL.revokeObjectURL(url);
    }
  }, false);
</script>

3. Blob实现文件分片上传

• 通过Blob.slice(start,end)可以分割大 Blob 为多个小 Blob
• xhr.send是可以直接发送Blob对象的

如下例子所示，我们本地上传一个文本文件，在前端设置切割限制大小为 20 字节，最后会在 node 端批量打印文本内容。

前端代码如下：

<input type="file" id='file' />

<script>
function upload(blob) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/ajax', true);
    xhr.setRequestHeader('Content-Type', 'text/plain')
    xhr.send(blob);
}

document.getElementById('file').addEventListener('change', function (e) {
    cont blob = this.files[0];
    const CHUNK_SIZE = 20; .
    const SIZE = blob.size;
    let start = 0;
    let end = CHUNK_SIZE;
    while (start < SIZE) {
        upload(blob.slice(start, end));
        start = end;
        end = start + CHUNK_SIZE;
    }
}, false);
</script>

Node端（koa）代码如下：

app.use(async (ctx, next) => {
    await next();
    if (ctx.path === '/ajax') {
        const req = ctx.req;
        const body = await parse(req);
        ctx.status = 200;
        console.log(body);
    }
});

4. 本地读取文件内容

如果想要读取Blob或者File并转化为其他格式的数据，可以借助FileReader对象的API进行操作:

• FileReader.readAsText(Blob) ：将Blob转化为文本字符串
• FileReader.readAsArrayBuffer(Blob) ： 将Blob转为ArrayBuffer格式数据
• FileReader.readAsDataURL() : 将Blob转化为Base64格式的Data URL

下面我们尝试把一个文件的内容通过字符串的方式读取出来

<input type="file" id='file' />
<script>
  document.getElementById('file').addEventListener('change', function (e) {
    const file = this.files[0];
    const reader = new FileReader();
    reader.onload = function () {
        const content = reader.result;
        console.log(content);
    }
    reader.readAsText(file);
  }, false);
</script>

ArrayBuffer

Blob是针对文件的，或者可以说它就是一个文件对象。但是Blob欠缺对二进制数据的细节操作能力，如果要具体修改某一部分的二进制数据，Blob显然就不够用了，而这种细粒度的功能则可以由下面介绍的ArrayBuffer来完成。 ArrayBuffer的主要功能如下：

• 读取：通过 FileReader方法（FileReader.readAsArrayBuffer(Blob)）将文件转化为ArrayBuffer格式数据：
• 写入：通过 TypeArray 和 DataView 对ArrayBuffer 进行写操作

这里需要区分一下 ArrayBuffer 和 Array:

1. ArrayBuffer初始化后大小是固定的；Array可以自由增减；
2. ArrayBuffer数据在栈中；Array数据在堆中；
3. ArrayBuffer 没有push/pop 等数组操作方法的；
4. ArrayBuffer只能读不能写，如果要写只能通过TypeArray 和 DataView实现。

1. 可以通过ArrayBuffer的格式读取本地数据：

document.getElementById('file').addEventListener('change', function (e) {
  const file = this.files[0];
  const fileReader = new FileReader();
  fileReader.onload = function () {
    const result = fileReader.result;
    console.log(result)
  }
  fileReader.readAsArrayBuffer(file);
}, false);

2.可以通过ArrayBuffer的格式读取Ajax请求数据

• 通过xhr.responseType = "arraybuffer" 指定响应数据类型
• 在onload回调里打印 xhr.response

前端

const xhr = new XMLHttpRequest();
xhr.open("GET", "ajax", true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send();

Node端

const app = new Koa();
app.use(async (ctx) => {
  if (pathname = '/ajax') {
    ctx.body = 'hello world';
    ctx.status = 200;
  }
}).listen(3000)

3.可以通过TypeArray对ArrayBuffer进行写操作

const typedArray1 = new Int8Array(8);
typedArray1[0] = 100;

const typedArray2 = new Int8Array(typedArray1);
typedArray2[1] = 200;

console.log(typedArray1);
//  output: Int8Array [100, 0, 0, 0, 0, 0, 0, 0]

console.log(typedArray2);
//  output: Int8Array [200, 42, 0, 0, 0, 0, 0, 0]

4.可以通过DataView对ArrayBuffer进行写操作

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);
view.setInt8(2, 100);

console.log(view.getInt8(2));
// 输出: 100

Buffer

Buffer 是Node.js提供的对象，前端是没有的。它一般应用于IO操作，例如接收前端请求数据时候，可以通过Buffer的API对接收到的前端数据进行整合

前端

const xhr = new XMLHttpRequest();
xhr.open("POST", "ajax", true);
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send("hello world");

Node端（Koa）

const app = new Koa();
app.use(async (ctx, next) => {
    if (ctx.path === '/ajax') {
        const chunks = [];
        const req = ctx.req;
        req.on('data', buf => {
            chunks.push(buf);
        })
        req.on('end', () => {
            let buffer = Buffer.concat(chunks);
            console.log(buffer.toString())
        })
    }
});
app.listen(3000)

运行结果

// Node端输出
hello world

Stream

流（stream）在 Node.js 中是处理流数据的抽象接口（abstract interface）。 我们需要 Node.js 中的流来处理和操作流数据，例如视频、大文件等。Node.js 中的 stream 模块用于管理所有流。流是一个抽象接口，用于与 Node.js 中的流数据一起工作。Node.js 为我们提供了许多流对象。

Node.js 提供了多种流对象。 例如 HTTP 请求和 process.stdout就都是流的实例。流可以是可读的、可写的，或是可读写的。所有的流都是EventEmitter的实例。

Node.js 中有四种基本的流类型：

• Writable：可以写入数据的流（例如，fs.createWriteStream()）
• Readable：可以从中读取数据的流（例如fs.createReadStream()）
• Duplex：既是Writable又是Readable 的流（例如，net.Socket）
• Transform：Duplex可以在写入和读取数据时修改或转换数据的流（例如，zlib.createDeflate()）

import { createReadStream, createWriteStream } from 'fs'
const [,, src, dest] = process.argv

// 创建源流
const srcStream = createReadStream(src)

// 创建目标流
const destStream = createWriteStream(dest)

// 当源流上有数据时，将其写入目标流
srcStream.on('data', (chunk) => destStream.write(chunk))

本质上，我们用createReadStream和createWriteStream替换 readFile和writeFile。然后使用它们创建两个流实例srcStream和destStream。这些对象分别是一个 ReadableStream（输入）和一个 WritableStream（输出）的实例。

他们不会一次性读取所有数据。数据以块、小部分数据的形式读取。一旦块通过data事件可用，我们就知道源流中有新的数据块可用，立即将其写入目标流。这样，我们就不必将所有文件内容保存在内存中。

1. 可读流

const fs = require('fs');

const readableStream = fs.createReadStream('./article.md', {
    highWaterMark: 10
});

readableStream.on('readable', () => {
    process.stdout.write(`[${readableStream.read()}]`);
});

readableStream.on('end', () => {
    console.log('DONE');
});

2. 可写流

const fs = require('fs'); 
const file = fs.createWriteStream('file.txt'); 
for (let i = 0; i < 10000; i++) { 
   file.write('Hello world ' + i); 
}
file.end();

3. 双工流 ------ 该流用于创建同时可读和可写的流

const server = http.createServer((req, res) => {
    let body = '';
    req.setEncoding('utf8');
    req.on('data', (chunk) => {
        body += chunk;
    });
    req.on('end', () => {
        console.log(body);
        try {
            res.write('Hello World');
            res.end();
        } catch (er) {
            res.statusCode = 400;
            return res.end(`error: ${er.message}`);
        }
    });
});