Данные в реальном времени на веб-странице с помощью jQuery

Question

Я хотел бы, чтобы веб-страница постоянно обновляла график новыми данными по мере их поступления. Регулярно все ваши данные передаются на страницу в начале запроса. Однако мне нужно, чтобы страница могла обновляться свежей информацией каждые несколько секунд, чтобы перерисовать график.

Фон

Веб-страница будет похожа на эту http://www.panic.com/blog/2010/03/the-panic-status-board/. При поступлении данных будут получены значения температуры, которые будут измерены с помощью Arduino и сохранены в базе данных Django (эта часть уже завершена).

Обновление

Звучит так, как будто решение состоит в том, чтобы использовать функцию jQuery.ajax() (http://api.jquery.com/jQuery.ajax/) с функцией обратного вызова .complete, которая через несколько секунд запланирует другой запрос на URL, который вернет данные Формат JSON.

Как можно запланировать этот метод? С функцией .delay()?

Answer 1

Таким образом, страница должна выполнять периодические jQuery.ajax вызовы с параметром url, установленным на URL-адрес сервера, на котором хранится самая последняя актуальная информация (возможно, просто как инкрементная дельта из последнего момента для которого у клиента есть информация - клиент может отправить этот момент в качестве параметра запроса в вызове Ajax), в идеале в форме JSON. Обратный вызов по завершении асинхронного запроса может запланировать следующие вызовы ajax на несколько секунд в будущем, а затем перерисовать график.

Тот факт, что на стороне сервера вы используете Django, не так уж важен - серверу просто нужно отформатировать кучу данных как JSON и в конце концов отправить их обратно.

Answer 2

Если данные состоят из графики «на лету», вы можете просто обслуживать их (в gif, png или любом другом графическом формате) через Django и перезагружать каждую по отдельности или даже перезагружать всю страницу сразу.

Это зависит от требований к нагрузке и производительности, но вы можете просто начать перезагрузку всей страницы, а затем, при необходимости, использовать AJAX для перезагрузки только каждой конкретной детали (это очень легко сделать с помощью jQuery или prototype, используя обновления). Если вы ожидаете много данных, то вам нужно перейти к генерации графики на клиенте, используя только инкрементные данные JSON.