Создание веб-приложения для IoT. Урок 5.

Здравствуйте, уважаемые коллеги!

Продолжаем серию уроков по созданию веб-приложения для интернета вещей. В предыдущих уроках мы создали готовое приложение, которое умеет принимать данные от удалённого устройства и предоставляет пользователю веб-интерфейс, через который можно управлять устройством и следить за показаниями его датчиков.

Приложение уже вполне работоспособно, но выглядит довольно топорно. Поэтому начиная с этого урока мы будем постепенно улучшать его, добавлять ему красоты и функциональности. И первое, что мы сделаем — научим интерфейс приложения автоматически обновляться.

Сейчас для того, чтобы увидеть в браузере новые данные, пришедшие от устройства (температуру, состояние реле), необходимо каждый раз вручную обновлять страницу приложения. Это жутко неудобно!

Давайте исправим этот недостаток, а заодно изучим ещё одну технологию веб-программирования — язык JavaScript.

Взаимодействие пользователя с приложением

Сейчас, когда мы открываем страницу веб-приложения происходит следующее:

Как мы уже говорили в предыдущих уроках, когда пользователь вводит в браузере адрес веб-приложения, браузер автоматически формирует запрос на сервер. В ответ сервер присылает браузеру HTML-код страницы приложения, который браузер преобразует в графический вид, привычный для пользователя.

Теперь мы хотим, чтобы страница обновлялась сама. Для этого браузер должен периодически повторять запрос на сервер, получать от него новые данные и обновлять страницу.

Такой фокус можно проделать средствами HTML. Для этого достаточно добавить в заголовок HTML-страницы мета-тег:

<meta http-equiv="Refresh" content="5" />

5 — число (в секундах) через которые будет обновляться страница.

Данный способ имеет право на жизнь, но происходит такое обновление очень некрасиво: страница как-бы закрывается и открывается заново. А если обновления происходят часто и интернет не слишком шустрый — выглядит это крайне ужасно (можете попробовать).

Второй способ обновления страницы (который мы и будем использовать): обновление при помощи JavaScript.

JavaScript

JavaScript — это скриптовый язык. Код на этом языке — это тоже часть веб-приложения, но он исполняется на стороне браузера, а не на стороне сервера (как php-код).

Если в приложении используется JavaScript, то он, так же как и HTML-код, передаётся в браузер.

JavaScript может быть встроен в HTML код. В этом случае используется теги <script> </script>. Весь код, заключённый в эти теги рассматривается браузером как программа для исполнения.

Второй способ передачи JavaScript — отдельным текстовым файлом с расширением .js. В этом случае в HTML-документ вставляют ссылку на этот файл. Например так:

<script src=/MyScript.js></script>

Принципиальной разницы между этими способами нет, но в больших приложениях чаще используют второй, поскольку это позволяет структурировать приложение.

Итак, вернёмся к нашим баранам… Мы хотим сделать так, чтобы страница приложения обновлялась сама. Для этого мы встроим в HTML-код микропрограмму на JavaScript. Она, попав в браузер, будет автоматически отправлять запросы на сервер и заменять старые данные на новые на странице приложения.

Программа на JavaScript будет выполняться циклично с заданным периодом. Она будет получать от браузера новый HTML-код страницы, содержащий обновлённые данные и подставлять его вместо «старого» HTML-кода.

Давайте перейдём от слов к делу и напишем сам скрипт.

Пишем скрипт

Заходим в каталог нашего приложения через меню «Файловый менеджер» и создаём новый файл «UpdateScript.js».

Затем открываем этот файл и вставляем туда следующий код:

setInterval(
function(){
//отправляем запрос на сервер
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘index.php’, true);
xhr.send();

//функция для обработки данных, полученных от сервера
xhr.onreadystatechange = function() {
if (this.readyState != 4) return; //Если ответ от сервера ещё не пришёл

if (this.status != 200) {
//Если произошла ошибка
return;
}

//Когда от сервера получен новый HTML-код, находим в старом коде
//элемент с ID=’App_interface’ и заменяем его на полученный код
var i_face = document.getElementById(‘App_interface’);
if(i_face!=null){
i_face.innerHTML = this.responseText;
}

};
delete(xhr);
},3000); //выполняем обновление каждые 3 секунды

Теперь открываем файл index.php и к тегу html добавляем id=»App_interface».

Затем размещаем внутри заголовочного тега <head> </head> ссылку на файл скрипта:

<script src=»/UpdateScript.js»> </script>

Должно получиться вот так:

Готово! Сохраняем наш файл и открываем в браузере страницу веб-приложения.

Теперь при поступлении новых данных от устройства, они будут автоматически обновляться в интерфейсе приложения.