I know python and databases since several years ago.
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.
In python there is a nice class called multiprocessing.Queue which I used in the past.
Now I search something like this, but in AngularJS
Step 1: The in-queue pulls work-items (pink circles). Just a view json bytes.
Step 2: The User processes the data.
Step 3: The out-queue cares for sending the result to the server.
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.
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.
The pink circles in the picture represent JSON data structures. I want to push each of them with one request to the browser.
Example:
The user sees a question, then he needs to fill out three fields. For example:
- answer: Type text
- like-this-question: integer from 1..5
- difficulty: integer from 1..5
The data should be put into the queue after the used pressed "submit". He should get the next question immediately.
Question:
Is there already a producer-consumer Queue available for AngularJS? If not, how to implement it?
Update
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.
I am not fixed on AngularJS. I happy to change the framework if there are good reasons.
Preserving the in-queue between browser reloads could be done with localStorage (html5)
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.
example:
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.
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.
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.
