Question

如何显示进度栏加载程序取决于客户端中的服务器进程。假设客户端单击了下载按钮，然后服务器收到请求，该服务器从数据库1中的表用户中查找数据（假设表用户中有一千条记录）并将其复制到数据库2（表用户）中，并且从数据库1中查找并复制所需的总时间到另一个数据库需要1分钟。对于我来说，我有很多表和数据。现在我的问题是，如果我只显示加载图标，那么用户会感到困惑（他/她可能认为进程卡住了）。另一件事是，如果我只在客户端显示带有硬编码时间（假设为1分钟）的进度条加载器，那如果服务器上的处理时间增加了，那么用户也会感到困惑。

让我展示一些示例代码

** // copy data from database1**
var variant = await varianttable.find();
var user = await usertable.find();
var product = await producttable.find();
var sale = await saletable.find();
var tansfer = await tansfertable.find();


** // paste data in database2**
try {
    await varianttable.create(variant[0])
    await usertable.create(user[0])
    await producttable.create(product[0])
    await saletable.create(sale[0])
    await tansfertable.create(tansfer[0])

} catch (error) {
    console.error(error);
}

我想要的是，如果服务器从数据库1中的所有表复制了数据，则它应在客户端完成50％的处理，并且将数据粘贴到数据库2之后，进度条应在客户端显示100完成在谷歌搜索过程中，我发现我可以使用socket.io有人可以告诉我如何在上面的代码中使用它，或者有其他替代方法

Answer 1

您可以使用socket.io来实现。

您需要做的是在socket.io上为每个用户创建一个通道，然后从后端推动该通道上的进度。另外，我建议使用进度条流程，而不是直接跳到50％和100％以上。

// Push to client using socket.io (10%)
socket.emit('USER_CHANNEL_NAME', 10); ** // copy data from database1**
var variant = await varianttable.find();
var user = await usertable.find();
socket.emit('USER_CHANNEL_NAME', 25);
var product = await producttable.find();
var sale = await saletable.find();
var tansfer = await tansfertable.find();
socket.emit('USER_CHANNEL_NAME', 50);

** // paste data in database2**
try {
    await varianttable.create(variant[0])
    await usertable.create(user[0])
    await producttable.create(product[0])
    socket.emit('USER_CHANNEL_NAME', 70);
    await saletable.create(sale[0])
    socket.emit('USER_CHANNEL_NAME', 85);
    await tansfertable.create(tansfer[0])
    socket.emit('USER_CHANNEL_NAME', 100);
    // Here if you are sending response to server.
} catch (error) {
    console.error(error);
}

设置socket.io非常容易，只需浏览其官方网站和入门指南，您就应该很好地实现它。

有关{.3}的socket.io的更多信息

根据完成的服务器进程显示进度条加载器

1 个答案: