Данные реального времени на веб-странице с jQuery
Я хотел бы веб-страницу, которая постоянно обновляет график с новыми данными, когда они прибывают. Регулярно, все данные, которые Вы имеете, передаются странице в начале запроса. Однако мне нужна страница, чтобы смочь обновить себя с новой информацией каждые несколько секунд для перерисовки графика.
Фон
Веб-страница будет подобна этому http://www.panic.com/blog/2010/03/the-panic-status-board/. Входящие данные будут температурные значения, которые будут изображены в виде графика измеряемые Ардуино, и сохранили к базе данных Django (эта часть уже завершена).
Обновление
Это звучит, как будто решение состоит в том, чтобы использовать jQuery.ajax() функция (http://api.jquery.com/jQuery.ajax/) с функцией как .complete обратный вызов, который запланирует другой запрос несколько секунд спустя к URL, который возвратит данные в формате JSON.
Как тот метод может быть запланирован? С .delay() функция?
2 ответа
Таким образом, страница должна выполнять периодические вызовы jQuery.ajax с параметром url , установленным на URL-адрес сервера, где находится самая последняя обновленная информация (возможно, просто как инкрементная дельта с последнего момента, для которого у клиента есть информация - клиент может отправить этот момент в качестве параметра запроса в вызове Ajax), в идеале в форме JSON. Обратный вызов по завершении асинхронного запроса может запланировать следующие вызовы ajax на несколько секунд в будущем, а затем перерисовать график.
Тот факт, что на стороне сервера вы используете Django, не кажется таким уж важным - серверу просто нужно отформатировать кучу данных как JSON и в конце концов отправить их обратно.
Если данные состоят из графики на лету, вы можете просто передать их (в формате gif, png или любом другом графическом формате) через Django и перезагрузить каждый по отдельности или даже перезагрузить всю страницу сразу.
Это зависит от требований к загрузке и производительности, но вы можете начать просто перезагружать всю страницу, а затем, при необходимости, использовать AJAX для перезагрузки только каждой конкретной части (этого очень легко добиться с помощью jQuery или прототип с использованием обновлений). Если вы ожидаете большого количества данных, вам следует изменить его, чтобы сгенерировать графику на клиенте, используя только инкрементные данные JSON.