生产者 - 消费者队列AngularJS [英] Producer-Consumer Queue in AngularJS

问题描述

我知道蟒蛇和数据库自从几年前。

I know python and databases since several years ago.

不过，我想提高我的JavaScript的有限知识。对于我的玩具项目，我想在Web浏览器中使用异步队列，并使用AngularJS这一点。

But I want to improve my limited JavaScript knowledge. For my toy project I want to use an asynchronous queue in the web browser and use AngularJS for this.

在Python中有一个叫漂亮类 multiprocessing.Queue 这是我在过去使用。

In python there is a nice class called multiprocessing.Queue which I used in the past.

现在我寻找这样的事情，但在AngularJS

Now I search something like this, but in AngularJS

• 步骤1：在队列中拉工作项（粉红色圆圈）。只是鉴于JSON字节。

• Step 1: The in-queue pulls work-items (pink circles). Just a view json bytes.

第二步：用户处理数据

步骤3：出队列关心发送结果到服务器

Step 3: The out-queue cares for sending the result to the server.

为什么这个复杂的设置吗？因为我希望应用程序尽可能响应。内的队列应该pre-加载一些数据和出队列应该处理响应通信。

Why this "complicated" setup? Because I want the application to be as responsive as possible. The in-queue should pre-load some data and the out-queue should handle response communication.

这是另一个好处是，与此设置的应用程序可以处理服务器或网络中断一段几分钟的。

An other benefit is, that with this setup the application can handle server or network outage for a period of some minutes.

的双向数据AngularJS后者立即更新其用户编辑并不真正适合我的问题的数据绑定。还是我错过了一些东西。我是新来AngularJS。

The two way data binding of AngularJS which immediately updates data which the user has edited does not really fit to my question. Or I missed something. I am new to AngularJS.

在画面重新present JSON数据结构的粉红色圆圈。我想用一个请求到浏览器推他们每个人。

The pink circles in the picture represent JSON data structures. I want to push each of them with one request to the browser.

例如：

用户可以看到一个问题，然后他需要填写三个字段。例如：

The user sees a question, then he needs to fill out three fields. For example:

• 回答：键入文本


• 像 - 这个问题：整数1..5


• 难度：整数1..5

的数据应后用pressed提交被放入队列。他应该立即得到下一个问题。

The data should be put into the queue after the used pressed "submit". He should get the next question immediately.

问：

有没有已经可以用于AngularJS一个生产者 - 消费者队列？如果没有，如何实现它？

Is there already a producer-consumer Queue available for AngularJS? If not, how to implement it?

更新

发送来自客户端的数据可以用普通的AJAX来实现。中队列其中$ P $对获取数据是更复杂的部件。虽然两者可以使用相同的实现。重要的是，客户端获得具有超低等待时间的新数据。中队列应充满每以避免客户端等待数据的时间长达5个项目。

Sending the data from the client could be implemented with plain AJAX. The in-queue which pre-fetches the data is the more complicated part. Although both could use the same implementation. It is important that the client gets the new data with super low latency. The in-queue should be filled with up to 5 items every time to avoid that the client waits for data.

在我的情况不一样，如果浏览器获得封闭，并在在队列中迷路的项目无关紧要。填充在队列为只读在服务器上的部分。

In my case it does not matter if the browser gets closed and the items in the in-queue get lost. Filling the in-queue is read-only on the server part.

我并不是固定在AngularJS。我高兴，如果有很好的理由来改变框架。

I am not fixed on AngularJS. I happy to change the framework if there are good reasons.

preserving的在队列浏览重载可以与localStorage的完成之间（HTML5）

Preserving the in-queue between browser reloads could be done with localStorage (html5)

推荐答案

只是重新思考，你真的需要生产者 - 消费者在你的前端？
在你的榜样，我想一个简单的发布 - 订阅或 $ Q 在这种情况下足够好了。

Just rethinking, do you really need producer-consumer in your frontend? In your example, I think a simple pub-sub or $Q is good enough in this case.

例如：

创建一个用户服务，在你的榜样， questionHandlerService 这订阅事件问题提交，在 questionService 当用户提交的问题，刚刚发布事件问题提交的数据，发射后不管。您不需要等待来自 questionHandlerService 。

create a subscriber service, in your example, questionHandlerService which subscribe the event question-submitted, in your questionService when user submit the question, just publish the event question-submitted with the data, fire and forget. you don't need to wait for the response from the questionHandlerService.

只要记住，只有一个在JavaScript主线程，如果你的方法将遍历数组中的1000项阻止用户界面，如循环，同步过程中他们 ，有没有帮助，如果你把在另一个排队，因为，执行，除非你在一个网络工作者执行它时，它会必须阻止用户界面。而如果用户的刷新浏览器？您的未处理请求刚刚丢失。

Just keep in mind, there is only one main thread in javascript, if your method will block the ui, like loop through 1000 items in the array, synchronous process them, there is no help if you are put that in another "queue", because, it will must block the ui when executing unless you execute it in a web-worker. And what if user refresh the browser? your unprocessed request just lost.

触发一个 XHR 调用不会阻止用户界面，它没有意义执行生产者 - 消费者在前端，可以只是验证输入火的 XHR ，让后端处理繁重，在后端的控制器，你可以使用一个队列来保存请求和响应立刻。和处理来自任何线程或其他进程队列中。

firing an XHR call will not block the UI, it doesn't make sense to implement the producer-consumer in frontend, you can just validate the input fire the XHR, let backend to handle the heavy lifting, in your backend controller, you can use a queue to save the request and response immediatly. and process the queue from whatever thread or another process.

这篇关于生产者 - 消费者队列AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！