显示处理大数据时的进度

Question

我有一个问题，我有一个运行的Web应用程序需要处理一些大文件。它可能需要一个5secund所以我同时想要向用户显示文件正在处理或最好将发送信息多少时间结束。这是第一页，我不能发送两次res.render以便如何做到这一点？

 var fileinarray = require('./readfile');

 app.get('/', function(req, res){
     var dataready = fileinarray; 
     res.render('index', {data: dataready});
 });

那我怎么做他的？我读了一些关于socke.io的内容，但我现在不知道如何使用？

感谢您的帮助

Answer 1

如果您正在使用此请求加载页面（它看起来像），那么您无法以结构化的方式显示进度，因为浏览器正在等待下载您的页面，因此无法显示任何内容该窗口，直到您为它呈现页面。但是，您希望在页面到达之前显示进度。

所以，你必须重新调整工作方式。首先，为了显示进度，浏览器必须有一个可以显示进度的工作页面。这意味着浏览器无法等待页面到达。我能想到的最直接的方法是最初呈现一个shell页面，服务器立即返回（不等待原始内容）。在该shell页面中，您有代码来显示进度，并向服务器发出请求以获取长时间运行的数据。使用Ajax和webSockets可以通过多种方式完成此操作。我将概述一些组合：

全部使用Ajax

1. 浏览器请求/页面，您的服务器呈现shell页面
2. 同时，在渲染页面后，服务器启动长时间运行的获取所需数据的过程。
3. 在shell页面内呈现的是包含事务ID
的Javascript变量
4. 同时，客户端Javascript可以定期向服务器发送Ajax请求，以检查给定事务ID的进度（比如每10秒）。服务器返回任何有用的进度信息，客户端Javascript显示进度信息。
5. 在某些时候，服务器完成了数据，并且正在检查进度的常规Ajax请求之一返回所有数据。然后，客户端Javascript将此数据插入当前页面，操作完成。

主要使用WebSocket

1. 浏览器请求/页面，您的服务器呈现shell页面
2. shell页面中的客户端代码与服务器建立webSocket或socket.io连接，并发送对该页面所属数据的初始请求。
3. 服务器接收webSocket连接和数据的初始请求，并启动长时间运行的获取数据的过程。
4. 由于服务器具有有意义的进度信息，因此它通过webSocket / socket.io连接将其发送到客户端，当客户端收到该信息时，它会在页面中呈现适当的进度。
5. 在某些时候，服务器完成了获取数据并向客户端发送包含最终数据的消息。客户端Javascript接收此数据并将其插入页面。
6. 然后客户端可以关闭webSocket / socket.io连接。