Провайдер-очередь потребителей в AngularJS
Я знаю python и базы данных, так как несколько лет назад.
Но я хочу улучшить свои ограниченные знания JavaScript. Для моего проекта игрушек я хочу использовать асинхронную очередь в веб-браузере и использовать для этого AngularJS.
В python есть класс, называемый многопроцессорный .Queue, который я использовал в прошлом.
Теперь я ищу что-то подобное, но в AngularJS
![async-queue-js]()
-
Шаг 1: В очереди вытягивает рабочие элементы (розовые круги). Только представление json bytes.
-
Шаг 2: Пользователь обрабатывает данные.
-
Шаг 3. Out-queue заботится о отправке результата на сервер.
Почему эта "сложная" настройка? Потому что я хочу, чтобы приложение было максимально гибким. В очереди необходимо предварительно загрузить некоторые данные, а очередь должна обрабатывать ответную связь.
Другим преимуществом является то, что при этой настройке приложение может обрабатывать отключение сервера или сети в течение нескольких минут.
Двусторонняя привязка данных AngularJS, которая немедленно обновляет данные, которые пользователь редактировал, не подходит для моего вопроса. Или я что-то пропустил. Я новичок в AngularJS.
Розовые круги на изображении представляют структуры данных JSON. Я хочу нажать каждый из них с одним запросом в браузер.
Пример:
Пользователь видит вопрос, затем ему нужно заполнить три поля. Например:
- ответ: Введите текст
- like-this-question: integer from 1..5
- трудность: целое число от 1..5
Данные должны быть помещены в очередь после использованного нажатия "отправить". Он должен немедленно задать следующий вопрос.
Вопрос:
Существует ли уже очередь производителей-потребителей для AngularJS? Если нет, как его реализовать?
Обновление
Отправка данных с клиента может быть реализована с помощью простого AJAX. В очереди, которая предварительно считывает данные, является более сложной частью. Хотя оба варианта могут использовать одну и ту же реализацию. Важно, чтобы клиент получал новые данные со сверхнизкой задержкой. Каждый раз очередь в очереди должна быть заполнена до 5 элементов, чтобы клиент не ожидал данных.
В моем случае не имеет значения, закрывается ли браузер и теряются ли элементы в очереди. Заполнение очереди в очереди доступно только для чтения на серверной части.
Я не фиксирован на AngularJS. Я рад изменить структуру, если есть веские причины.
Сохранение очереди в очереди между перезагрузками браузера может выполняться с помощью localStorage (html5)
Ответы
Ответ 1
Просто переосмыслив, вам действительно нужен производитель-потребитель в вашем интерфейсе?
В вашем примере, я думаю, что простой pub-sub
или $Q
достаточно хорош в этом случае.
Пример:
создайте в своем примере службу подписчиков questionHandlerService
, которые подписывают событие question-submitted
, в вашем questionService
, когда пользователь отправляет вопрос, просто опубликуйте событие question-submitted
с данными, зажгите и забудьте. вам не нужно ждать ответа от questionHandlerService
.
Просто имейте в виду, что есть только один основной поток в javascript, если ваш метод блокирует ui, например loop through 1000 items in the array, synchronous process them
, нет никакой помощи, если вы поместите это в другую "очередь", потому что это будет блокируйте ui при выполнении, если вы не выполняете его в веб-работнике. А что, если пользователь обновить браузер? ваш необработанный запрос просто потерян.
запуск вызова XHR не будет блокировать пользовательский интерфейс, не имеет смысла реализовать producer-consumer
в интерфейсе, вы можете просто проверить входной огонь XHR > , позвольте backend обрабатывать тяжелую работу, в вашем backend-контроллере вы можете использовать очередь для немедленного сохранения запроса и ответа. и обрабатывать очередь из любого потока или другого процесса.
Ответ 2
Рабочий Plunker - Служба Backend используется только для издевательства над интерфейсом rest; Я исправил некоторые ошибки, такие как ограничение ошибок. Итак, предположим, что Plunker является последней версией...
У меня недостаточно времени, чтобы улучшить то, что следует, но вы можете считать это стартовой точкой...
Кстати, я думаю, что вам нужно было:
- Служба, которая обертывает $http.
- Метод push, который мы будем использовать, когда нам нужно будет зарегистрировать задачу.
- Рекурсивный закрытый метод _each, который, шаг за шагом, уменьшает зарегистрированную очередь.
- ... все остальное, что вы считаете важным (getCurrentTask, removeTask, ecc.).
Использование:
angular
.module('myApp', ['Queue'])
.controller('MyAppCtrl', function($httpQueue, $scope) {
var vm = $scope;
// using a route.resolve could be better!
$httpQueue
.pull()
.then(function(tasks) { vm.tasks = tasks; })
.catch(function() { vm.tasks = [{ name: '', description: '' }]; })
;
vm.onTaskEdited = function(event, task, form) {
event.preventDefault();
if(form.$invalid || form.$pristine ) { return; }
return $httpQueue.push(task);
};
})
;
<article ng-app="myApp">
<div ng-controller="MyAppCtrl">
<form ng-repeat="task in tasks" name="taskForm" ng-submit="onTaskEdited($event, task, taskForm)">
<input ng-model="task.name" placeholder="Task Name" />
<textarea ng-model="task.description"></textarea>
</form>
</div>
</article>
Ответ 3
Я бы посмотрел на promises, поскольку они предлагают функции async, которые вам кажутся нужными, возможно, в сочетании с привлечением всех или некоторых вопросов во время init. Если вам действительно нужен офлайн-просмотр работникам служб, хотя они ограничены более новыми браузерами
Если вы не можете использовать сервис-работников, вы можете создать службу (или factory), которая содержит все ваши вопросы или читает несколько. Вы использовали бы службу $http, чтобы попытаться получить больше ответов, если невозможно использовать то, что у вас есть, до тех пор, пока сетевое соединение не появится снова.
Эта проверка для сети может быть выполнена только с помощью службы $http, пытаясь получить новые ответы (и отправляя ответы) в цикле с интервалом $, например.
Ответ 4
Структура приложения:
2 массива, один с вопросами другой с ответами.
Запуск приложения:
Два объекта $interval, каждый получает первые 10 вопросов от сервера. Если длина буфера вопроса равна < 10 он получает новые вопросы, подталкивая их в массив.
Другая функция проверяет массив ответов и отправляет, если сообщение доступно для результатов на сервере.
Когда пользователь проверяет вопрос, он выталкивается из первого массива и помещается в массив ответов.
Что все.. angular 2 способа привязки данных показывает самые старые вопросы, используя вызов функции в приложении, например, giveMeTheLatestQuestion...
Надеюсь, что это поможет!