От переводчика. В сети есть много информации о работе веб-серверов на микроконтроллерах, но она плохо структурирована и не отличается системным подходом к изложению материала. Среди прочих есть в интернете один замечательный, можно сказать культовый, туториал (руководство) по работе веб-серверов на Arduino от проекта Starting Electronics. Его авторам удалось невозможное: всего в нескольких уроках просто и доступно донести сложные вещи — как сам принцип работы веб-вервера, так и работу сопутствующих технологий (HTTP, HTML, CSS, Javascript, AJAX и т. д.) и причём сделать в практической плоскости.

Далее я предлагаю вашему вниманию перевод первых двух частей, скомпонованных в одну статью. Затем последует перевод и публикация и всех остальных частей (уроков) этого руководства.

❯ Часть 1. О руководстве и начало работы

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

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

В этом руководстве объясняется как работают веб-серверы, включая подробные пояснения по всем сопутствующим технологиям, таким как HTTP, HTML, CSS, JavaScript, AJAX и т. д. Сложность уроков постепенно возрастает, начиная с создания простой веб-страницы на Arduino и постепенно усложняясь (но всё равно оставаясь доступной для понимания начинающими).

Оборудование

Оборудование, необходимое для работы с этим руководством:

• Контроллер Arduino, например Arduino Uno
• Плата сетевого интерфейса Arduino Ethernet Shield
• Сетевой Ethernet кабель для подключения к роутеру
• USB кабель для питания и программирования контроллера Arduino
• microSD карта памяти, например, размером 2 ГБ (требуется только для некоторых уроков)
• Компьютер со слотом для microSD карты (требуется только для серверов с SD картами)

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

Настройка системы

Перед началом работы нужно убедиться в общей работоспособности вашей системы (здесь предполагается, что вы обладаете начальными знаниями работы с Arduino):

• Подключите Ethernet Shield к контроллеру Arduino и убедитесь в его работоспособности при помощи стандартных примеров.
• Таким же образом протестируйте работу microSD карты памяти в составе вашей системы.

❯ Часть 2. Базовый вариант Arduino веб-сервера

Это очень простой вариант веб-сервера, который с помощью Arduino Ethernet Shield обслуживает (передаёт в ответ на запрос пользователя) одну веб-страницу. SD карта в этом примере не используется, так как код веб-страницы хранится непосредственно в скетче Arduino.

Сервер с хранением веб-страницы в скетче Arduino

Следующий скетч позволяет контроллеру Arduino с Ethernet Shield передавать в ответ на запрос одну веб-страницу, которая затем отображается в браузере пользователя.

/*--------------------------------------------------------------
  Скетч: eth_websrv_page

  Описание: базовый пример веб-сервера Arduino со страницей, хранящейся в самом скетче (SD карта не используется)
  
  Оборудование: Arduino Uno и Arduino Ethernet Shield
                
  Программное обеспечение: Среда разработки Arduino IDE
  
  Ссылки: WebServer example by David A. Mellis and modified by Tom Igoe, Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet

  Дата создания: 7 января 2013
 
  Автор: W. A. Smith (http://startingelectronics.org)
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>

// MAC-адрес сетевой платы
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 20); // IP-адрес (нужно изменить на актуальный для вашей сети)
EthernetServer server(80);  // создаём сервер на 80 порту

void setup() {
    Ethernet.begin(mac, ip);  // инициализируем Ethernet
    server.begin();           // начинаем ожидать запросы от клиента
}

void loop() {
    EthernetClient client = server.available();  // (если есть) «получаем» клиента

    if (client) {  // есть клиент?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // данные от клиента доступны для чтения
                char c = client.read(); // чтение 1 байта (символа) от клиента
                // последняя строка от запроса клиента пустая и заканчивается на \n
                // отвечаем клиенту только после окончания запроса
                if (c == '\n' && currentLineIsBlank) {
                    // посылаем стандартный заголовок ответа
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();
                    //посылаем саму веб-страницу
                    client.println("<!DOCTYPE html>");
                    client.println("<html>");
                    client.println("<head>");
                    client.println("<title>Arduino Web Page</title>");
                    client.println("</head>");
                    client.println("<body>");
                    client.println("<h1>Hello from Arduino!</h1>");
                    client.println("<p>A web page from the Arduino server</p>");
                    client.println("</body>");
                    client.println("</html>");
                    break;
                }
                // каждая строка текста, принятая от клиента, оканчивается на \r\n
                if (c == '\n') {
                    // последний символ в строке принятого текста
                    // начинаем новую строку со следующего прочитанного символа
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // от клиента получен текстовый символ
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // даём время браузеру для приёма наших данных
        client.stop(); // закрываем соединение
    } // end if (client)
}

Важное замечание!

Если неинициализированная SD карта находится в картридере платы Ethernet Shield, то это может вызвать проблемы в работе Ethernet интерфейса. Внешне эта проблема проявляется как зависание или постоянные рестарты системы. Это связано с тем, что Ethernet чип и SD карта работают на одной шине SPI и попытки прочитать неисправную карту блокируют нормальную работу сетевого интерфейса.

Если SD карта не используется в вашем скетче, то вам нужно или извлечь ее из системы, или добавить в скетч следующий код, чтобы отключить SD карту программно:

void setup() {
    // Отключите SD карту, установив высокий уровень на 4 пине
    pinMode(4, OUTPUT);
    digitalWrite(4, HIGH);
    
    // прочий код инициализации...
}

Использование скетча

Скопируйте приведенный выше код и вставьте его в новый скетч Arduino IDE. Вы можете изменить MAC-адрес, указанный в скетче (но делать это не обязательно). Если указанный в скетче IP-адрес (10.0.0.20) не соответствует вашей подсети, то его нужно изменить соответствующим образом.

Примечание переводчика. В наших краях, указанный в скетче IP-адрес 10.0.0.20 будет скорее всего выглядеть как 192.168.1.20, где «192.168.1» — это номер вашей подсети (должен быть как и у других компьютеров в локальной сети), а «20» — это номер вашего контроллера Arduino в локальной сети (не должен быть занят другими сетевыми устройствами).

К этому моменту ваше оборудование должно быть настроено и проверено, как описано в 1-й части этого руководства. Загрузите скетч в плату Arduino, а затем откройте браузер на компьютере, подключенном к той же сети, что и ваш контроллер.

Введите IP-адрес контроллера Arduino (10.0.0.20 или ваш актуальный) в поле URL-адреса браузера на вашем компьютере. Браузер должен отобразить веб-страницу, как показано ниже.

❯ Решение проблем

Перезагрузка

Если вам не удалось подключиться к вашему Arduino веб-серверу, то попробуйте перезагрузить его, нажав кнопку Reset на плате Ethernet Shield, а затем снова повторите попытку подключения.

IP-адрес и диапазон адресов

Убедитесь, что вы установили правильный IP-адрес контроллера Arduino. Первые три цифры IP-адреса должны соответствовать вашей сети. Последний номер должен быть уникальным, то есть это должно быть единственное устройство в сети с таким номером.

Шлюз и маска подсети

Если остались проблемы с сетевым подключением, то попробуйте указать в скетче IP-адрес сетевого шлюза (роутера) и маску подсети. Вам нужно будет изменить адреса в приведенном ниже коде, чтобы они соответствовали вашей сети.

Добавьте новые параметры в скетче под MAC-адресом:

// IP-адрес шлюза
byte gateway[] = { 10, 0, 0, 1 };
// Маска подсети
byte subnet[] = { 255, 255, 0, 0 };

А затем измените в функции setup() строку инициализации Ethernet с новыми параметрами:

Ethernet.begin(mac, ip, gateway, subnet);

Ethernet кабель

При подключении к сети контроллера Arduino через роутер или коммутатор, используйте Ethernet кабель с «прямым» соединением проводов, а не с перекрестным.

❯ Как работает веб-сервер

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

Запрос клиента

Когда вы обращаетесь к серверу Arduino из адресной строки браузера, он, выступая в роли клиента, отправляет на сервер запрос, подобный этому:

GET / HTTP/1.1\r\n
Host: 10.0.0.20\r\n
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3\r\n
Accept-Encoding: gzip, deflate\r\n
Connection: keep-alive\r\n
\r\n

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

Символы \r\n, которые вы видите в конце каждой строки текста в запросе, являются невидимыми (непечатаемыми). \r — это символ возврата каретки, а \n — символ новой строки.

Окончание запроса клиента определяется передачей пустой строки с символами \r\n (без предшествующего текста). Появление в запросе такой строки проверяется кодом нашего скетча и, после её получения, веб-сервер фиксирует факт окончания запроса и начинает отправку ответа клиенту.

Другими словами, код скетча считывает каждый символ из запроса и определяет его окончание, когда находит пустую строку с символами \r\n.

Ответ сервера

После получения запроса веб-страницы от клиента, сервер сначала отправляет стандартный (определённый спецификациями) HTTP-ответ, а затем тело самой веб-страницы.

Ответ, отправляемый сервером Arduino, выглядит так:

HTTP/1.1 200 OK\r\n
Content-Type: text/html\r\n
Connection: close\r\n
\r\n

В приведенном выше ответе снова показаны невидимые символы \r\n. Функция println() в скетче автоматически добавляет символы \r\n в конец каждой строки. Пустая функция println() в конце HTTP-ответа просто отправляет пару символов \r\n без текста перед ними.

Формат приведенных выше запроса клиента и ответа веб-сервера определяется стандартом протокола HTTP (Hypertext Transfer Protocol).

Веб-страница

После того, как сервер отправил HTTP-ответ клиенту, он начинает отправку тела самой запрошенной веб-страницы, которая затем отображается в браузере.

Веб-страница состоит из текста с HTML-тегами. Сами теги не отображаются в браузере, поскольку предназначены только для разметки текста и интерпретации её браузером.

Чтобы увидеть исходный HTML код, в браузере кликните правой кнопкой мыши на веб-странице и выберите пункт контекстного меню «Просмотреть исходный код страницы».

Полный код сформированной нашим сервером страницы и её HTML-разметку можно увидеть на скриншоте ниже:



HTML разметку и прочий код веб-страниц мы подробно рассмотрим в следующей части этого руководства.

❯ От переводчика о 1-й и 2-й части

Пока я переводил эти части туториала от Starting Electronics, то постоянно боролся с желанием развернуть каждый абзац текста в более объёмное объяснение. Но видимо магия этого руководства заключается в том, что его авторам удалось отделить существенное от несущественного и оставить только самую суть.

От себя я бы порекомендовал начинающим собрать свой (первый) веб-сервер на Arduino и провести практические эксперименты со скетчем из этой статьи. Приобретённые в их ходе навыки и понимание понадобятся вам для успешного освоения следующих частей туториала.