Web Serial API: Pokonywanie luki między przeglądarkami internetowymi a urządzeniami sprzętowymi

Web Serial API to rewolucyjna technologia, która umożliwia programistom internetowym bezpośrednią interakcję z urządzeniami szeregowymi z poziomu przeglądarki internetowej. Otwiera to szeroki wachlarz możliwości, od sterowania robotami i systemami wbudowanymi po zbieranie danych z czujników i tworzenie interaktywnych doświadczeń fizycznych. Ten przewodnik zawiera kompleksowy przegląd Web Serial API, jego możliwości oraz sposobu wdrażania go w projektach, skierowany do globalnej publiczności programistów i entuzjastów.

Czym jest Web Serial API?

Web Serial API umożliwia aplikacjom internetowym komunikację z urządzeniami szeregowymi, takimi jak mikrokontrolery, płytki Arduino, drukarki 3D i inny sprzęt, bezpośrednio z przeglądarki. Odbywa się to za pośrednictwem portu szeregowego, standardowego interfejsu do komunikacji danych. W przeciwieństwie do poprzednich metod, które wymagały wtyczek lub natywnych aplikacji, Web Serial API zapewnia bezpieczny i ustandaryzowany sposób interakcji ze sprzętem.

Kluczowe cechy:

• Bezpieczny dostęp: Wymaga wyraźnej zgody użytkownika na dostęp do konkretnego urządzenia, zwiększając bezpieczeństwo.
• Kompatybilność międzyplatformowa: Działa na różnych systemach operacyjnych, w tym Windows, macOS, Linux i ChromeOS, zapewniając spójne doświadczenie.
• Ustandaryzowane API: Oferuje spójne i łatwe w użyciu API JavaScript do interakcji z urządzeniami szeregowymi.
• Strumieniowe przesyłanie danych: Obsługuje strumieniowe przesyłanie danych w czasie rzeczywistym, umożliwiając wizualizację i interakcję z danymi na żywo.
• Komunikacja dwukierunkowa: Ułatwia wysyłanie i odbieranie danych między aplikacją internetową a urządzeniem sprzętowym.

Korzyści z używania Web Serial API

Web Serial API oferuje liczne korzyści dla programistów, w tym:

• Uproszczone programowanie: Eliminuje potrzebę wtyczek specyficznych dla platformy lub tworzenia natywnych aplikacji, upraszczając proces programowania.
• Zwiększona dostępność: Sprawia, że interakcja ze sprzętem jest bardziej dostępna dla szerszego grona odbiorców, ponieważ użytkownicy mogą sterować urządzeniami bezpośrednio ze swoich przeglądarek internetowych.
• Poprawa komfortu użytkowania: Zapewnia bardziej płynne i intuicyjne doświadczenie użytkownika, ponieważ użytkownicy mogą wchodzić w interakcje ze sprzętem bez instalowania dodatkowego oprogramowania.
• Zwiększona interaktywność: Umożliwia tworzenie wysoce interaktywnych aplikacji internetowych, które integrują się ze światem fizycznym.
• Globalny zasięg: Dostęp do aplikacji internetowych zbudowanych za pomocą Web Serial API można uzyskać z dowolnego urządzenia z przeglądarką internetową i połączeniem internetowym, co ułatwia współpracę i innowacje na całym świecie.

Przypadki użycia i przykłady

Web Serial API można zastosować w szerokiej gamie projektów i aplikacji, w tym:

• Internet Rzeczy (IoT): Podłączanie aplikacji internetowych do danych z czujników z mikrokontrolerów, tworzenie pulpitów nawigacyjnych do monitorowania środowiska, inteligentnego sterowania domem i automatyzacji przemysłowej. Rozważ zastosowania w różnych lokalizacjach, takich jak monitorowanie temperatury w szklarni w Holandii lub śledzenie wilgotności gleby na farmie w Kenii.
• Robotyka i automatyzacja: Sterowanie robotami, dronami i innymi systemami automatycznymi bezpośrednio z interfejsu internetowego. Można to wykorzystać do celów edukacyjnych (np. programowanie robotów w szkole w Japonii) lub automatyzacji przemysłowej (np. sterowanie linią produkcyjną w Niemczech).
• Sterowanie drukiem 3D: Zarządzanie i monitorowanie drukarek 3D bezpośrednio z przeglądarki internetowej, umożliwiając użytkownikom zdalne przesyłanie i sterowanie zadaniami drukowania. Jest to szczególnie przydatne w rozproszonej produkcji i przestrzeniach dla twórców, jak widać w krajach takich jak Stany Zjednoczone lub Indie.
• Pozyskiwanie i wizualizacja danych: Zbieranie danych z czujników (np. temperatury, ciśnienia, światła) i wyświetlanie ich w czasie rzeczywistym na pulpicie nawigacyjnym w sieci. Ma to szerokie zastosowanie, od badań naukowych w Kanadzie po monitorowanie rolnictwa w Brazylii.
• Projekty edukacyjne: Uczenie uczniów o elektronice, programowaniu i interakcji ze sprzętem. Prostota Web Serial API czyni go dostępnym dla uczniów w każdym wieku i pochodzenia na całym świecie.
• Instalacje interaktywne: Tworzenie angażujących i interaktywnych instalacji, które reagują na dane wejściowe użytkownika lub dane z czujników. Przykłady obejmują instalacje artystyczne lub wystawy muzealne, wykorzystujące przetwarzanie fizyczne w krajach takich jak Australia.

Przykład: Sterowanie płytką Arduino

Stwórzmy prosty przykład sterowania diodą LED podłączoną do płytki Arduino. Użyjemy JavaScript do wysyłania poleceń do Arduino, a Arduino odpowie, włączając lub wyłączając diodę LED.

1. Kod Arduino (Arduino IDE):

            const int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);
      Serial.println("LED ON");
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);
      Serial.println("LED OFF");
    }
  }
}
            

              
                Copy
              
            
          

Ten kod Arduino:

• Ustawia pin LED jako wyjście.
• Inicjuje komunikację szeregową z szybkością 9600 bodów.
• Ciągle sprawdza przychodzące dane szeregowe.
• Jeśli dane zostaną odebrane, odczytuje znak.
• Jeśli znakiem jest '1', włącza diodę LED.
• Jeśli znakiem jest '0', wyłącza diodę LED.
• Wysyła wiadomość potwierdzającą z powrotem do portu szeregowego.

2. HTML i JavaScript (Przeglądarka internetowa):

            <!DOCTYPE html>
<html>
<head>
  <title>Web Serial LED Control</title>
</head>
<body>
  <button id="connectButton">Connect to Arduino</button>
  <button id="onButton" disabled>Turn LED On</button>
  <button id="offButton" disabled>Turn LED Off</button>
  <p id="status">Disconnected</p>

  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');
    const status = document.getElementById('status');
    let port;
    let writer;

    async function connect() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        status.textContent = 'Connected';
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        status.textContent = 'Error: ' + error.message;
      }
    }

    async function sendCommand(command) {
      try {
        const data = new TextEncoder().encode(command);
        await writer.write(data);
      } catch (error) {
        status.textContent = 'Error sending command: ' + error.message;
      }
    }

    async function turnOn() {
      await sendCommand('1');
    }

    async function turnOff() {
      await sendCommand('0');
    }

    connectButton.addEventListener('click', connect);
    onButton.addEventListener('click', turnOn);
    offButton.addEventListener('click', turnOff);
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Wyjaśnienie kodu JavaScript:

• Przycisk Połącz: Po kliknięciu żąda dostępu do portu szeregowego i próbuje go otworzyć.
• Przyciski Włącz/Wyłącz diodę LED: Wysyłają polecenie "1", aby włączyć diodę LED, i "0", aby wyłączyć diodę LED.
• Stan połączenia: Wyświetla bieżący stan połączenia.
• `navigator.serial.requestPort()`: Monituje użytkownika o wybranie portu szeregowego.
• `port.open()`: Otwiera wybrany port szeregowy. Parametr `baudRate` jest ustawiony tak, aby pasował do kodu Arduino (9600).
• `port.writable.getWriter()`: Tworzy writer do wysyłania danych do portu szeregowego.
• `writer.write(data)`: Zapisuje dane (polecenie) do portu szeregowego.
• Obsługa błędów: Zawiera obsługę błędów, aby zapewnić informacje zwrotne dla użytkownika.

Jak uruchomić przykład:

1. Podłącz Arduino: Podłącz płytkę Arduino do komputera przez USB.
2. Prześlij kod Arduino: Otwórz Arduino IDE i prześlij dostarczony kod do płytki Arduino.
3. Utwórz plik HTML: Zapisz kod HTML jako plik HTML (np. `index.html`).
4. Otwórz plik HTML w przeglądarce: Otwórz plik `index.html` w przeglądarce internetowej obsługującej Web Serial API (np. Chrome, Edge i niektóre wersje Opery).
5. Połącz i steruj: Kliknij przycisk "Connect to Arduino". Przeglądarka poprosi o wybranie portu szeregowego. Wybierz Arduino. Następnie kliknij przyciski "Turn LED On" i "Turn LED Off", aby sterować diodą LED.

Pierwsze kroki z Web Serial API

• Przeglądarka internetowa obsługująca Web Serial API: Obecnie obsługiwana przez Chrome, Edge i niektóre wersje Opery. Sprawdź kompatybilność przeglądarki w zasobach takich jak Can I Use.
• Urządzenie sprzętowe: Takie jak Arduino, Raspberry Pi lub dowolne urządzenie komunikujące się przez port szeregowy.
• Podstawowa znajomość HTML, CSS i JavaScript: Znajomość tych technologii internetowych jest niezbędna.

Przewodnik krok po kroku:

1. Poproś o dostęp do portu szeregowego: Użyj `navigator.serial.requestPort()`, aby wyświetlić monit użytkownikowi o wybranie portu szeregowego. Ta funkcja zwraca Promise, który rozwiązuje się do obiektu `SerialPort`. Uwaga: interakcja użytkownika (kliknięcie przycisku) jest zwykle wymagana do wywołania `requestPort()`.
2. Otwórz port szeregowy: Wywołaj metodę `port.open()`, przekazując obiekt konfiguracyjny, który określa szybkość transmisji i inne ustawienia portu szeregowego (np. dataBits, stopBits, parity). Szybkość transmisji musi odpowiadać szybkości używanej przez urządzenie sprzętowe.
3. Pobierz strumienie do odczytu i zapisu: Użyj właściwości `port.readable` i `port.writable`, aby uzyskać strumienie do odczytu i zapisu. Te strumienie są używane do wysyłania i odbierania danych.
4. Utwórz writer: Użyj metody `port.writable.getWriter()`, aby utworzyć obiekt `writer`, którego użyjesz do wysyłania danych do urządzenia.
5. Utwórz reader: Użyj metody `port.readable.getReader()`, aby utworzyć obiekt `reader`, którego użyjesz do odbierania danych z urządzenia.
6. Zapisz dane na urządzeniu: Użyj `writer.write(data)`, aby wysłać dane do portu szeregowego. `data` powinien być `ArrayBuffer` lub `Uint8Array`. Możesz użyć `TextEncoder`, aby przekonwertować ciąg znaków na `Uint8Array`.
7. Odczytaj dane z urządzenia: Użyj `reader.read()`, aby odczytać dane z portu szeregowego. Ta metoda zwraca Promise, który rozwiązuje się do obiektu zawierającego dane i wartość logiczną wskazującą, czy strumień jest zamknięty.
8. Zamknij port szeregowy: Po zakończeniu wywołaj `writer.close()` i `reader.cancel()`, aby zamknąć strumienie, a następnie wywołaj `port.close()`, aby zamknąć port szeregowy. Zawsze dołączaj obsługę błędów, aby zarządzać potencjalnymi problemami z komunikacją szeregową.

Przykłady kodu i najlepsze praktyki

1. Żądanie portu szeregowego:

            async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    return port;
  } catch (error) {
    console.error('Error requesting port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

2. Otwieranie i konfigurowanie portu szeregowego:

            async function openSerialPort(port) {
  try {
    await port.open({
      baudRate: 115200, // Adjust to match your device
      dataBits: 8,
      stopBits: 1,
      parity: 'none',
    });
    return port;
  } catch (error) {
    console.error('Error opening port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

3. Zapisywanie danych do portu szeregowego (ciąg znaków):

            async function writeToSerialPort(port, data) {
  const encoder = new TextEncoder();
  const writer = port.writable.getWriter();
  try {
    await writer.write(encoder.encode(data));
  } catch (error) {
    console.error('Error writing to port:', error);
  } finally {
    writer.releaseLock();
  }
}
            

              
                Copy
              
            
          

4. Odczytywanie danych z portu szeregowego:

            async function readFromSerialPort(port, callback) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Stream closed
        break;
      }
      if (value) {
        const decoder = new TextDecoder();
        const decodedValue = decoder.decode(value);
        callback(decodedValue);
      }
    }
  } catch (error) {
    console.error('Error reading from port:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

5. Zamykanie portu szeregowego:

            async function closeSerialPort(port) {
  if (port) {
    try {
      await port.close();
    } catch (error) {
      console.error('Error closing port:', error);
    }
  }
}
            

              
                Copy
              
            
          

Najlepsze praktyki:**

            async function startStreaming(port, dataCallback) {
  const reader = port.readable.getReader();
  let decoder = new TextDecoder();
  let buffer = '';

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break; // Stream closed
      }
      if (value) {
        buffer += decoder.decode(value);
        let newlineIndex = buffer.indexOf('\n'); // Or '\r' or similar terminator
        while (newlineIndex > -1) {
          const line = buffer.substring(0, newlineIndex);
          dataCallback(line); // Process the received data line
          buffer = buffer.substring(newlineIndex + 1);
          newlineIndex = buffer.indexOf('\n');
        }
      }
    }
  } catch (error) {
    console.error('Error during streaming:', error);
  } finally {
    reader.releaseLock();
  }
}

            

              
                Copy
              
            
          

            const port = await navigator.serial.requestPort({
  filters: [
    { usbVendorId: 0x2341, // Arduino Vendor ID
      usbProductId: 0x0043 }, // Arduino Uno Product ID
  ],
});
            

              
                Copy