基于HTTP流式传输的长时响应体验提升-唐霜

在我们应用开发中偶尔遇到某个请求需要后端【未经授权禁止转载】【本文受版权保护】进行大量计算的情况，这种情况下，按照传统【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的前后端协同方式，前端需要等待后端慢慢计【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。算，会放一个loading效果，而长时间本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】的loading对用户的体验并不友好，而【未经授权禁止转载】【作者：唐霜】如果后端采用异步方式，在接收到前端请求后本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。立即返回，过一段时间完成计算后再让前端请未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net求一次，又会让界面上的数据在这段等待时间【未经授权禁止转载】转载请注明出处：www.tangshuang.net中处于老的不正确的数据情况，因此，我们需本文版权归作者所有，未经授权不得转载。【作者：唐霜】要找到一种既可以避免异步发送数据让用户误本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。认为结果错误，又可以避免长时响应让用户等本文作者：唐霜，转载请注明出处。原创内容，盗版必究。待焦虑的方法，利用流式传输，可以将结果分本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net片返回，从而让界面实时发生变化，又可以减转载请注明出处：www.tangshuang.net【作者：唐霜】少前后端多次交互带来的编码困难。

HTTP流式传输

这里的流式传输是指借鉴流媒体技术，在数据原创内容，盗版必究。【版权所有，侵权必究】传输中实现持续可用的不间断的传输效果。流【原创内容，转载请注明出处】【原创内容，转载请注明出处】式传输可以依赖http, rtmp, r【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。tcp, udp…等等网络协【本文首发于唐霜的博客】【未经授权禁止转载】议，在本文的场景下，我们主要探讨的是HT著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netTP流式传输。

我们都知道，HTTP是基于TCP的无状态【原创内容，转载请注明出处】原创内容，盗版必究。的一次性使用的连接协议，在我们日常的开发【作者：唐霜】【作者：唐霜】过程中，从客户端发起数据请求到服务端把数【作者：唐霜】著作权归作者所有，禁止商业用途转载。据一次性吐给客户端，就完成了这一次连接，未经授权，禁止复制转载。【版权所有，侵权必究】随后它就关闭了。我们姑且不讨论TCP反复【版权所有】唐霜 www.tangshuang.net【作者：唐霜】的开启和关闭带来的性能损耗。我们要探讨的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net是，在HTTP1.1中默认开启的Keep著作权归作者所有，禁止商业用途转载。【作者：唐霜】-Alive模式，当客户端和服务端都支持【本文首发于唐霜的博客】【原创内容，转载请注明出处】该模式时，一个TCP连接会维持打开，直到未经授权，禁止复制转载。【作者：唐霜】客户端不在回答服务端的ACK。而开启Ke转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ep-Alive之后，一次HTTP连接就本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。可以维持较长时间的连接状态，配合Tran【原创不易，请尊重版权】【原创内容，转载请注明出处】sfer-Encoding:chunke【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】d报文, 客户端和服务端基于底层的Soc著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ket，实现持续的服务端将数据发送给客户【版权所有，侵权必究】转载请注明出处：www.tangshuang.net端。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【转载请注明来源】

Connection: keep-alive
Transfer-Encoding: chunked

另一种方式是客户端通过Range报文，主著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】动要求服务端返回的数据范围：

【作者：唐霜】未经授权，禁止复制转载。

Connection: keep-alive
Range: bytes=0-100

此时，服务端会报：

【本文受版权保护】【转载请注明来源】【关注微信公众号：wwwtangshua【本文受版权保护】本文版权归作者所有，未经授权不得转载。ngnet】

Accept-Ranges: bytes
Connection: keep-alive
Content-Range: bytes 0-100/5243
Content-Length: 101

此时的Content-Length只返回【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。当前片段的长度。

【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ngnet】【作者：唐霜】

Nodejs实现流式传输

const http = require("http");

http
  .createServer(async function (req, res) {
    res.writeHead(200, {
      "Content-Type": "text/plain;charset=utf-8",
      "Transfer-Encoding": "chunked",
      "Access-Control-Allow-Origin": "*",
    });
    for (let index = 0; index < chunks.length; index++) {
      setTimeout(() => {
        const content = chunks[index];
        res.write(JSON.stringify(content));
      }, index * 1000);
    }
    setTimeout(() => {
      res.end();
    }, chunks.length * 1000);
  })
  .listen(3000, () => {
    console.log("app starting at port 3000");
  });

这里的核心点就在于res.write，在原创内容，盗版必究。原创内容，盗版必究。http模块中，res本身就是一个基于流【原创内容，转载请注明出处】【本文受版权保护】实现的响应对象，res.write则是向未经授权，禁止复制转载。【本文首发于唐霜的博客】流中写入内容（相当于append）。

原创内容，盗版必究。原创内容，盗版必究。

浏览器端实现流式接收

const res = await fetch('xxx');
for await (let chunk of res.body) {
  console.log(chunk);
}

fetch返回的响应对象中.body就是原创内容，盗版必究。原创内容，盗版必究。一个流，在for await语法的加持下【版权所有，侵权必究】【作者：唐霜】，我们都不需要做过多的处理，就可以用ch【作者：唐霜】【转载请注明来源】unk来更新界面上显示的数据。不过可惜的【未经授权禁止转载】【未经授权禁止转载】是，目前for await只对firef【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。ox加持，因此我们还是必须按照一个Rea未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netdableStream的使用方式来从re转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nets.body中读取数据：

const utf8Decoder = new TextDecoder("utf-8");

const res = await fetch('http://localhost:3000');

const reader = res.body.getReader();
const processor = async () => {
    const { done, value } = await reader.read();
    clearInterval(timer);
    if (done) {
        return;
    }
    const chunk = utf8Decoder.decode(value, { stream: true });
    const item = JSON.parse(chunk);
    console.log(item);
    await processor();
}

await processor();

转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ng.net【访问 www.tangshuang.n未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】

效果对比

接下来，我们用没有经过处理的实现，和经过【未经授权禁止转载】原创内容，盗版必究。处理的实现来做一个感性的对比。

首先我们来看下传统方式的效果：

服务端代码如下：

【作者：唐霜】未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】

const http = require("http");

const ids = new Array(200).fill(0).map((_, i) => i);

const getData = (id) => new Promise((resolve) => {
    const cost = id % 2 * 100;
    setTimeout(() => resolve({ id, cost }), cost);
});

http
  .createServer(async (req, res) => {
    res.writeHead(200, {
      "Access-Control-Allow-Origin": "*",
    });

    const startTime = Date.now();
    const results = [];
    const run = async (i = 0) => {
        const id = ids[i];
        if (i >= ids.length) {
            return;
        }
        const data = await getData(id);
        results.push(data);
        await run(i + 1);
    };
    await run();
    const endTime = Date.now();

    res.end(JSON.stringify(results));
    console.log('Cost:', endTime - startTime);
  })
  .listen(3000);

客户端代码如下：

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【本文首发于唐霜的博客】

<!DOCTYPE html>

<div id="root"></div>

<script>
    const root = document.querySelector('#root');

    let count = 0;
    const timer = setInterval(() => {
        count ++;
        root.innerHTML = count;
    }, 1000);

    const startTime = Date.now();
    fetch('http://localhost:3000').then(res => res.json()).then((data) => {
        console.log(data);
        const endTime = Date.now();
        const cost = endTime - startTime;
        console.log(cost);
        clearInterval(timer);
        data.forEach((item) => {
            const el = document.createElement('div');
            el.innerHTML = `id: ${item.id}, cost: ${item.cost}`;
            root.appendChild(el);
        });
    });
</script>

当然，这里面还有一些优化空间，比如在服务原创内容，盗版必究。【转载请注明来源】端用Promise.all来一次性执行全【版权所有，侵权必究】【本文首发于唐霜的博客】部任务。但是，无论如何优化，底层思维都是【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net一次性拿到全部数据之后再渲染，因此，lo转载请注明出处：www.tangshuang.net【未经授权禁止转载】ading过程中，是没有数据展示的。

接下来看下基于流的效果：

【转载请注明来源】【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【原创内容，转载请注明出处】ngnet】【原创不易，请尊重版权】【转载请注明来源】

可以看到，页面一打开，数据就一条一条的逐【转载请注明来源】转载请注明出处：www.tangshuang.net步被渲染，虽然全部的数据回来也需要10s本文作者：唐霜，转载请注明出处。原创内容，盗版必究。左右，但是，在这过程中，我们可以看到界面【作者：唐霜】【本文首发于唐霜的博客】上一部分数据已经被渲染出来。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

服务端代码如下：

const http = require("http");

const ids = new Array(200).fill(0).map((_, i) => i);

const getData = (id) => new Promise((resolve) => {
    const cost = id % 2 * 100;
    setTimeout(() => resolve({ id, cost }), cost);
});

http
  .createServer(async (req, res) => {
    res.writeHead(200, {
      "Transfer-Encoding": "chunked",
      "Access-Control-Allow-Origin": "*",
      'Content-Type': 'text/plain',
    });

    const startTime = Date.now();
    const run = async (i = 0) => {
        const id = ids[i];
        if (i >= ids.length) {
            return;
        }
        const data = await getData(id);
        res.write(JSON.stringify(data));
        await run(i + 1);
    };
    await run();
    const endTime = Date.now();

    res.end();
    console.log('Cost:', endTime - startTime);
  })
  .listen(3000);

客户端代码如下：

转载请注明出处：www.tangshua【未经授权禁止转载】【作者：唐霜】ng.net本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

<!DOCTYPE html>

<div id="root"></div>

<script>
    const utf8Decoder = new TextDecoder("utf-8");

    async function init() {
        const root = document.querySelector('#root');

        let count = 0;
        const timer = setInterval(() => {
            count ++;
            root.innerHTML = count;
        }, 1000);

        const startTime = Date.now();
        const res = await fetch('http://localhost:3000');

        const reader = res.body.getReader();
        const processor = async () => {
            const { done, value } = await reader.read();
            clearInterval(timer);
            if (done) {
                return;
            }
            const chunk = utf8Decoder.decode(value, { stream: true });
            const item = JSON.parse(chunk);
            const el = document.createElement('div');
            el.innerHTML = `id: ${item.id}, cost: ${item.cost}`;
            root.appendChild(el);
            await processor();
        }

        await processor();

        const endTime = Date.now();
        const cost = endTime - startTime;
        console.log(cost);
    }
    init();
</script>

可以发现，总体代码的结构是一致的，只是在本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net传输和获取数据的地方不同，随之渲染的过程本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。也不同。这也说明，在现有的系统中，实现这本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】种传输方式的迁移，是可行的，不会对原有项本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】目的整体架构带来大的变化。

【本文首发于唐霜的博客】【未经授权禁止转载】

其他场景

本文设想的场景是，一个列表中，每一条数据【原创内容，转载请注明出处】【未经授权禁止转载】后端都需要花一定的时间，整个列表的总时间原创内容，盗版必究。本文作者：唐霜，转载请注明出处。就比较长。针对这一场景，我们采用流式传输【未经授权禁止转载】转载请注明出处：www.tangshuang.net的方法，可以让列表可以逐条渲染或更新，从本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。而可以让用户在较快的时间里，获得前面的数转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。据。而这种流式传输，现在已经在前端被广泛原创内容，盗版必究。【转载请注明来源】使用，甚至被某些框架作为其架构的底层选型原创内容，盗版必究。【原创不易，请尊重版权】。我个人也想到了一些场景，供你参考：

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】

长列表

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】et 获取更多精彩内容】

数据表格实时更新，例如股票市场行情

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

较长的文章

【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

【作者：唐霜】

【转载请注明来源】

将网页分为多个chunk，每一个chun未经授权，禁止复制转载。【原创内容，转载请注明出处】k对应页面中的一块，首屏chunk放在最本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】前面，这样可以更快让用户看到界面

本文版权归作者所有，未经授权不得转载。

【转载请注明来源】

打字机效果，例如实时翻译字幕、ChatG转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。PT的回复

原创内容，盗版必究。

未经授权，禁止复制转载。

用户提交后需要大量计算，可以先返回一个c【原创不易，请尊重版权】原创内容，盗版必究。hunk，让前端提示用户已经成功，等计算本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。完再返回真正的chunk，更新界面数据

【未经授权禁止转载】

【原创内容，转载请注明出处】

古老的聊天室，在服务端，当收到别人发送的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】消息时，通过一个chunk发送给自己的浏转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。览器，这样我们就不需要自己架设socke【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】t

未经授权，禁止复制转载。

【本文首发于唐霜的博客】

原创内容，盗版必究。

由粗糙逐渐细腻的渲染，例如先发送较少的模【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】型数据，形成一个轮廓，然后在逐渐发送更多【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】数据，将模型的颜色、细节等进行填充

原创内容，盗版必究。

【转载请注明来源】

【本文首发于唐霜的博客】

原创内容，盗版必究。

分段式操作的场景，例如文件下载，用户点击【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】下载按钮后，服务端要进行压缩打包等，需要本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】一段时间，在打包过程中，还会发现其中某个【转载请注明来源】【本文受版权保护】文件存在问题，要将问题反馈给前端，完成打本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】包之后才返回给前端打包好的文件

【本文首发于唐霜的博客】

随机渲染，例如不同的用户处在地图的不同点【本文受版权保护】未经授权，禁止复制转载。，我们优先返回该点的地图信息，然后再逐渐原创内容，盗版必究。【本文首发于唐霜的博客】往外扩散

【原创不易，请尊重版权】

转载请注明出处：www.tangshua【转载请注明来源】未经授权，禁止复制转载。ng.net

【本文受版权保护】

【访问 www.tangshuang.n【未经授权禁止转载】未经授权，禁止复制转载。et 获取更多精彩内容】

总之，流式传输的特性决定了我们可以在较长【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】的时间里，持续的接收数据，实现界面的同步【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】。

【原创内容，转载请注明出处】【本文受版权保护】【本文首发于唐霜的博客】

原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【作者：唐霜】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【本文受版权保护】【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

2023-06-17 10731

唐霜

基于HTTP流式传输的长时响应体验提升

HTTP流式传输

Nodejs实现流式传输

浏览器端实现流式接收

效果对比

其他场景

为价值买单，打赏一杯咖啡

声明

关于

生态