Tutvuge Web Serial API-ga, mis võimaldab frontend-veebirakendustel otse suhelda jadaseadmetega nagu mikrokontrollerid, andurid ja pärandvara, pakkudes uusi võimalusi veebipõhiseks juhtimiseks ja seireks.
Frontend Web Serial API: Põhjalik juhend jadaseadmetega suhtlemiseks veebibrauseris
Web Serial API avab veebirakendustele uusi põnevaid võimalusi. See võimaldab teie brauseris töötaval frontend-koodil otse suhelda kasutaja arvutiga ühendatud jadaseadmetega. Varem oli see omane vaid natiivrakendustele, kuid nüüd saate suhelda mikrokontrollerite, 3D-printerite, andurite ja pärandriistvaraga otse oma veebibrauserist. Kujutage ette Arduino juhtimist veebipõhiselt armatuurlaualt, andurite andmete jälgimist reaalajas või suhtlemist vana jadaprinteriga kaasaegse veebiliidese kaudu. See juhend süveneb Web Serial API-sse, uurib selle funktsioone ja pakub praktilisi näiteid alustamiseks.
Mis on Web Serial API?
Web Serial API on veebistandard, mis pakub veebirakendustele võimalust suhelda jadaseadmetega. Jadaside on laialt levinud meetod andmete vahetamiseks seadmete vahel jadapordi kaudu. See on eriti tavaline manussüsteemide, tööstusseadmete ja vanema riistvara puhul. API ületab lõhe veebi ja füüsilise maailma vahel, võimaldades veebirakendustel nende seadmetega suhelda ilma brauserilaienduste või natiivrakenduste vajaduseta.
Peamised eelised:
- Otse suhtlus seadmega: Kaotab vajaduse vahendavate rakenduste või draiverite järele põhilise jadaside jaoks.
- Platvormideülene ühilduvus: Web Serial API-t kasutavad veebirakendused võivad töötada mis tahes operatsioonisüsteemis, millel on ühilduv brauser.
- Täiustatud turvalisus: API on loodud turvalisust silmas pidades, nõudes jadaportidele juurdepääsuks kasutaja selgesõnalist luba.
- Lihtsustatud arendus: Pakub standardiseeritud liidest jadasideks, lihtsustades arendusprotsessi.
Brauserite tugi
2024. aasta lõpu seisuga toetavad Web Serial API-t Chromiumil põhinevad brauserid nagu Google Chrome, Microsoft Edge ja Opera. Tugi teistes brauserites, nagu Firefox ja Safari, on kaalumisel ja arendamisel. Soovitatav on kontrollida Can I use veebisaiti uusima brauserite ühilduvuse teabe saamiseks.
Turvakaalutlused
Web Serial API seab esikohale turvalisuse ja kasutaja privaatsuse. Siin on mõned peamised turvameetmed:
- Kasutaja luba: Brauser küsib kasutajalt luba, enne kui lubab veebirakendusel jadapordile juurde pääseda. Kasutajal on võimalus juurdepääs anda või keelata.
- Ainult turvalised kontekstid: API on saadaval ainult turvalistes kontekstides (HTTPS). See aitab vältida vahendajarünnakuid (man-in-the-middle) ja tagab andmete terviklikkuse.
- Piiratud juurdepääs: API pakub kontrollitud juurdepääsu jadapordile, piirates pahatahtlike tegevuste potentsiaali.
Alustamine: praktiline näide Arduinoga
Vaatame läbi lihtsa näite Web Serial API kasutamisest Arduino plaadiga suhtlemiseks. See näide demonstreerib, kuidas saata andmeid veebibrauserist Arduinole ja vastu võtta andmeid tagasi.
Eeltingimused:
- Arduino plaat (nt Arduino Uno, Nano või Mega).
- Arvutisse installitud Arduino IDE.
- USB-kaabel Arduino ühendamiseks arvutiga.
- Brauser, mis toetab Web Serial API-t (Chrome, Edge, Opera).
1. samm: Arduino kood
Esmalt laadige järgmine kood oma Arduino plaadile, kasutades Arduino IDE-d:
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);
}
}
See kood lähtestab jadaside boodikiirusega 9600. `loop()` funktsioonis kontrollib see, kas jadapordis on andmeid saadaval. Kui andmed on saadaval, loeb see andmeid kuni reavahetusmärgini, eemaldab algusest ja lõpust tühikud ning saadab seejärel vastuvõetud andmed tagasi jadaporti eesliitega „Received: ”.
2. samm: HTML struktuur
Looge HTML-fail (nt `index.html`) järgmise struktuuriga:
<!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>
See HTML-fail sisaldab nuppu jadapordiga ühenduse loomiseks, tekstiala vastuvõetud andmete kuvamiseks, sisestusvälja saadetavate andmete sisestamiseks ja nuppu andmete saatmiseks. See viitab ka JavaScripti failile (`script.js`), mis sisaldab Web Serial API koodi.
3. samm: JavaScripti kood (script.js)
Looge JavaScripti fail nimega `script.js` järgmise koodiga:
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 = '';
});
See JavaScripti kood haldab jadapordiga ühenduse loomist, andmete vastuvõtmist ja saatmist. Vaatame koodi lähemalt:
- Elementide hankimine: See hangib viited HTML-elementidele nende ID-de järgi.
- `connectButton` klõpsamissündmus: Kui klõpsatakse nupule „Connect to Serial Port”, juhtub järgmine:
- See kutsub välja `navigator.serial.requestPort()`, et paluda kasutajal valida jadaport.
- See avab valitud pordi boodikiirusega 9600.
- See keelab ühendamisnupu ja lubab saatmisnupu.
- See hangib lugeja ja kirjutaja pordi loetavatele ja kirjutatavatele voogudele.
- See siseneb tsüklisse, et pidevalt lugeda andmeid jadapordist.
- See dekodeerib vastuvõetud andmed (mis on `Uint8Array`) `TextDecoder` abil ja lisab need `receivedDataTextarea` alasse.
- `sendButton` klõpsamissündmus: Kui klõpsatakse nupule „Send Data”, juhtub järgmine:
- See hangib andmed sisestusväljast `dataToSendInput`.
- See lisab andmetele reavahetusmärgi (`\n`). See on oluline, sest Arduino kood loeb andmeid kuni reavahetusmärgi saamiseni.
- See kodeerib andmed `TextEncoder` abil, et teisendada need `Uint8Array`-ks.
- See kirjutab kodeeritud andmed jadaporti, kasutades `writer.write()`.
- See tühjendab sisestusvälja `dataToSendInput`.
4. samm: Käivitage näide
Avage fail `index.html` oma brauseris. Peaksite nägema failis määratletud HTML-elemente.
- Klõpsake nupule „Connect to Serial Port”. Teie brauser palub teil valida jadapordi. Valige oma Arduino plaadiga seotud port.
- Pärast ühenduse loomist on nupp „Connect to Serial Port” keelatud ja nupp „Send Data” lubatud.
- Sisestage sisestusväljale tekst ja klõpsake nupule „Send Data”.
- Tekstialas peaksite nägema teksti „Received: [teie tekst]”. See näitab, et andmed saadeti edukalt brauserist Arduinole ja seejärel Arduinolt tagasi brauserisse.
Edasijõudnud kasutus ja kaalutlused
Boodikiirus
Boodikiirus on andmete edastamise kiirus jadapordi kaudu. On ülioluline, et teie veebirakenduses konfigureeritud boodikiirus vastaks teie jadaseadmes (nt Arduino koodis) konfigureeritud boodikiirusele. Levinud boodikiirused on 9600, 115200 ja teised. Mitterahuldavad boodikiirused põhjustavad moonutatud või loetamatuid andmeid.
Andmete kodeerimine
Jadapordi kaudu edastatavad andmed on tavaliselt esitatud baitide jadana. Web Serial API kasutab nende baitide esitamiseks `Uint8Array`. Sõltuvalt edastatavate andmete tüübist peate võib-olla andmeid kodeerima ja dekodeerima, kasutades sobivaid kodeerimisskeeme (nt UTF-8, ASCII).
Vigade käsitlemine
On oluline rakendada oma veebirakenduses korralikku vigade käsitlemist, et hallata võimalikke probleeme, nagu ühenduse vead, andmeedastusvead ja seadme lahtiühendamised. Kasutage `try...catch` plokke erandite püüdmiseks ja kasutajale informatiivsete veateadete pakkumiseks.
Voo juhtimine
Voo juhtimise mehhanisme (nt riistvaraline voo juhtimine, tarkvaraline voo juhtimine) saab kasutada andmekao vältimiseks, kui saatja edastab andmeid kiiremini, kui vastuvõtja suudab neid töödelda. Web Serial API toetab riistvaralist voo juhtimist (CTS/RTS). Kontrollige oma jadaseadme spetsiifilisi nõudeid, et teha kindlaks, kas voo juhtimine on vajalik.
Pordi sulgemine
On oluline jadaport korralikult sulgeda, kui olete selle kasutamise lõpetanud. See vabastab pordi ja võimaldab teistel rakendustel või seadmetel seda kasutada. Saate pordi sulgeda meetodiga `port.close()`.
if (port) {
await reader.cancel();
await reader.releaseLock();
await writer.close();
await port.close();
}
Web Serial API ja Bluetooth
Kuigi Web Serial API ise otse Bluetooth-ühendusi ei halda, saab seda kasutada koos Bluetoothi jadaadapteritega. Need adapterid toimivad sillana, muutes Bluetooth-side jadasideks, mida Web Serial API saab seejärel käsitleda. See avab võimalusi suhelda Bluetooth-toega seadmetega oma veebibrauserist.
Reaalse maailma rakendused
Web Serial API-l on lai valik potentsiaalseid rakendusi erinevates tööstusharudes ja valdkondades:
- Tööstusautomaatika: Tööstusseadmete ja masinate juhtimine ja jälgimine veebipõhisest liidesest. Näiteks võib Saksamaal asuv tehasetööline kasutada veebirakendust masina temperatuuri ja rõhu jälgimiseks reaalajas.
- Robootika: Suhtlemine robotite ja robotsüsteemidega, võimaldades kaugjuhtimist ja andmete kogumist. Kujutage ette robotkäe juhtimist Jaapanis Kanadas asuvast juhtpaneelist.
- 3D-printimine: 3D-printerite juhtimine ja jälgimine, võimaldades kasutajatel laadida üles disainilahendusi, jälgida printimise edenemist ja reguleerida seadeid veebibrauserist. Itaalias asuv kasutaja saaks alustada oma kodus oleva 3D-printeriga printimist oma kontorist.
- Asjade interneti (IoT) seadmed: Ühendumine ja suhtlemine IoT seadmetega, nagu andurid, täiturid ja koduautomaatikasüsteemid. Näiteks saaks Brasiilias asuv põllumees veebirakenduse abil eemalt jälgida mulla niiskustaset ja juhtida niisutussüsteeme.
- Hariduslikud tööriistad: Interaktiivsete hariduslike tööriistade ja katsete loomine, mis hõlmavad füüsilist riistvara, muutes õppimise kaasahaaravamaks ja praktilisemaks. Füüsikatunni õpilased saaksid API-d kasutada andmete kogumiseks pendliga ühendatud andurilt.
- Juurdepääsetavus: Alternatiivsete liideste pakkumine seadmetele, mida puuetega kasutajatel võib olla raske otse käsitseda. Piiratud liikumisvõimega inimene saaks juhtida nutikodu seadet veebipõhise liidese kaudu, kasutades peajälgimissüsteemi.
Alternatiivid Web Serial API-le
Kuigi Web Serial API pakub mugavat viisi jadaseadmetega otse brauserist suhtlemiseks, on olemas alternatiivseid lähenemisviise, mis võivad sobida sõltuvalt teie konkreetsetest nõuetest:
- WebUSB API: WebUSB API võimaldab veebirakendustel suhelda USB-seadmetega. Kuigi see pakub suuremat paindlikkust ja kontrolli võrreldes Web Serial API-ga, nõuab see ka keerukamat rakendamist ja ei pruugi sobida lihtsate jadaside ülesannete jaoks.
- Natiivrakendused jadateekidega: Traditsioonilised töölauarakendused saavad kasutada jadaside teeke (nt libserialport, pySerial), et suhelda jadaseadmetega. See lähenemisviis pakub kõige rohkem kontrolli ja paindlikkust, kuid nõuab kasutajatelt natiivrakenduse installimist oma arvutisse.
- Brauserilaiendused: Brauserilaiendused võivad pakkuda juurdepääsu jadaportidele ja muudele riistvararessurssidele. Siiski nõuavad laiendused kasutajatelt nende eraldi installimist ja võivad tekitada turvaprobleeme.
- Node.js koos Serialportiga: Node.js-i kasutamine taustaprogrammis pakub väga robustset lahendust seadmete haldamiseks ja turvalise API loomiseks teie frontendile. See pakub paljudel juhtudel suuremat kontrolli ja turvalisust kui otsene brauseri juurdepääs.
Levinud probleemide tõrkeotsing
Siin on mõned levinud probleemid, millega võite Web Serial API-ga töötamisel kokku puutuda, ja kuidas neid lahendada:
- Jadapordiga ei saa ühendust luua:
- Veenduge, et jadaport ei oleks juba mõne teise rakenduse poolt avatud.
- Kontrollige, et brauseri viipas oleks valitud õige jadaport.
- Kontrollige, et teie veebirakenduses konfigureeritud boodikiirus vastaks jadaseadme boodikiirusele.
- Veenduge, et kasutaja on andnud veebirakendusele loa jadapordile juurdepääsuks.
- Moonutatud või loetamatud andmed:
- Veenduge, et boodikiirused on õigesti sobitatud.
- Kontrollige andmete kodeerimisskeemi (nt UTF-8, ASCII).
- Veenduge, et andmeid edastatakse ja võetakse vastu jadaseadme poolt õigesti.
- Andmekadu:
- Kaaluge voo juhtimise mehhanismide kasutamist andmekao vältimiseks.
- Suurendage andmete vastuvõtmise puhvri suurust.
- Optimeerige andmetöötlusloogikat viivituste vältimiseks.
- Brauseri ühilduvusprobleemid:
- Kontrollige Web Serial API brauserite ühilduvust, kasutades Can I use.
- Kasutage funktsioonide tuvastamist, et veenduda, et API-d toetab brauser enne selle kasutamist.
Web Serial API tulevik
Web Serial API on oluline samm veebi ja füüsilise maailma vahelise lõhe ületamisel. Kuna brauserite tugi jätkuvalt kasvab ja API areneb, võime oodata veelgi uuenduslikumate rakenduste tekkimist, mis kasutavad jadaside võimsust veebirakendustes. See tehnoloogia avab uusi võimalusi asjade internetis, tööstusautomaatikas, robootikas, hariduses ja paljudes muudes valdkondades.
Kokkuvõte
Web Serial API annab veebiarendajatele võimaluse luua rakendusi, mis suhtlevad otse jadaseadmetega, avades hulgaliselt võimalusi veebipõhiseks juhtimiseks, jälgimiseks ja andmete kogumiseks. See juhend pakub põhjalikku ülevaadet API-st, sealhulgas selle funktsioonidest, turvakaalutlustest, praktilistest näidetest ja tõrkeotsingu näpunäidetest. Mõistes ja kasutades Web Serial API-d, saate luua uuenduslikke ja kaasahaaravaid veebirakendusi, mis integreeruvad sujuvalt füüsilise maailmaga.