如何在JavaScript中创建服务器端进度指示器？ [英] How to create Server-side Progress indicator in JavaScript?

问题描述

我想在我的网站中创建一个部分，其中一个用户有一些简单的更新按钮。

I want to create a section in my site, where a user has a few simple update buttons.

这些更新按钮中的每一个都将转到服务器，并将在幕后进行长时间的处理。

Each of these update buttons will be going to the server, and will do a long crunching behind the scene.

当服务器处理数据时，我希望用户有一些进度条，如进度条或文本百分比。

While the server crunches data, I want the user to have a some kind of progress indicator, like progress bar or textual percentage.

我正在使用jQuery作为我的JavaScript库和CodeIgniter（PHP）作为服务器端框架，如果它很重要......

I'm using jQuery as my JavaScript library, and CodeIgniter (PHP) as the server-side framework, if it's important...

我在想的是使用PHP的 flush （）向jQuery报告进度状态的函数，但我不确定jQuery的Ajax函数在完成之前是否正在读取输出...

What I was thinking about is using PHP's flush() function to report progress status to jQuery, but I'm not sure that jQuery's Ajax functions are reading the output before it's complete...

所以任何建议/解释都会有用且有帮助！

So any advice/explanation would be useful and helpful!

推荐答案

我将以 WebSync按需，但无论您选择哪种服务器，都可以使用相同的方法。

I'm going to give you an example using WebSync On-Demand, but the same approach would work regardless of your choice of server.

这是您的工作。首先，以某种方式开始长期运行;你的用户点击按钮开始这个过程（我将假设一个Ajax调用，但无论什么工作），你返回给他们某种标识符，我们称之为'myId'，给它一个值' 1。是否通过调用某种类型的进程来执行此操作取决于您。

Here's what you do. First, kick off the long-running operation somehow; your user clicks the button to start this process (I'm going to assume an Ajax call, but whatever works), and you return to them some sort of identifier, we'll call that 'myId', give it a value of '1'. Whether you do that by invoking a process of some sort, etc, is up to you.

然后，在您从该调用的回调中，您将编写如下内容：

Then, in your callback from that invocation, you would write something like so:

var myId = 1; // this would be set somewhere else
client.initialize('api key');
client.connect();
client.subscribe({
  channel: '/tasks/' + myId,
  onReceive: function(args){
    // update the progress bar
    myProgressBar.update(args.data.progress);
  }
});

这样做会订阅您的客户以接收有关任务更新的通知，所以这就是left是推出更新，你在任何实际运行任务的进程中都会做。这看起来像（在PHP中，使用SDK）：

What that'll do is subscribe your client to receive notification about updates to the task, so all that's left is to push out the updates, which you'd do in whatever process is actually running the task. That would look like (in PHP, using the SDK):

$publisher = new Publisher(
    "11111111-1111-1111-1111-111111111111", // your api key again
    "mydomain.com" // your domain
);

// publish data
$response = $publisher->publish(array(
    array(
        'channel' => '/tasks/' . $myId, //comes from somewhere
        'data' => (object) array(
            'progress' => '45' //45% complete
        )
    )
));

// success if empty (no error)
$success = empty($response); 

就是这样;当更新发生时，它们会实时向您的客户推送。

That's it; as updates occur, they'll push out to your client in real-time.

这篇关于如何在JavaScript中创建服务器端进度指示器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！