Web Serial API: Silla loomine veebibrauserite ja riistvaraseadmete vahel

Web Serial API on revolutsiooniline tehnoloogia, mis võimaldab veebiarendajatel otse veebibrauserist jadaporti kasutavate seadmetega suhelda. See avab tohutult palju võimalusi, alates robotite ja manussüsteemide juhtimisest kuni andurite andmete kogumise ja interaktiivsete füüsiliste kogemuste loomiseni. See juhend annab põhjaliku ülevaate Web Serial API-st, selle võimalustest ja sellest, kuidas seda oma projektides rakendada, olles suunatud ülemaailmsele arendajate ja entusiastide publikule.

Mis on Web Serial API?

Web Serial API võimaldab veebirakendustel suhelda jadaporti kasutavate seadmetega, nagu mikrokontrollerid, Arduino plaadid, 3D-printerid ja muu riistvara, otse brauserist. See saavutatakse jadapordi kaudu, mis on standardne andmeside liides. Erinevalt varasematest meetoditest, mis nõudsid pluginaid või natiivrakendusi, pakub Web Serial API turvalist ja standardiseeritud viisi riistvaraga suhtlemiseks.

Põhifunktsioonid:

• Turvaline juurdepääs: Nõuab konkreetse seadmele juurdepääsuks selgesõnalist kasutaja luba, suurendades turvalisust.
• Platvormideülene ühilduvus: Töötab erinevates operatsioonisüsteemides, sealhulgas Windows, macOS, Linux ja ChromeOS, pakkudes ühtlast kogemust.
• Standardiseeritud API: Pakub järjepidevat ja hõlpsasti kasutatavat JavaScript API-t jadaporti kasutavate seadmetega suhtlemiseks.
• Andmevoogedastus: Toetab reaalajas andmevoogedastust, võimaldades reaalajas andmete visualiseerimist ja interaktsiooni.
• Kahesuunaline kommunikatsioon: Lihtsustab andmete saatmist ja vastuvõtmist veebirakenduse ja riistvaraseadme vahel.

Web Serial API kasutamise eelised

Web Serial API pakub arendajatele mitmeid eeliseid, sealhulgas:

• Lihtsustatud arendus: Kaotab vajaduse platvormispetsiifiliste pluginate või natiivrakenduste arenduse järele, lihtsustades arendusprotsessi.
• Parem juurdepääsetavus: Muudab riistvaraga suhtlemise kättesaadavamaks laiemale publikule, kuna kasutajad saavad seadmeid juhtida otse oma veebibrauseritest.
• Täiustatud kasutajakogemus: Pakub sujuvamat ja intuitiivsemat kasutajakogemust, kuna kasutajad saavad riistvaraga suhelda ilma täiendavat tarkvara installimata.
• Suurem interaktiivsus: Võimaldab luua väga interaktiivseid veebirakendusi, mis integreeruvad füüsilise maailmaga.
• Globaalne haare: Web Serial API-ga ehitatud veebirakendustele pääseb juurde mis tahes seadmest, millel on veebibrauser ja internetiühendus, mis soodustab ülemaailmset koostööd ja innovatsiooni.

Kasutusjuhtumid ja näited

Web Serial API-t saab rakendada mitmesugustes projektides ja rakendustes, sealhulgas:

• Asjade internet (IoT): Veebirakenduste ühendamine mikrokontrolleritest saadud andurite andmetega, luues armatuurlaudu keskkonnaseireks, nutika kodu juhtimiseks ja tööstusautomaatikaks. Kaaluge rakendusi erinevates kohtades, näiteks temperatuuri jälgimine Hollandi kasvuhoones või mullaniiskuse jälgimine Kenya farmis.
• Robootika ja automatiseerimine: Robotite, droonide ja muude automatiseeritud süsteemide juhtimine otse veebiliidese kaudu. Seda saab kasutada hariduslikel eesmärkidel (nt robotite programmeerimine Jaapani koolis) või tööstusautomaatikas (nt tootmisliini juhtimine Saksamaal).
• 3D-printimise juhtimine: 3D-printerite haldamine ja jälgimine otse veebibrauserist, võimaldades kasutajatel printimistöid eemalt üles laadida ja juhtida. See on eriti kasulik hajutatud tootmises ja tegijate ruumides, nagu näha näiteks Ameerika Ühendriikides või Indias.
• Andmete hankimine ja visualiseerimine: Andmete kogumine anduritelt (nt temperatuur, rõhk, valgus) ja nende kuvamine reaalajas veebipõhisel armatuurlaual. Sellel on lai kasutusala alates teaduslikest uuringutest Kanadas kuni põllumajandusliku seireni Brasiilias.
• Haridusprojektid: Õpetamine õpilastele elektroonika, programmeerimise ja riistvaraga suhtlemise kohta. Web Serial API lihtsus muudab selle kättesaadavaks igas vanuses ja taustaga õpilastele kogu maailmas.
• Interaktiivsed installatsioonid: Kaasavate ja interaktiivsete installatsioonide loomine, mis reageerivad kasutaja sisendile või andurite andmetele. Näideteks on kunstinstallatsioonid või muuseumiekspositsioonid, mis kasutavad füüsilist arvutust sellistes riikides nagu Austraalia.

Näide: Arduino plaadi juhtimine

Loome lihtsa näite Arduino plaadiga ühendatud LED-i juhtimiseks. Kasutame JavaScripti, et saata Arduinole käske ja Arduino vastab, lülitades LED-i sisse või välja.

1. Arduino kood (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
              
            
          

See Arduino kood:

• Seadistab LED-i pin-i väljundiks.
• Initsialiseerib jadapordiühenduse kiirusel 9600 baud.
• Kontrollib pidevalt saabuvaid jadapordi andmeid.
• Kui andmeid on vastu võetud, loeb see tähemärgi.
• Kui märk on '1', lülitab see LED-i sisse.
• Kui märk on '0', lülitab see LED-i välja.
• Saadab jadaporti tagasi kinnitussõnumi.

2. HTML ja JavaScript (veebibrauser):

            <!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
              
            
          

JavaScripti koodi selgitus:

• Ühenduse nupp: Kui klõpsate, taotleb juurdepääsu jadapordile ja proovib seda avada.
• LED-i sisse/välja lülitamise nupud: Saada käsu "1", et LED sisse lülitada, ja "0", et LED välja lülitada.
• Ühenduse olek: Kuvab praeguse ühenduse oleku.
• `navigator.serial.requestPort()`: Palub kasutajal valida jadaport.
• `port.open()`: Avab valitud jadapordi. Parameeter `baudRate` on seatud vastama Arduino koodile (9600).
• `port.writable.getWriter()`: Loob kirjutaja andmete saatmiseks jadaporti.
• `writer.write(data)`: Kirjutab andmed (käsu) jadaporti.
• Vigade käsitlemine: Sisaldab vigade käsitlemist, et anda kasutajale tagasisidet.

Kuidas näidet käivitada:

1. Ühendage Arduino: Ühendage Arduino plaat USB kaudu oma arvutiga.
2. Laadige üles Arduino kood: Avage Arduino IDE ja laadige pakutav kood oma Arduino plaadile.
3. Looge HTML-fail: Salvestage HTML-kood HTML-failina (nt `index.html`).
4. Avage HTML-fail brauseris: Avage fail `index.html` veebibrauseris, mis toetab Web Serial API-t (nt Chrome, Edge ja mõned Opera versioonid).
5. Ühendage ja juhtige: Klõpsake nuppu "Connect to Arduino". Teie brauser palub teil valida jadaport. Valige Arduino. Seejärel klõpsake LED-i juhtimiseks nuppe "Turn LED On" ja "Turn LED Off".

Web Serial API-ga alustamine

Web Serial API kasutamise alustamiseks vajate järgmist:

• Veebibrauser, mis toetab Web Serial API-t: Praegu toetavad Chrome, Edge ja mõned Opera versioonid. Kontrollige brauseri ühilduvust sellistes ressurssides nagu Can I Use.
• Riistvaraseade: Näiteks Arduino, Raspberry Pi või mis tahes seade, mis suhtleb jadapordi kaudu.
• HTML, CSS ja JavaScript põhiteadmised: Nende veebitehnoloogiate tundmine on oluline.

Samm-sammult juhend:

1. Taotlege jadapordile juurdepääsu: Kasutage `navigator.serial.requestPort()`, et paluda kasutajal valida jadaport. See funktsioon tagastab Promise'i, mis lahendatakse `SerialPort` objektiks. Märkus: `requestPort()` käivitamiseks on tavaliselt vaja kasutaja interaktsiooni (nupuvajutust).
2. Avage jadaport: Helistage meetodile `port.open()`, edastades konfiguratsiooniobjekti, mis määrab edastuskiiruse ja muud jadapordi seaded (nt dataBits, stopBits, parity). Edastuskiirus peab vastama teie riistvaraseadme poolt kasutatavale kiirusele.
3. Hankige loetavad ja kirjutatavad vooged: Kasutage loetavate ja kirjutatavate voogede hankimiseks atribuute `port.readable` ja `port.writable`. Neid vooge kasutatakse andmete saatmiseks ja vastuvõtmiseks.
4. Looge kirjutaja: Kasutage meetodit `port.writable.getWriter()`, et luua objekti `writer`, mida kasutate andmete seadmesse saatmiseks.
5. Looge lugeja: Kasutage meetodit `port.readable.getReader()`, et luua objekti `reader`, mida kasutate andmete seadmest vastuvõtmiseks.
6. Kirjutage andmed seadmesse: Kasutage andmete jadaporti saatmiseks `writer.write(data)`. `data` peaks olema `ArrayBuffer` või `Uint8Array`. Stringi teisendamiseks `Uint8Array`-ks saate kasutada `TextEncoder`-it.
7. Lugege andmed seadmest: Kasutage jadapordist andmete lugemiseks `reader.read()`. See meetod tagastab Promise'i, mis lahendatakse objektiks, mis sisaldab andmeid ja tõeväärtust, mis näitab, kas voog on suletud.
8. Sulgege jadaport: Kui olete lõpetanud, sulgege vooged, helistades `writer.close()` ja `reader.cancel()`, ning seejärel sulgege jadaport, helistades `port.close()`. Kaasake alati veakäsitlus, et hallata võimalikke probleeme jadapordiühendusega.

Koodinäited ja parimad praktikad

Siin on rohkem koodilõike ja parimaid praktikaid Web Serial API-ga töötamiseks:

1. Jadapordi taotlemine:

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

              
                Copy
              
            
          

2. Jadapordi avamine ja konfigureerimine:

            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. Andmete kirjutamine jadaporti (string):

            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. Andmete lugemine jadapordist:

            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. Jadapordi sulgemine:

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

              
                Copy
              
            
          

Parimad praktikad:

• Kasutaja load: Enne jadapordile juurdepääsu alati taotlege kasutajalt luba. Meetod `requestPort()` on lähtepunkt.
• Veakäsitlus: Rakendage tugev veakäsitlus, et sujuvalt hallata ühenduse vigu, andmeedastuse probleeme ja ootamatuid lahtiühendamisi.
• Edastuskiiruse sobitamine: Veenduge, et teie veebirakenduse edastuskiirus vastaks teie riistvaraseadme edastuskiirusele.
• Andmete kodeerimine: Kasutage stringi järjepidevaks kodeerimiseks ja dekodeerimiseks `TextEncoder`-it ja `TextDecoder`-it, eriti rahvusvaheliste tähemärkide komplektidega töötamisel.
• Turvalisus: Web Serial API on loodud turvalisust silmas pidades. Juurdepääs on ainult kasutaja poolt selgesõnaliselt heaks kiidetud seadmetele. Vältige tundlike andmete edastamist jadaportiühenduste kaudu ilma nõuetekohase krüptimise või turvameetmeteta.
• Asünkroonsed toimingud: Asünkroonsete toimingute käsitlemiseks kasutage `async/await` või Promises'eid. See parandab koodi loetavust ja takistab põhivoo blokeerimist.
• Edenemise indikaatorid: Pikkade toimingute tegemisel kuvage edenemise indikaatoreid, et anda kasutajale tagasisidet ja parandada üldist kasutajakogemust.
• Brauseritevahelise ühilduvuse testimine: Kuigi Web Serial API on muutumas laialdaselt toetatuks, on oluline testida oma rakendust erinevates brauserites ja erinevates operatsioonisüsteemides, et tagada järjepidev funktsionaalsus.
• Kaaluge varuvariante: Brauserite puhul, mis Web Serial API-t veel täielikult ei toeta, kaaluge alternatiivsete funktsioonide pakkumist või juhiseid, kuidas juurde pääseda töötavale versioonile.

Andmete voogedastus ja reaalajas rakendused

Web Serial API on andmete voogedastuses suurepärane, mistõttu on see ideaalne reaalajas rakenduste jaoks, mis hõlmavad pidevat andmeedastust riistvaraseadmest. See võimaldab interaktiivseid armatuurlaudu, reaalajas andmete visualiseerimist ja reageerivaid kasutajaliideseid. Mõelge näidetele, nagu reaalajas andurite näitude kuvamine Nepaali külas asuvast ilmajaamast või telemeetria andmete vastuvõtmine Ameerika Ühendriikides tegutsevalt droonilt.

Andmete voogedastuse näide (lihtsustatud):

See näide demonstreerib andmete pidevat lugemist jadapordist ja nende kuvamist veebirakenduses:

            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
              
            
          

See koodilõik:

• Saab jadapordi lugeja.
• Dekodeerib sissetulevad baitid stringiks.
• Lisab andmeid puhvrisse, kuni leitakse reavahetuse märk (või muu eraldaja).
• Kui eraldaja leitakse, eraldab puhvrist täieliku andmereaga, töötleb rida, kutsudes välja funktsiooni `dataCallback`, ja eemaldab selle rea puhvrist.
• `dataCallback` värskendab tavaliselt kuva veebilehel (nt värskendab armatuurlaua väärtust).
• Jätkab protsessi, kuni voog suletakse või ilmneb viga.

Saate seda näidet muuta, et käsitleda erinevaid andmevorminguid, näiteks komaga eraldatud väärtusi (CSV) või JSON-i, sõeludes sissetulevaid andmeid funktsioonis `dataCallback`.

Edasijõudnud teemad ja kaalutlused

1. Seadme filtreerimine:

Jadapordi taotlemisel kasutades `navigator.serial.requestPort()`, saate valikuliselt määrata filtreid, et kitsendada kasutajale esitatavate saadaolevate seadmete loendit. See on eriti kasulik, kui teate, millist seadet otsite, võib-olla selle müüja ID-d või toote ID-d.

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

              
                Copy
              
            
          

2. Vigade käsitlemine ja taastamine:

Tugeva veakäsitluse rakendamine on ülioluline. See hõlmab:

• Ühenduse vigade käsitlemine.
• Andmeedastuse vigade käsitlemine.
• Seadme lahtiühendamiste sujuv käsitlemine.

Kaaluge uuesti proovimise mehhanismide lisamist ja kasutajale informatiivsete veateadete kuvamist. Veakäsitlus aitab muuta teie rakenduse usaldusväärsemaks ja kasutajasõbralikumaks.

3. Veebi töötajad:

Arvutusmahukate ülesannete või reaalajas rakenduste puhul kaaluge veebi töötajate kasutamist, et viia jadapordist saadud andmete töötlemine põhivost välja. See aitab vältida kasutajaliidese külmumist ja parandab teie veebirakenduse reageerimisvõimet. Põhivoolus jadapordist saadud andmed saab saata veebi töötajale kasutades `postMessage()`, töödelda töötaja lõimes ja saata tulemused tagasi põhivoolu kuvamiseks.

4. Turvalisuse parimad praktikad (täpsemad üksikasjad):

• Kasutaja nõusolek: Jadapordile juurdepääsuks nõuage alati selgesõnalist kasutaja luba. Ärge proovige seadmetele juurde pääseda ilma kasutaja nõusolekuta.
• Seadme valideerimine: Võimalusel valideerige seadme tüüp või tootja enne ühenduse loomist. See aitab vältida pahatahtlike osapoolte kasutamist teie rakenduse abil volitamata seadmete juhtimiseks.
• Andmete valideerimine: Enne andmete töötlemist desinfitseerige ja valideerige kõik jadapordist saadud andmed. See aitab vältida potentsiaalseid süstimisrünnakuid või andmete riknemist.
• Krüptimine: Kui edastate jadapordi kaudu tundlikke andmeid, kasutage nende pealtkuulamise eest kaitsmiseks krüptimist. Kaaluge protokolle nagu TLS/SSL, kui see on teie rakenduse seadistuse jaoks kohaldatav.
• Piirake õigusi: Taotlege ainult minimaalseid õigusi, mis on teie rakenduse toimimiseks vajalikud. Näiteks kui teil on vaja seadmest ainult andmeid lugeda, ärge taotlege kirjutamisõigusi.
• Regulaarsed turvaauditid: Tehke regulaarselt oma rakenduse turvaauditeid, et tuvastada ja kõrvaldada kõik potentsiaalsed haavatavused. Värskendage oma koodi ja sõltuvusi sageli, et paigata teadaolevaid turvaauke.
• Harige kasutajaid: Andke kasutajatele selget teavet oma rakenduse kasutamise ja seadmetega, millega nad suhtlevad, seotud turvalisuse tagajärgede kohta. Selgitage, miks teil on vaja juurdepääsu teatud seadmetele ja kuidas te nende andmeid kaitsete.

Kogukonna ressursid ja edasine õppimine

Web Serial API on suhteliselt uus tehnoloogia, kuid sellel on kasvav arendajate ja entusiastide kogukond. Siin on mõned väärtuslikud ressursid edasiseks õppimiseks:

• MDN veebidokumendid: Mozilla Developer Network (MDN) pakub Web Serial API jaoks põhjalikku dokumentatsiooni, sealhulgas üksikasjalikke selgitusi, koodinäiteid ja brauseri ühilduvuse teavet. Selle leidmiseks otsige "Web Serial API MDN".
• Google'i arendajad: Google'i arendajate veebisait pakub artikleid, õpetusi ja koodinäiteid, mis on seotud Web Serial API-ga, sageli keskendudes praktilistele rakendustele.
• Web Serial API näited: Otsige veebist hõlpsasti kättesaadavaid koodinäiteid ja õpetusi. Paljud arendajad jagavad oma projekte sellistel platvormidel nagu GitHub. Otsige näiteks selliste rakenduste jaoks nagu "Web Serial API Arduino" või "Web Serial API Raspberry Pi".
• Veebifoorumid ja kogukonnad: Osalege veebifoorumites ja veebiarendusele, riistvaraprogrammeerimisele ja asjade internetile (IoT) pühendatud kogukondades. Populaarsed valikud on Stack Overflow, Reddit (nt r/webdev, r/arduino) ja spetsiaalsed projekti foorumid. Need foorumid pakuvad võimalusi küsimuste esitamiseks, abi saamiseks ja oma projektide jagamiseks teistega kogu maailmas.
• Avatud lähtekoodiga projektid: Avastage avatud lähtekoodiga projekte, mis kasutavad Web Serial API-t. See võimaldab teil uurida, kuidas teised arendajad on seda rakendanud, ja õppida nende lahendustest.
• Riistvaratootjad: Vaadake peamiste riistvaramüüjate, näiteks Arduino ja Raspberry Pi, dokumentatsiooni ja õpetusi, et saada lisateavet nende toodete integreerimise kohta Web Serial API-ga.

Kokkuvõte

Web Serial API on võimas ja juurdepääsetav tehnoloogia, mis võimaldab veebiarendajatel integreerida veebirakendusi sujuvalt füüsilise maailmaga. Võimaldades otsest suhtlust jadaporti kasutavate seadmetega, avab Web Serial API ukse paljudele põnevatele rakendustele, alates lihtsast riistvara juhtimisest kuni keerukate andmete voogedastuse ja interaktiivsete kogemusteni. Kasutades selles juhendis esitatud teavet, näiteid ja parimaid praktikaid, saavad arendajad kasutada Web Serial API potentsiaali uuenduslike lahenduste loomiseks ja panustada pidevalt arenevasse veebitehnoloogia maastikku. Võtke omaks võimalused ja alustage põneva riistvaraga suhtlemise maailma avastamist veebi kaudu!