Frontend Web Serial API: Kattava opas sarjalaitteiden kommunikointiin selaimessa

Web Serial API avaa uusia jännittäviä mahdollisuuksia verkkosovelluksille. Se antaa selaimessa ajettavalle frontend-koodillesi mahdollisuuden kommunikoida suoraan käyttäjän tietokoneeseen liitettyjen sarjalaitteiden kanssa. Tämä oli aiemmin mahdollista vain natiivisovelluksilla, mutta nyt voit olla vuorovaikutuksessa mikro-ohjainten, 3D-tulostimien, antureiden ja vanhan laitteiston kanssa suoraan verkkoselaimestasi. Kuvittele ohjaavasi Arduinoa verkkopohjaisesta kojelaudasta, valvovasi anturidataa reaaliajassa tai käyttäväsi vanhaa sarjatulostinta modernin verkkokäyttöliittymän kautta. Tämä opas syventyy Web Serial API:in, tutkii sen ominaisuuksia ja tarjoaa käytännön esimerkkejä, joiden avulla pääset alkuun.

Mikä on Web Serial API?

Web Serial API on verkkostandardi, joka tarjoaa tavan verkkosovellusten kommunikoida sarjalaitteiden kanssa. Sarjaliikenne on laajalti käytetty menetelmä tiedonvaihtoon laitteiden välillä sarjaportin kautta. Tämä on erityisen yleistä sulautetuissa järjestelmissä, teollisuuslaitteissa ja vanhemmassa laitteistossa. API siltaa kuilun verkon ja fyysisen maailman välillä, mahdollistaen verkkosovellusten vuorovaikutuksen näiden laitteiden kanssa ilman selainlaajennuksia tai natiivisovelluksia.

Keskeiset hyödyt:

• Suora laitevuorovaikutus: Poistaa tarpeen välittäjäsovelluksille tai ajureille perussarjaliikenteessä.
• Monialustainen yhteensopivuus: Web Serial API:tä käyttävät verkkosovellukset toimivat missä tahansa käyttöjärjestelmässä, jossa on yhteensopiva selain.
• Parannettu tietoturva: API on suunniteltu tietoturva edellä, vaatien käyttäjältä nimenomaisen luvan sarjaporttien käyttöön.
• Yksinkertaistettu kehitys: Tarjoaa standardoidun rajapinnan sarjaliikenteelle, mikä yksinkertaistaa kehitysprosessia.

Selaintuki

Vuoden 2024 lopulla Web Serial API:ta tukevat Chromium-pohjaiset selaimet, kuten Google Chrome, Microsoft Edge ja Opera. Tuki muissa selaimissa, kuten Firefoxissa ja Safarissa, on harkinnassa ja kehitteillä. On suositeltavaa tarkistaa viimeisimmät selaimen yhteensopivuustiedot Can I use -sivustolta.

Tietoturvaan liittyviä näkökohtia

Web Serial API asettaa etusijalle tietoturvan ja käyttäjän yksityisyyden. Tässä on joitain keskeisiä turvatoimia:

• Käyttäjän lupa: Selain pyytää käyttäjältä luvan ennen kuin se sallii verkkosovelluksen käyttää sarjaporttia. Käyttäjällä on mahdollisuus myöntää tai evätä pääsy.
• Vain suojatuissa yhteyksissä: API on käytettävissä vain suojatuissa yhteyksissä (HTTPS). Tämä auttaa estämään väliintulohyökkäyksiä ja varmistaa datan eheyden.
• Rajoitettu pääsy: API tarjoaa hallitun pääsyn sarjaporttiin, mikä rajoittaa haitallisen toiminnan mahdollisuuksia.

Aloitus: Käytännön esimerkki Arduinolla

Käydään läpi yksinkertainen esimerkki Web Serial API:n käytöstä Arduino-kortin kanssa kommunikointiin. Tämä esimerkki näyttää, kuinka dataa lähetetään verkkoselaimesta Arduinoon ja vastaanotetaan dataa takaisin.

Edellytykset:

• Arduino-kortti (esim. Arduino Uno, Nano tai Mega).
• Arduino IDE asennettuna tietokoneellesi.
• USB-kaapeli Arduinon yhdistämiseksi tietokoneeseen.
• Web Serial API:tä tukeva selain (Chrome, Edge, Opera).

Vaihe 1: Arduino-koodi

Lataa ensin seuraava koodi Arduino-kortillesi Arduino IDE:n avulla:

            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
              
            
          

Tämä koodi alustaa sarjaliikenteen 9600 baudin nopeudella. `loop()`-funktiossa se tarkistaa, onko sarjaportilla saatavilla dataa. Jos dataa on saatavilla, se lukee datan rivinvaihtomerkkiin asti, poistaa mahdolliset alusta ja lopusta löytyvät välilyönnit ja lähettää sitten vastaanotetun datan takaisin sarjaporttiin etuliitteellä "Received: ".

Vaihe 2: HTML-rakenne

Luo HTML-tiedosto (esim. `index.html`) seuraavalla rakenteella:

            


 


 
Web Serial API Example
 Connect to Serial Port
 

 
 Send Data
 



            

              
                Copy
              
            
          

Tämä HTML-tiedosto sisältää painikkeen sarjaporttiin yhdistämiseksi, tekstialueen vastaanotetun datan näyttämiseksi, syöttökentän lähetettävän datan syöttämiseksi ja painikkeen datan lähettämiseksi. Se linkittää myös JavaScript-tiedostoon (`script.js`), joka sisältää Web Serial API -koodin.

Vaihe 3: JavaScript-koodi (script.js)

Luo JavaScript-tiedosto nimeltä `script.js` seuraavalla koodilla:

            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
              
            
          

Tämä JavaScript-koodi käsittelee yhteyden muodostamisen sarjaporttiin, datan vastaanottamisen ja lähettämisen. Puretaan koodi osiin:

• Hae elementit: Se hakee viittaukset HTML-elementteihin niiden ID:n perusteella.
• `connectButton` Klikkaustapahtuma: Kun "Connect to Serial Port" -painiketta klikataan, tapahtuu seuraavaa:
  • Se kutsuu `navigator.serial.requestPort()`-funktiota, joka pyytää käyttäjää valitsemaan sarjaportin.
  • Se avaa valitun portin 9600 baudin nopeudella.
  • Se poistaa yhdistämispainikkeen käytöstä ja ottaa lähetyspainikkeen käyttöön.
  • Se hakee lukijan ja kirjoittajan portin luettaville ja kirjoitettaville virroille.
  • Se aloittaa silmukan, joka lukee jatkuvasti dataa sarjaportista.
  • Se purkaa vastaanotetun datan (joka on `Uint8Array`) `TextDecoder`-luokan avulla ja liittää sen `receivedDataTextarea`-elementtiin.
• `sendButton` Klikkaustapahtuma: Kun "Send Data" -painiketta klikataan, tapahtuu seuraavaa:
  • Se hakee datan `dataToSendInput`-syöttökentästä.
  • Se lisää rivinvaihtomerkin (`\n`) dataan. Tämä on tärkeää, koska Arduino-koodi lukee dataa rivinvaihtomerkkiin asti.
  • Se koodaa datan `TextEncoder`-luokan avulla muuttaakseen sen `Uint8Array`-muotoon.
  • Se kirjoittaa koodatun datan sarjaporttiin `writer.write()`-metodilla.
  • Se tyhjentää `dataToSendInput`-syöttökentän.

Vaihe 4: Aja esimerkki

Avaa `index.html`-tiedosto selaimessasi. Sinun pitäisi nähdä tiedostossa määritellyt HTML-elementit.

1. Klikkaa "Connect to Serial Port" -painiketta. Selain pyytää sinua valitsemaan sarjaportin. Valitse Arduino-korttiisi liittyvä portti.
2. Kun yhteys on muodostettu, "Connect to Serial Port" -painike poistuu käytöstä ja "Send Data" -painike tulee käyttöön.
3. Kirjoita tekstiä syöttökenttään ja klikkaa "Send Data" -painiketta.
4. Sinun pitäisi nähdä teksti "Received: [sinun tekstisi]" ilmestyvän tekstialueeseen. Tämä osoittaa, että data on onnistuneesti lähetetty selaimesta Arduinoon ja sitten takaisin Arduinosta selaimeen.

Edistynyt käyttö ja huomioitavat asiat

Baudinopeus

Baudinopeus on nopeus, jolla dataa siirretään sarjaportin yli. On ratkaisevan tärkeää, että verkkosovelluksessasi määritetty baudinopeus vastaa sarjalaitteessasi (esim. Arduino-koodissa) määritettyä baudinopeautta. Yleisiä baudinopeuksia ovat 9600, 115200 ja muut. Yhteensopimattomat baudinopeudet johtavat sotkuiseen tai lukukelvottomaan dataan.

Datan koodaus

Sarjaportin yli siirretty data esitetään tyypillisesti tavujen sarjana. Web Serial API käyttää `Uint8Array`-muotoa näiden tavujen esittämiseen. Saatat joutua koodaamaan ja purkamaan dataa sopivilla koodausjärjestelmillä (esim. UTF-8, ASCII) riippuen siirrettävän datan tyypistä.

Virheidenkäsittely

On tärkeää toteuttaa asianmukainen virheidenkäsittely verkkosovelluksessasi mahdollisten ongelmien, kuten yhteysvirheiden, tiedonsiirtovirheiden ja laitteen yhteyden katkeamisten, käsittelemiseksi. Käytä `try...catch`-lohkoja poikkeusten nappaamiseen ja informatiivisten virheilmoitusten antamiseen käyttäjälle.

Vuonohjaus

Vuonohjausmekanismeja (esim. laitteistopohjainen vuonohjaus, ohjelmistopohjainen vuonohjaus) voidaan käyttää datan häviämisen estämiseen, kun lähettäjä lähettää dataa nopeammin kuin vastaanottaja pystyy käsittelemään sitä. Web Serial API tukee laitteistopohjaista vuonohjausta (CTS/RTS). Tarkista sarjalaitteesi erityisvaatimukset määrittääksesi, onko vuonohjaus tarpeen.

Portin sulkeminen

On tärkeää sulkea sarjaportti asianmukaisesti, kun olet lopettanut sen käytön. Tämä vapauttaa portin ja antaa muiden sovellusten tai laitteiden käyttää sitä. Voit sulkea portin `port.close()`-metodilla.

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

            

              
                Copy
              
            
          

Web Serial API ja Bluetooth

Vaikka Web Serial API itsessään ei suoraan käsittele Bluetooth-yhteyksiä, sitä voidaan käyttää yhdessä Bluetooth-sarjasovittimien kanssa. Nämä sovittimet toimivat siltana, muuntaen Bluetooth-kommunikaation sarjaliikenteeksi, jota Web Serial API voi sitten käsitellä. Tämä avaa mahdollisuuksia vuorovaikutukseen Bluetooth-yhteensopivien laitteiden kanssa verkkoselaimestasi.

Tosielämän sovellukset

Web Serial API:llä on laaja valikoima mahdollisia sovelluksia eri toimialoilla ja aloilla:

• Teollisuusautomaatio: Ohjaa ja valvo teollisuuslaitteita ja koneita verkkopohjaisesta käyttöliittymästä. Esimerkiksi Saksassa työskentelevä tehdastyöntekijä voisi käyttää verkkosovellusta koneen lämpötilan ja paineen seuraamiseen reaaliajassa.
• Robotiikka: Ole vuorovaikutuksessa robottien ja robottijärjestelmien kanssa, mahdollistaen etäohjauksen ja datan keräämisen. Kuvittele ohjaavasi robottikättä Japanissa Kanadassa sijaitsevasta ohjauspaneelista.
• 3D-tulostus: Ohjaa ja valvo 3D-tulostimia, jolloin käyttäjät voivat ladata malleja, seurata tulostuksen edistymistä ja säätää asetuksia verkkoselaimesta. Italiassa oleva käyttäjä voisi käynnistää tulostustyön kotonaan olevalla 3D-tulostimella toimistostaan.
• IoT-laitteet: Yhdistä ja ole vuorovaikutuksessa IoT-laitteiden, kuten antureiden, toimilaitteiden ja kotiautomaatiojärjestelmien, kanssa. Esimerkiksi brasilialainen maanviljelijä voisi seurata maaperän kosteustasoja ja ohjata kastelujärjestelmiä etänä verkkosovelluksen avulla.
• Opetustyökalut: Luo interaktiivisia opetustyökaluja ja kokeita, jotka sisältävät fyysistä laitteistoa, tehden oppimisesta kiinnostavampaa ja käytännönläheisempää. Fysiikan tunnilla opiskelijat voisivat käyttää API:ta datan keräämiseen heiluriin yhdistetystä anturista.
• Saavutettavuus: Tarjoa vaihtoehtoisia käyttöliittymiä laitteille, joiden suora käyttö voi olla vaikeaa vammaisille käyttäjille. Liikuntarajoitteinen henkilö voisi ohjata älykotilaitetta verkkopohjaisen käyttöliittymän kautta käyttämällä päänseurantajärjestelmää.

Vaihtoehdot Web Serial API:lle

Vaikka Web Serial API tarjoaa kätevän tavan kommunikoida sarjalaitteiden kanssa suoraan selaimesta, on olemassa vaihtoehtoisia lähestymistapoja, jotka voivat sopia erityisvaatimuksistasi riippuen:

• WebUSB API: WebUSB API antaa verkkosovellusten kommunikoida USB-laitteiden kanssa. Vaikka se tarjoaa suuremman joustavuuden ja hallinnan verrattuna Web Serial API:in, se vaatii myös monimutkaisemman toteutuksen eikä välttämättä sovellu yksinkertaisiin sarjaliikennetehtäviin.
• Natiivisovellukset sarjakirjastoilla: Perinteiset työpöytäsovellukset voivat käyttää sarjaliikennekirjastoja (esim. libserialport, pySerial) vuorovaikutuksessa sarjalaitteiden kanssa. Tämä lähestymistapa tarjoaa eniten hallintaa ja joustavuutta, mutta vaatii käyttäjiä asentamaan natiivisovelluksen tietokoneelleen.
• Selainlaajennukset: Selainlaajennukset voivat tarjota pääsyn sarjaportteihin ja muihin laitteistoresursseihin. Laajennukset vaativat kuitenkin käyttäjiä asentamaan ne erikseen, ja ne voivat herättää tietoturvahuolia.
• Node.js ja Serialport: Node.js:n käyttö taustajärjestelmässä tarjoaa erittäin vankan ratkaisun laitteiden hallintaan ja turvallisen API:n luomiseen frontendillesi. Tämä tarjoaa paremman hallinnan ja turvallisuuden kuin suora selainpääsy monissa käyttötapauksissa.

Yleisten ongelmien vianmääritys

Tässä on joitakin yleisiä ongelmia, joita saatat kohdata työskennellessäsi Web Serial API:n kanssa, ja miten voit ratkaista ne:

• Ei voi yhdistää sarjaporttiin:
  • Varmista, että toinen sovellus ei ole jo avannut sarjaporttia.
  • Varmista, että oikea sarjaportti on valittu selainikkunassa.
  • Tarkista, että verkkosovelluksessasi määritetty baudinopeus vastaa sarjalaitteen baudinopeutta.
  • Varmista, että käyttäjä on myöntänyt verkkosovellukselle luvan käyttää sarjaporttia.
• Sotkuinen tai lukukelvoton data:
  • Varmista, että baudinopeudet vastaavat toisiaan.
  • Tarkista datan koodausjärjestelmä (esim. UTF-8, ASCII).
  • Varmista, että data lähetetään ja vastaanotetaan oikein sarjalaitteessa.
• Datan häviäminen:
  • Harkitse vuonohjausmekanismien käyttöä datan häviämisen estämiseksi.
  • Suurenna puskurin kokoa datan vastaanottamista varten.
  • Optimoi datankäsittelylogiikka viiveiden välttämiseksi.
• Selaimen yhteensopivuusongelmat:
  • Tarkista Web Serial API:n selaimen yhteensopivuus Can I use -sivustolta.
  • Käytä ominaisuuksien tunnistusta varmistaaksesi, että selain tukee API:ta ennen sen käyttöä.

Web Serial API:n tulevaisuus

Web Serial API on merkittävä askel kohti verkon ja fyysisen maailman välisen kuilun kaventamista. Kun selaintuki jatkaa kasvuaan ja API kehittyy, voimme odottaa näkevämme entistä innovatiivisempia sovelluksia, jotka hyödyntävät sarjaliikenteen voimaa verkkosovelluksissa. Tämä teknologia avaa ovia uusille mahdollisuuksille IoT:ssä, teollisuusautomaatiossa, robotiikassa, koulutuksessa ja monilla muilla aloilla.

Yhteenveto

Web Serial API antaa verkkokehittäjille mahdollisuuden luoda sovelluksia, jotka ovat suorassa vuorovaikutuksessa sarjalaitteiden kanssa, avaten lukemattomia mahdollisuuksia verkkopohjaiseen ohjaukseen, valvontaan ja datan keräämiseen. Tämä opas tarjoaa kattavan yleiskatsauksen API:sta, mukaan lukien sen ominaisuudet, tietoturvanäkökohdat, käytännön esimerkit ja vianmääritysvinkit. Ymmärtämällä ja hyödyntämällä Web Serial API:ta voit luoda innovatiivisia ja mukaansatempaavia verkkosovelluksia, jotka integroituvat saumattomasti fyysiseen maailmaan.