Последовательный порт

Интерфейс Serial API последовательного порта предоставляет атрибуты и методы для поиска и подключения к портам последовательного ввода-вывода из веб-страницы.

Serial.requestPort() Экспериментально

Возвращает Promise, который разрешается экземпляром SerialPort, представляющим выбранное пользователем устройство. Этот метод должен вызываться с помощью временного активирования.

Serial.getPorts() Экспериментально

Возвращает Promise, который разрешается массивом объектов SerialPort, представляющих порты последовательного ввода-вывода, подключенные к хосту, к которому у источника есть разрешение доступа.

Следующие события доступны Serial через распространение событий от SerialPort:

SerialPort connect событие

Событие, срабатывающее при подключении порта к устройству.

SerialPort disconnect событие

Событие, срабатывающее при отключении порта от устройства.

Следующий пример демонстрирует, как сайт может проверить доступные порты и разрешить пользователю предоставить ему разрешение на доступ к дополнительным портам.

При загрузке добавляются обработчики событий для connect и disconnect событий, чтобы сайт мог реагировать при подключении или отключении устройства от системы. Затем вызывается метод getPorts(), чтобы определить, какие порты подключены, и к которым у сайта уже есть доступ.

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

navigator.serial.addEventListener("connect", (e) => {
  // Connect to `e.target` or add it to a list of available ports.
});

navigator.serial.addEventListener("disconnect", (e) => {
  // Remove `e.target` from the list of available ports.
});

navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports with `ports` on page load.
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // Connect to `port` or add it to the list of available ports.
    })
    .catch((e) => {
      // The user didn't select a port.
    });
});