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

Posted 2021-04-02

如何显示进度条加载器依赖于客户端的服务器进程。假设客户端点击下载按钮然后服务器接收请求后，该服务器从database1中的表用户查找数据（假设表用户中有一千条记录）并将其复制到database2（表用户），并且从database1和copy中查找所需的总时间到另一个数据库是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);
}

我想要的是，如果服务器完成从database1中的所有表复制数据，那么它应该在客户端50％处理完成并且在数据库2中粘贴数据后进度条应该在谷歌搜索期间在客户端显示100完成我发现我可以使用套接字.io有谁能告诉我如何在上面的代码中使用或有任何替代方法

答案

您可以使用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非常容易，只需通过他们的官方网站和入门指南，你应该很好地实现它。

有关https://socket.io的socket.io的更多信息