Spletni Serijski API za Frontend: Celovit Vodnik po Komunikaciji s Serijskimi Napravami v Brskalniku

Spletni serijski API odpira vznemirljive nove možnosti za spletne aplikacije. Omogoča, da vaša frontend koda, ki se izvaja v brskalniku, neposredno komunicira s serijskimi napravami, povezanimi z uporabnikovim računalnikom. To je bilo prej področje delovanja izvornih aplikacij, zdaj pa lahko z mikrokontrolerji, 3D-tiskalniki, senzorji in starejšo strojno opremo komunicirate neposredno iz spletnega brskalnika. Predstavljajte si, da upravljate Arduino prek spletne nadzorne plošče, spremljate podatke senzorjev v realnem času ali komunicirate s starejšim serijskim tiskalnikom prek sodobnega spletnega vmesnika. Ta vodnik se bo poglobil v spletni serijski API, raziskal njegove funkcije in ponudil praktične primere za lažji začetek.

Kaj je spletni serijski API?

Spletni serijski API je spletni standard, ki spletnim aplikacijam omogoča komunikacijo s serijskimi napravami. Serijska komunikacija je široko uporabljena metoda za izmenjavo podatkov med napravami prek serijskih vrat. To je še posebej pogosto pri vgrajenih sistemih, industrijski opremi in starejši strojni opremi. API premošča vrzel med spletom in fizičnim svetom ter spletnim aplikacijam omogoča interakcijo s temi napravami brez potrebe po razširitvah brskalnika ali izvornih aplikacijah.

Ključne prednosti:

• Neposredna interakcija z napravami: Odpravlja potrebo po posredniških aplikacijah ali gonilnikih za osnovno serijsko komunikacijo.
• Združljivost med platformami: Spletne aplikacije, ki uporabljajo spletni serijski API, lahko delujejo na katerem koli operacijskem sistemu z združljivim brskalnikom.
• Izboljšana varnost: API je zasnovan z mislijo na varnost in zahteva izrecno dovoljenje uporabnika za dostop do serijskih vrat.
• Poenostavljen razvoj: Zagotavlja standardiziran vmesnik za serijsko komunikacijo, kar poenostavlja razvojni proces.

Podpora brskalnikov

Konec leta 2024 spletni serijski API podpirajo brskalniki, ki temeljijo na Chromiumu, kot so Google Chrome, Microsoft Edge in Opera. Podpora v drugih brskalnikih, kot sta Firefox in Safari, je v fazi razmisleka in razvoja. Priporočljivo je preveriti spletno stran Can I use za najnovejše informacije o združljivosti brskalnikov.

Varnostni vidiki

Spletni serijski API daje prednost varnosti in zasebnosti uporabnikov. Tukaj je nekaj ključnih varnostnih ukrepov:

• Dovoljenje uporabnika: Brskalnik bo uporabnika pozval k dovoljenju, preden bo spletni aplikaciji dovolil dostop do serijskih vrat. Uporabnik ima možnost odobriti ali zavrniti dostop.
• Samo varni konteksti: API je na voljo samo v varnih kontekstih (HTTPS). To pomaga preprečevati napade tipa "man-in-the-middle" in zagotavlja celovitost podatkov.
• Omejen dostop: API omogoča nadzorovan dostop do serijskih vrat, kar omejuje možnost zlonamernih dejavnosti.

Začetek: Praktičen primer z Arduinom

Oglejmo si preprost primer uporabe spletnega serijskega API-ja za komunikacijo z Arduino ploščico. Ta primer bo prikazal, kako pošiljati podatke iz spletnega brskalnika na Arduino in prejemati podatke nazaj.

Predpogoji:

• Arduino ploščica (npr. Arduino Uno, Nano ali Mega).
• Arduino IDE, nameščen na vašem računalniku.
• USB kabel za povezavo Arduina z računalnikom.
• Brskalnik, ki podpira spletni serijski API (Chrome, Edge, Opera).

1. korak: Arduino koda

Najprej naložite naslednjo kodo na svojo Arduino ploščico z uporabo Arduino IDE:

            void setup() {
 Serial.begin(9600);
}

void loop() {
 if (Serial.available() > 0) {
 String data = Serial.readStringUntil('\n');
 data.trim();
 Serial.print("Received: ");
 Serial.println(data);
 delay(100);
 }
}

            

              
                Copy
              
            
          

Ta koda inicializira serijsko komunikacijo s hitrostjo prenosa (baud rate) 9600. V funkciji `loop()` preverja, ali so na serijskih vratih na voljo kakšni podatki. Če so podatki na voljo, jih bere do prejema znaka za novo vrstico, odstrani vodilne ali sledeče presledke in nato prejete podatke pošlje nazaj na serijska vrata s predpono "Received: ".

2. korak: Struktura HTML

Ustvarite datoteko HTML (npr. `index.html`) z naslednjo strukturo:

            <!DOCTYPE html>
<html>
<head>
 <title>Web Serial API Example</title>
</head>
<body>
 <h1>Web Serial API Example</h1>
 <button id="connectButton">Connect to Serial Port</button>
 <textarea id="receivedData" rows="10" cols="50" readonly></textarea><br>
 <input type="text" id="dataToSend">
 <button id="sendButton">Send Data</button>
 <script src="script.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

Ta datoteka HTML vključuje gumb za povezavo s serijskimi vrati, tekstovno polje za prikaz prejetih podatkov, vnosno polje za vnos podatkov za pošiljanje in gumb za pošiljanje podatkov. Povezuje se tudi z datoteko JavaScript (`script.js`), ki bo vsebovala kodo za spletni serijski API.

3. korak: JavaScript koda (script.js)

Ustvarite datoteko JavaScript z imenom `script.js` z naslednjo kodo:

            const connectButton = document.getElementById('connectButton');
const receivedDataTextarea = document.getElementById('receivedData');
const dataToSendInput = document.getElementById('dataToSend');
const sendButton = document.getElementById('sendButton');

let port;
let reader;
let writer;

connectButton.addEventListener('click', async () => {
 try {
 port = await navigator.serial.requestPort();
 await port.open({ baudRate: 9600 });

 connectButton.disabled = true;
 sendButton.disabled = false;

 reader = port.readable.getReader();
 writer = port.writable.getWriter();

 // Listen to data coming from the serial device.
 while (true) {
 const { value, done } = await reader.read();
 if (done) {
 // Allow the serial port to be closed later.
 reader.releaseLock();
 break;
 }
 // value is a Uint8Array.
 receivedDataTextarea.value += new TextDecoder().decode(value);
 }
 } catch (error) {
 console.error('Serial port error:', error);
 }
});

sendButton.addEventListener('click', async () => {
 const data = dataToSendInput.value + '\n';
 const encoder = new TextEncoder();
 await writer.write(encoder.encode(data));
 dataToSendInput.value = '';
});

            

              
                Copy
              
            
          

Ta JavaScript koda upravlja povezavo s serijskimi vrati, prejemanje in pošiljanje podatkov. Razčlenimo kodo:

• Pridobivanje elementov: Pridobi reference na elemente HTML z uporabo njihovih ID-jev.
• Dogodek klika na `connectButton`: Ko kliknete gumb "Connect to Serial Port", se zgodi naslednje:
  • Pokliče `navigator.serial.requestPort()`, da uporabnika pozove k izbiri serijskih vrat.
  • Odpira izbrana vrata s hitrostjo prenosa 9600.
  • Onemogoči gumb za povezavo in omogoči gumb za pošiljanje.
  • Pridobi bralnik in pisalnik za berljive in zapisljive tokove vrat.
  • Vstopi v zanko za neprekinjeno branje podatkov s serijskih vrat.
  • Dekodira prejete podatke (ki so `Uint8Array`) z uporabo `TextDecoder` in jih doda v `receivedDataTextarea`.
• Dogodek klika na `sendButton`: Ko kliknete gumb "Send Data", se zgodi naslednje:
  • Pridobi podatke iz vnosnega polja `dataToSendInput`.
  • Podatkom doda znak za novo vrstico (`\n`). To je pomembno, ker Arduino koda bere podatke, dokler ne prejme znaka za novo vrstico.
  • Kodira podatke z uporabo `TextEncoder`, da jih pretvori v `Uint8Array`.
  • Zapiše kodirane podatke na serijska vrata z uporabo `writer.write()`.
  • Počisti vnosno polje `dataToSendInput`.

4. korak: Zaženite primer

Odprite datoteko `index.html` v brskalniku. Videti bi morali elemente HTML, definirane v datoteki.

1. Kliknite gumb "Connect to Serial Port". Brskalnik vas bo pozval, da izberete serijska vrata. Izberite vrata, povezana z vašo Arduino ploščico.
2. Ko se povežete, bo gumb "Connect to Serial Port" onemogočen, gumb "Send Data" pa omogočen.
3. Vnesite nekaj besedila v vnosno polje in kliknite gumb "Send Data".
4. V tekstovnem polju bi morali videti besedilo "Received: [vaše besedilo]". To pomeni, da so bili podatki uspešno poslani iz brskalnika na Arduino in nato poslani nazaj z Arduina v brskalnik.

Napredna uporaba in premisleki

Hitrost prenosa (Baud Rate)

Hitrost prenosa (baud rate) je hitrost, s katero se podatki prenašajo prek serijskih vrat. Ključnega pomena je, da se hitrost prenosa, nastavljena v vaši spletni aplikaciji, ujema s hitrostjo prenosa, nastavljeno na vaši serijski napravi (npr. v Arduino kodi). Pogoste hitrosti prenosa vključujejo 9600, 115200 in druge. Neujemajoče se hitrosti prenosa bodo povzročile popačene ali neberljive podatke.

Kodiranje podatkov

Podatki, preneseni prek serijskih vrat, so običajno predstavljeni kot zaporedje bajtov. Spletni serijski API uporablja `Uint8Array` za predstavitev teh bajtov. Morda boste morali kodirati in dekodirati podatke z ustreznimi shemami kodiranja (npr. UTF-8, ASCII), odvisno od vrste podatkov, ki jih prenašate.

Obravnavanje napak

Pomembno je, da v svoji spletni aplikaciji implementirate pravilno obravnavanje napak za reševanje morebitnih težav, kot so napake pri povezavi, napake pri prenosu podatkov in prekinitve povezave z napravo. Uporabite bloke `try...catch` za lovljenje izjem in zagotavljanje informativnih sporočil o napakah uporabniku.

Nadzor pretoka (Flow Control)

Mehanizmi za nadzor pretoka (npr. strojni nadzor pretoka, programski nadzor pretoka) se lahko uporabljajo za preprečevanje izgube podatkov, ko pošiljatelj prenaša podatke hitreje, kot jih prejemnik lahko obdela. Spletni serijski API podpira strojni nadzor pretoka (CTS/RTS). Preverite posebne zahteve vaše serijske naprave, da ugotovite, ali je nadzor pretoka potreben.

Zapiranje vrat

Pomembno je, da pravilno zaprete serijska vrata, ko jih nehate uporabljati. To sprosti vrata in omogoči drugim aplikacijam ali napravam, da jih uporabljajo. Vrata lahko zaprete z metodo `port.close()`.

            if (port) {
 await reader.cancel();
 await reader.releaseLock();
 await writer.close();
 await port.close();
}

            

              
                Copy
              
            
          

Spletni serijski API in Bluetooth

Čeprav spletni serijski API sam po sebi neposredno ne upravlja povezav Bluetooth, ga je mogoče uporabiti v povezavi s serijskimi adapterji Bluetooth. Ti adapterji delujejo kot most, ki pretvarjajo komunikacijo Bluetooth v serijsko komunikacijo, s katero lahko nato upravlja spletni serijski API. To odpira možnosti za interakcijo z napravami, ki podpirajo Bluetooth, iz vašega spletnega brskalnika.

Aplikacije v resničnem svetu

Spletni serijski API ima širok spekter potencialnih aplikacij v različnih industrijah in domenah:

• Industrijska avtomatizacija: Upravljanje in nadzor industrijske opreme in strojev prek spletnega vmesnika. Na primer, delavec v tovarni v Nemčiji bi lahko s spletno aplikacijo v realnem času spremljal temperaturo in tlak stroja.
• Robotika: Interakcija z roboti in robotskimi sistemi, kar omogoča daljinsko upravljanje in zajem podatkov. Predstavljajte si upravljanje robotske roke na Japonskem z nadzorne plošče v Kanadi.
• 3D-tiskanje: Upravljanje in nadzor 3D-tiskalnikov, kar uporabnikom omogoča nalaganje modelov, spremljanje napredka tiskanja in prilagajanje nastavitev iz spletnega brskalnika. Uporabnik v Italiji bi lahko začel tiskalni posel na svojem 3D-tiskalniku doma iz svoje pisarne.
• Naprave interneta stvari (IoT): Povezovanje in interakcija z napravami IoT, kot so senzorji, aktuatorji in sistemi za avtomatizacijo doma. Na primer, kmet v Braziliji bi lahko na daljavo spremljal raven vlage v tleh in nadzoroval namakalne sisteme s spletno aplikacijo.
• Izobraževalna orodja: Ustvarjanje interaktivnih izobraževalnih orodij in eksperimentov, ki vključujejo fizično strojno opremo, kar naredi učenje bolj privlačno in praktično. Dijaki pri pouku fizike bi lahko uporabili API za zbiranje podatkov s senzorja, priključenega na nihalo.
• Dostopnost: Zagotavljanje alternativnih vmesnikov za naprave, ki so morda težke za neposredno uporabo za uporabnike z invalidnostmi. Oseba z omejeno mobilnostjo bi lahko upravljala pametno domačo napravo prek spletnega vmesnika z uporabo sistema za sledenje glave.

Alternative spletnemu serijskemu API-ju

Čeprav spletni serijski API ponuja priročen način za neposredno komunikacijo s serijskimi napravami iz brskalnika, obstajajo alternativni pristopi, ki so lahko primerni glede na vaše specifične zahteve:

• WebUSB API: WebUSB API omogoča spletnim aplikacijam komunikacijo z napravami USB. Čeprav ponuja večjo prilagodljivost in nadzor v primerjavi s spletnim serijskim API-jem, zahteva tudi bolj zapleteno implementacijo in morda ni primeren za preproste naloge serijske komunikacije.
• Izvorne aplikacije s serijskimi knjižnicami: Tradicionalne namizne aplikacije lahko za interakcijo s serijskimi napravami uporabljajo knjižnice za serijsko komunikacijo (npr. libserialport, pySerial). Ta pristop ponuja največ nadzora in prilagodljivosti, vendar zahteva, da uporabniki namestijo izvorno aplikacijo na svoj računalnik.
• Razširitve brskalnika: Razširitve brskalnika lahko zagotovijo dostop do serijskih vrat in drugih strojnih virov. Vendar pa morajo uporabniki razširitve namestiti ločeno in lahko povzročajo varnostne pomisleke.
• Node.js s Serialport: Uporaba Node.js na zaledju (backend) ponuja zelo robustno rešitev za upravljanje naprav in ustvarjanje varnega API-ja za vaš frontend. To v mnogih primerih uporabe zagotavlja večji nadzor in varnost kot neposreden dostop iz brskalnika.

Odpravljanje pogostih težav

Tukaj je nekaj pogostih težav, na katere lahko naletite pri delu s spletnim serijskim API-jem, in kako jih odpraviti:

• Povezava s serijskimi vrati ni mogoča:
  • Prepričajte se, da serijska vrata niso že odprta v drugi aplikaciji.
  • Preverite, ali so v pozivu brskalnika izbrana pravilna serijska vrata.
  • Preverite, ali se hitrost prenosa, nastavljena v vaši spletni aplikaciji, ujema s hitrostjo prenosa serijske naprave.
  • Zagotovite, da je uporabnik podelil dovoljenje spletni aplikaciji za dostop do serijskih vrat.
• Popačeni ali neberljivi podatki:
  • Preverite, ali se hitrosti prenosa pravilno ujemajo.
  • Preverite shemo kodiranja podatkov (npr. UTF-8, ASCII).
  • Prepričajte se, da se podatki pravilno prenašajo in prejemajo s strani serijske naprave.
• Izguba podatkov:
  • Razmislite o uporabi mehanizmov za nadzor pretoka za preprečevanje izgube podatkov.
  • Povečajte velikost medpomnilnika za prejemanje podatkov.
  • Optimizirajte logiko obdelave podatkov, da se izognete zamudam.
• Težave z združljivostjo brskalnikov:
  • Preverite združljivost brskalnikov s spletnim serijskim API-jem z uporabo Can I use.
  • Uporabite zaznavanje funkcij, da se pred uporabo prepričate, da brskalnik podpira API.

Prihodnost spletnega serijskega API-ja

Spletni serijski API predstavlja pomemben korak k premostitvi vrzeli med spletom in fizičnim svetom. Ker podpora brskalnikov še naprej raste in se API razvija, lahko pričakujemo, da se bo pojavilo še več inovativnih aplikacij, ki izkoriščajo moč serijske komunikacije znotraj spletnih aplikacij. Ta tehnologija odpira vrata novim možnostim na področju interneta stvari, industrijske avtomatizacije, robotike, izobraževanja in mnogih drugih področij.

Zaključek

Spletni serijski API opolnomoči spletne razvijalce za ustvarjanje aplikacij, ki neposredno komunicirajo s serijskimi napravami, kar odpira bogastvo možnosti za spletno upravljanje, nadzor in zajem podatkov. Ta vodnik ponuja celovit pregled API-ja, vključno z njegovimi funkcijami, varnostnimi vidiki, praktičnimi primeri in nasveti za odpravljanje težav. Z razumevanjem in uporabo spletnega serijskega API-ja lahko ustvarite inovativne in privlačne spletne aplikacije, ki se brezhibno integrirajo s fizičnim svetom.