更新服务器列表不显示进度条,根据服务器进程完成显示进度条加载器(示例代码)...

如何显示进度条加载器依赖于客户端的服务器进程。假设客户端点击下载按钮然后服务器接收请求后，该服务器从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的更多信息