Современные веб-приложения перестают быть чисто «онлайн-сервисами». Сегодня они способны взаимодействовать с реальными устройствами. Один из примеров — Web Serial API, который позволяет браузеру подключаться к последовательным портам (COM, USB-UART) и напрямую обмениваться данными с микроконтроллерами.
Зачем это нужно
Если раньше для общения с Arduino требовалось писать настольные программы или использовать промежуточные серверы, то теперь можно:
- отправлять команды с веб-интерфейса напрямую на микроконтроллер,
- собирать показания датчиков в реальном времени,
- строить графики и дашборды без дополнительных библиотек.
Поддержка API
Web Serial API доступен в Chromium-браузерах (Chrome, Edge, Opera, Brave) начиная с версии 89. Работает только через HTTPS или localhost.
Проверить поддержку можно так:
if ("serial" in navigator) {
console.log("Web Serial API доступен");
} else {
console.log("Ваш браузер не поддерживает Web Serial API");
}
Работа с портом
Запрос порта и подключение
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
Браузер откроет диалоговое окно, где пользователь выберет Arduino-устройство. После этого порт можно использовать для обмена данными.
Чтение данных с Arduino
Допустим, Arduino отправляет значения температуры с датчика каждые 2 секунды:
const reader = port.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
if (value) {
const text = new TextDecoder().decode(value);
console.log("Температура:", text);
}
}
reader.releaseLock();
Отправка команд на Arduino
Например, включим светодиод командой "LED_ON\n":
const writer = port.writable.getWriter();
const data = new TextEncoder().encode("LED_ON\n");
await writer.write(data);
writer.releaseLock();
На стороне Arduino достаточно слушать Serial.read() и включать/выключать пин.
Закрытие соединения
await port.close();
Практический пример
Представим панель управления в браузере: кнопка включает светодиод, а поле рядом показывает температуру с датчика DHT11.
async function run() {
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
const reader = port.readable.getReader();
// Чтение данных
(async () => {
while (true) {
const { value, done } = await reader.read();
if (done) break;
if (value) {
document.querySelector("#temp").innerText =
new TextDecoder().decode(value);
}
}
})();
// Кнопка для управления светодиодом
document.querySelector("#led").addEventListener("click", async () => {
const writer = port.writable.getWriter();
await writer.write(new TextEncoder().encode("LED_ON\n"));
writer.releaseLock();
});
}
Так всего в нескольких строках кода мы получаем веб-панель управления Arduino без сторонних приложений.
Ограничения
- Только HTTPS (или
localhost). - Поддержка ограничена браузерами на базе Chromium.
- Пользователь вручную выбирает устройство, автоподключение невозможно.
Заключение
Web Serial API открывает путь к созданию удобных и безопасных веб-интерфейсов для работы с Arduino и другими микроконтроллерами. Теперь можно строить полноценные IoT-панели, системы мониторинга и интерактивные контроллеры прямо в браузере.
Добавить комментарий