किसी सीरियल पोर्ट से पढ़ें और उस पर लिखें

Web Serial API की मदद से वेबसाइटें, सीरियल डिवाइसों का इस्तेमाल कर सकती हैं.

François Beaufort
François Beaufort

Web Serial API क्या है?

सीरियल पोर्ट एक द्विदिशात्मक संचार इंटरफ़ेस होता है जो बाइट प्रति बाइट डेटा प्राप्त कर रहा है.

Web सीरियल API, वेबसाइटों को JavaScript वाले सीरियल डिवाइस पर निर्भर करता है. सीरियल डिवाइस, दोनों में से किसी एक के ज़रिए कनेक्ट किए जाते हैं उपयोगकर्ता के सिस्टम पर या हटाए जा सकने वाले यूएसबी और ब्लूटूथ डिवाइसों के ज़रिए सीरियल पोर्ट जो सीरियल पोर्ट की तरह काम करता है.

दूसरे शब्दों में, वेब सीरियल एपीआई वेब और भौतिक दुनिया को इसकी मदद से वेबसाइटें, माइक्रोकंट्रोलर जैसे सीरियल डिवाइसों से संपर्क कर सकती हैं और 3D प्रिंटर की सुविधा है.

यह एपीआई, WebUSB का भी बेहतरीन साथी है, क्योंकि ऑपरेटिंग सिस्टम के हिसाब से कुछ सीरियल पोर्ट के साथ कम्यूनिकेशन करने के लिए, सीरियल एपीआई के साथ काम करता है.

इस्तेमाल के सुझाए गए उदाहरण

शिक्षा, शौकिया, और औद्योगिक क्षेत्रों में लोग सहायक डिवाइसों (जैसे, कीबोर्ड, माउस, मॉनिटर, वेबकैम वगैरह) को आपस में जोड़ते हैं अपने कंप्यूटर से कनेक्ट कर सकते हैं. इन डिवाइसों को अक्सर कस्टम सॉफ़्टवेयर द्वारा उपयोग किए जाने वाले सीरियल कनेक्शन के माध्यम से माइक्रोकंट्रोलर्स. पसंद के मुताबिक कुछ इन डिवाइसों को कंट्रोल करने का सॉफ़्टवेयर वेब टेक्नोलॉजी के साथ बनाया गया है:

कुछ मामलों में वेबसाइटें किसी एजेंट के ज़रिए, डिवाइस से संपर्क करती हैं जिसे उपयोगकर्ताओं ने मैन्युअल तौर पर इंस्टॉल किया हो. अन्य में, ऐप्लिकेशन Electronicn जैसे फ़्रेमवर्क के ज़रिए पैकेज ऐप्लिकेशन में डिलीवर किया जाता है. अन्य देशों में, उपयोगकर्ता को एक अतिरिक्त चरण पूरा करना होता है, जैसे कि कंपाइल ऐप्लिकेशन को यूएसबी फ़्लैश ड्राइव के ज़रिए डिवाइस में कॉपी किया जा सकता है.

इन सभी मामलों में, उपयोगकर्ता अनुभव सीधे तौर पर बेहतर होगा, वेबसाइट और उसके ज़रिए कंट्रोल किए जाने वाले डिवाइस के बीच कम्यूनिकेशन से जुड़ी जानकारी.

मौजूदा स्थिति

चरण स्थिति
1. जानकारी देने वाला वीडियो बनाएं पूरा हुआ
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाएं पूरा हुआ
3. लोगों के सुझाव जानें और डिज़ाइन को दोहराएं पूरा हुआ
4. ऑरिजिन ट्रायल पूरा हुआ
5. लॉन्च करें पूरा हुआ

Web Serial API का इस्तेमाल करना

सुविधा की पहचान

यह देखने के लिए कि Web Serial API काम करता है या नहीं, इसका इस्तेमाल करें:

if ("serial" in navigator) {
  // The Web Serial API is supported.
}

सीरियल पोर्ट खोलें

Web Serial API डिज़ाइन के हिसाब से एसिंक्रोनस है. यह वेबसाइट के यूज़र इंटरफ़ेस (यूआई) को इनपुट का इंतज़ार करते समय ब्लॉक करना, जो ज़रूरी है, क्योंकि सीरियल डेटा को को सुनने का मौका मिलता है.

सीरियल पोर्ट खोलने के लिए, पहले SerialPort ऑब्जेक्ट को ऐक्सेस करें. इसके लिए, आपके पास ये विकल्प हैं तो उपयोगकर्ता को कॉल करके एक सीरियल पोर्ट चुनने के लिए कहें टच करने जैसे उपयोगकर्ता के जेस्चर के जवाब में navigator.serial.requestPort() या माउस क्लिक करें या navigator.serial.getPorts() में से कोई एक चुनें, जिससे वापस उन सीरियल पोर्ट की सूची जिनका ऐक्सेस वेबसाइट को दिया गया है.

document.querySelector('button').addEventListener('click', async () => {
  // Prompt user to select any serial port.
  const port = await navigator.serial.requestPort();
});
// Get all serial ports the user has previously granted the website access to.
const ports = await navigator.serial.getPorts();

navigator.serial.requestPort() फ़ंक्शन एक वैकल्पिक ऑब्जेक्ट लिटरल लेता है जो फ़िल्टर तय करता है. उनका इस्तेमाल ऐसे किसी भी सीरियल डिवाइस से मिलान करने के लिए किया जाता है जो इससे कनेक्ट किया गया है ज़रूरी यूएसबी वेंडर (usbVendorId) और वैकल्पिक यूएसबी प्रॉडक्ट वाला यूएसबी आइडेंटिफ़ायर (usbProductId).

// Filter on devices with the Arduino Uno USB Vendor/Product IDs.
const filters = [
  { usbVendorId: 0x2341, usbProductId: 0x0043 },
  { usbVendorId: 0x2341, usbProductId: 0x0001 }
];

// Prompt user to select an Arduino Uno device.
const port = await navigator.serial.requestPort({ filters });

const { usbProductId, usbVendorId } = port.getInfo();
किसी वेबसाइट पर सीरियल पोर्ट के अनुरोध का स्क्रीनशॉट
BBC माइक्रो:बिट चुनने के लिए उपयोगकर्ता का अनुरोध

requestPort() को कॉल करने पर, उपयोगकर्ता को कोई डिवाइस चुनने का निर्देश दिया जाता है. साथ ही, SerialPort ऑब्जेक्ट. SerialPort ऑब्जेक्ट मिलने के बाद, port.open() पर कॉल किया जाएगा आपके चुने हुए बॉड रेट से सीरियल पोर्ट खुलेगा. baudRate डिक्शनरी सदस्य तय करता है कि सीरियल लाइन पर डेटा कितनी तेज़ी से भेजा जाता है. इसे इस भाषा में दिखाया गया है बिट-प्रति-सेकंड (bps) की इकाइयां. इसके लिए अपने डिवाइस के दस्तावेज़ देखें सही मान, क्योंकि आपके द्वारा भेजा और प्राप्त किया जाने वाला समस्त डेटा निरर्थक होगा, यदि ऐसा है गलत तरीके से बताया गया है. सीरियल की नकल करने वाले कुछ यूएसबी और ब्लूटूथ डिवाइसों के लिए पोर्ट करने के लिए इस मान को सुरक्षित रूप से किसी भी मान पर सेट किया जा सकता है, क्योंकि एम्युलेटर.

// Prompt user to select any serial port.
const port = await navigator.serial.requestPort();

// Wait for the serial port to open.
await port.open({ baudRate: 9600 });

सीरियल पोर्ट को खोलते समय, नीचे दिए गए विकल्पों में से किसी एक को भी चुना जा सकता है. ये विकल्प के तौर पर दिए गए विकल्प का इस्तेमाल करना ज़रूरी नहीं है. साथ ही, इनके लिए डिफ़ॉल्ट वैल्यू आसानी से सेट की जा सकती हैं.

  • dataBits: हर फ़्रेम के लिए डेटा बिट की संख्या (7 या 8).
  • stopBits: किसी फ़्रेम के आखिर में स्टॉप बिट की संख्या (1 या 2).
  • parity: पैरिटी मोड ("none", "even" या "odd").
  • bufferSize: रीड और राइट बफ़र का साइज़, जो बनाया जाना चाहिए (16 एमबी से कम होना चाहिए).
  • flowControl: फ़्लो कंट्रोल मोड ("none" या "hardware").

किसी सीरियल पोर्ट से पढ़ना

Web Serial API में मौजूद इनपुट और आउटपुट स्ट्रीम को Streams API मैनेज करता है.

सीरियल पोर्ट के जुड़ने के बाद, readable और writable SerialPort ऑब्जेक्ट की प्रॉपर्टी से, ReadableStream दिखता है और WritableStream. उनका इस्तेमाल सीरियल डिवाइस. दोनों में, डेटा ट्रांसफ़र के लिए Uint8Array इंस्टेंस का इस्तेमाल किया जाता है.

सीरियल डिवाइस से नया डेटा आने पर, port.readable.getReader().read() एसिंक्रोनस रूप से दो प्रॉपर्टी लौटाता है: value और done बूलियन. अगर आपने done सही है, सीरियल पोर्ट को बंद कर दिया गया है या अब कोई डेटा उपलब्ध नहीं है इंच port.readable.getReader() को कॉल करने पर, एक रीडर बनता है और readable इसे. readable लॉक है, लेकिन सीरियल पोर्ट को बंद नहीं किया जा सकता.

const reader = port.readable.getReader();

// 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.
  console.log(value);
}

सीरियल पोर्ट को पढ़ने से जुड़ी कुछ गड़बड़ियां, कुछ स्थितियों में हो सकती हैं. जैसे, बफ़र ओवरफ़्लो, फ़्रेमिंग से जुड़ी गड़बड़ियां या समानता से जुड़ी गड़बड़ियां. उन्हें इस तरह से दिखाया जाता है अपवाद और पिछले लूप के ऊपर एक अन्य लूप जोड़कर उसे पकड़ा जा सकता है जो port.readable की जाँच करती है. यह तब तक काम करता है, जब तक कि गड़बड़ियां नुकसान न पहुंचाने वाली होने पर, एक नया ReadableStream अपने-आप बन जाता है. अगर कोई गंभीर गड़बड़ी हुई है, तो होता है, जैसे सीरियल डिवाइस को हटाया जाना, फिर port.readable बन जाता है शून्य.

while (port.readable) {
  const reader = port.readable.getReader();

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Allow the serial port to be closed later.
        reader.releaseLock();
        break;
      }
      if (value) {
        console.log(value);
      }
    }
  } catch (error) {
    // TODO: Handle non-fatal read error.
  }
}

अगर सीरियल डिवाइस टेक्स्ट को वापस भेजता है, तो port.readable को TextDecoderStream, जैसा कि नीचे दिखाया गया है. TextDecoderStream एक ट्रांसफ़ॉर्म स्ट्रीम है जो Uint8Array डेटा के सभी हिस्सों को इकट्ठा करके उन्हें स्ट्रिंग में बदल देता है.

const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();

// 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 string.
  console.log(value);
}

"अपने हिसाब से बफ़र करें" का इस्तेमाल करके, यह तय किया जा सकता है कि स्ट्रीम में मौजूद कॉन्टेंट को पढ़कर, मेमोरी कैसे तय की जाए रीडर. ReadableStreamBYOBReader का इंटरफ़ेस पाने के लिए, port.readable.getReader({ mode: "byob" }) पर कॉल करें. साथ ही, read() को कॉल करते समय अपना ArrayBuffer दें. ध्यान दें कि Web सीरियल API, Chrome 106 या इसके बाद के वर्शन पर इस सुविधा के साथ काम करता है.

try {
  const reader = port.readable.getReader({ mode: "byob" });
  // Call reader.read() to read data into a buffer...
} catch (error) {
  if (error instanceof TypeError) {
    // BYOB readers are not supported.
    // Fallback to port.readable.getReader()...
  }
}

यहां value.buffer के बफ़र को फिर से इस्तेमाल करने का उदाहरण दिया गया है:

const bufferSize = 1024; // 1kB
let buffer = new ArrayBuffer(bufferSize);

// Set `bufferSize` on open() to at least the size of the buffer.
await port.open({ baudRate: 9600, bufferSize });

const reader = port.readable.getReader({ mode: "byob" });
while (true) {
  const { value, done } = await reader.read(new Uint8Array(buffer));
  if (done) {
    break;
  }
  buffer = value.buffer;
  // Handle `value`.
}

सीरियल पोर्ट से मिले खास डेटा की मात्रा को पढ़ने का तरीका बताने वाला एक और उदाहरण यहां दिया गया है:

async function readInto(reader, buffer) {
  let offset = 0;
  while (offset < buffer.byteLength) {
    const { value, done } = await reader.read(
      new Uint8Array(buffer, offset)
    );
    if (done) {
      break;
    }
    buffer = value.buffer;
    offset += value.byteLength;
  }
  return buffer;
}

const reader = port.readable.getReader({ mode: "byob" });
let buffer = new ArrayBuffer(512);
// Read the first 512 bytes.
buffer = await readInto(reader, buffer);
// Then read the next 512 bytes.
buffer = await readInto(reader, buffer);

किसी सीरियल पोर्ट पर लिखें

किसी सीरियल डिवाइस पर डेटा भेजने के लिए, डेटा को port.writable.getWriter().write(). releaseLock() को कॉल करने की सुविधा चालू है सीरियल पोर्ट को बाद में बंद करने के लिए, port.writable.getWriter() को बंद करना ज़रूरी है.

const writer = port.writable.getWriter();

const data = new Uint8Array([104, 101, 108, 108, 111]); // hello
await writer.write(data);


// Allow the serial port to be closed later.
writer.releaseLock();

TextEncoderStream पाइप के ज़रिए port.writable पर मैसेज भेजें जैसा कि नीचे दिखाया गया है.

const textEncoder = new TextEncoderStream();
const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

const writer = textEncoder.writable.getWriter();

await writer.write("hello");

सीरियल पोर्ट को बंद करें

port.close(), सीरियल पोर्ट को बंद कर देता है, अगर उसके readable और writable में कोई सदस्य होता है अनलॉक किए गए हैं, इसका मतलब है कि releaseLock() को उनके संबंधित डोमेन के लिए कॉल किया गया है पढ़ने वाले और लिखने वाले लोग.

await port.close();

हालांकि, लूप का इस्तेमाल करके सीरियल डिवाइस से लगातार डेटा पढ़ते समय, जब तक उसे कोई गड़बड़ी नहीं मिलती, तब तक port.readable हमेशा लॉक रहेगा. इसमें केस, reader.cancel() को कॉल करने पर reader.read() को समाधान करना होगा { value: undefined, done: true } के साथ तुरंत कार्रवाई करेगा और reader.releaseLock() को कॉल करने के लिए लूप करें.

// Without transform streams.

let keepReading = true;
let reader;

async function readUntilClosed() {
  while (port.readable && keepReading) {
    reader = port.readable.getReader();
    try {
      while (true) {
        const { value, done } = await reader.read();
        if (done) {
          // reader.cancel() has been called.
          break;
        }
        // value is a Uint8Array.
        console.log(value);
      }
    } catch (error) {
      // Handle error...
    } finally {
      // Allow the serial port to be closed later.
      reader.releaseLock();
    }
  }

  await port.close();
}

const closedPromise = readUntilClosed();

document.querySelector('button').addEventListener('click', async () => {
  // User clicked a button to close the serial port.
  keepReading = false;
  // Force reader.read() to resolve immediately and subsequently
  // call reader.releaseLock() in the loop example above.
  reader.cancel();
  await closedPromise;
});

स्ट्रीम बदलें का इस्तेमाल करते समय, सीरियल पोर्ट को बंद करना ज़्यादा मुश्किल होता है. पहले की तरह reader.cancel() पर कॉल करें. इसके बाद, writer.close() और port.close() को कॉल करें. इससे गड़बड़ियां बढ़ती हैं. इसके लिए, स्ट्रीम को दिए गए सीरियल पोर्ट में बदलो. गड़बड़ी के प्रमोशन होने की वजह से ऐसा तुरंत नहीं होता है, तो आपको readableStreamClosed का इस्तेमाल करना होगा और port.readable के बारे में पता लगाने के लिए, writableStreamClosed प्रॉमिस पहले बनाया गया और port.writable को अनलॉक कर दिया गया है. reader को रद्द करने से स्ट्रीमिंग को रोका जाएगा; इसलिए, आपको इस गड़बड़ी को पकड़ना और अनदेखा करना चाहिए.

// With transform streams.

const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();

// Listen to data coming from the serial device.
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    reader.releaseLock();
    break;
  }
  // value is a string.
  console.log(value);
}

const textEncoder = new TextEncoderStream();
const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

reader.cancel();
await readableStreamClosed.catch(() => { /* Ignore the error */ });

writer.close();
await writableStreamClosed;

await port.close();

इंटरनेट से कनेक्ट और डिसकनेक्ट होने वाले डिवाइसों को सुनें

अगर किसी यूएसबी डिवाइस ने सीरियल पोर्ट दिया है, तो हो सकता है कि वह डिवाइस कनेक्ट हो या सिस्टम से डिसकनेक्ट हो जाता है. वेबसाइट को यह अनुमति कब दी गई हो सीरियल पोर्ट को ऐक्सेस करना है, तो इसे connect और disconnect इवेंट पर नज़र रखनी चाहिए.

navigator.serial.addEventListener("connect", (event) => {
  // TODO: Automatically open event.target or warn user a port is available.
});

navigator.serial.addEventListener("disconnect", (event) => {
  // TODO: Remove |event.target| from the UI.
  // If the serial port was opened, a stream error would be observed as well.
});

सिग्नल हैंडल करना

सीरियल पोर्ट कनेक्शन बनाने के बाद, साफ़ तौर पर क्वेरी और सेट किया जा सकता है डिवाइस की पहचान और फ़्लो कंट्रोल के लिए सीरियल पोर्ट के ज़रिए दिखाए गए सिग्नल. ये सिग्नल को बूलियन वैल्यू के तौर पर तय किया जाता है. उदाहरण के लिए, Arduino जैसे कुछ डिवाइस एक प्रोग्रामिंग मोड में चला जाएगा, बशर्ते डेटा टर्मिनल रेडी (डीटीआर) सिग्नल ऐसा हो टॉगल किया गया.

आउटपुट सिग्नल सेट करना और इनपुट सिग्नल पाना, ये काम करते हैं: port.setSignals() और port.getSignals() को कॉल किया जा रहा है. नीचे इस्तेमाल के उदाहरण देखें.

// Turn off Serial Break signal.
await port.setSignals({ break: false });

// Turn on Data Terminal Ready (DTR) signal.
await port.setSignals({ dataTerminalReady: true });

// Turn off Request To Send (RTS) signal.
await port.setSignals({ requestToSend: false });
const signals = await port.getSignals();
console.log(`Clear To Send:       ${signals.clearToSend}`);
console.log(`Data Carrier Detect: ${signals.dataCarrierDetect}`);
console.log(`Data Set Ready:      ${signals.dataSetReady}`);
console.log(`Ring Indicator:      ${signals.ringIndicator}`);

स्ट्रीम में बदलाव किया जा रहा है

जब आपको सीरियल डिवाइस से डेटा मिलता है, तब यह ज़रूरी नहीं है कि आपको वह पूरा डेटा मिले एक साथ डेटा को ऐक्सेस करने की कोशिश कर रहे हैं. इसे गलती से कई हिस्सों में बांटा जा सकता है. ज़्यादा जानकारी के लिए, यह देखें Streams API के सिद्धांत.

इससे निपटने के लिए, पहले से मौजूद कुछ ट्रांसफ़ॉर्म स्ट्रीम का इस्तेमाल किया जा सकता है. जैसे, TextDecoderStream या अपनी खुद की पूरी स्ट्रीम बनाएं जिसकी मदद से आप ये काम कर सकते हैं आने वाली स्ट्रीम को पार्स करें और पार्स किया गया डेटा दिखाएं. पूरी तरह बदलने वाली स्ट्रीम जो स्ट्रीम का इस्तेमाल कर रहे हैं. यह काम कर सकता है डेटा खर्च होने से पहले, आर्बिट्रेरी ट्रांसफ़ॉर्म (बदलाव) लागू कर सकते हैं. इसे ऐसा सोचें कि असेंबली लाइन: जैसे ही कोई विजेट लाइन में नीचे आता है, लाइन का हर चरण संशोधित होता है ताकि जब तक वह अपने अंतिम लक्ष्य तक पहुँचेगा, तब तक वह पूरी तरह से काम कर रहा विजेट.

एयरप्लेन फ़ैक्ट्री की फ़ोटो
दूसरा विश्व युद्ध कैसल ब्रॉमविच एयरप्लेन फ़ैक्ट्री

उदाहरण के लिए, ऐसी ट्रांसफ़ॉर्म स्ट्रीम क्लास बनाने का तरीका देखें जो स्ट्रीम करना और लाइन ब्रेक के आधार पर इसे कई हिस्सों में बांटना. इसकी transform() विधि को कॉल किया जाता है को मिलेगी, जब भी स्ट्रीम को नया डेटा मिलता है. इसके लिए, डेटा को सूची में जोड़ा जा सकता है या बाद के लिए सेव करें. स्ट्रीम बंद होने पर, flush() तरीके को कॉल किया जाता है और यह ऐसे डेटा को हैंडल करता है जिसे अभी तक प्रोसेस नहीं किया गया है.

ट्रांसफ़ॉर्म स्ट्रीम क्लास का इस्तेमाल करने के लिए, आपको आने वाली स्ट्रीम को पाइप करना होगा इसे. सीरियल पोर्ट से पढ़ें में दिए गए तीसरे कोड के उदाहरण में, ओरिजनल इनपुट स्ट्रीम को सिर्फ़ TextDecoderStream से पिरोया गया था. इसलिए, हमने हमारे नए LineBreakTransformer से कनेक्ट करने के लिए pipeThrough() को कॉल करना होगा.

class LineBreakTransformer {
  constructor() {
    // A container for holding stream data until a new line.
    this.chunks = "";
  }

  transform(chunk, controller) {
    // Append new chunks to existing chunks.
    this.chunks += chunk;
    // For each line breaks in chunks, send the parsed lines out.
    const lines = this.chunks.split("\r\n");
    this.chunks = lines.pop();
    lines.forEach((line) => controller.enqueue(line));
  }

  flush(controller) {
    // When the stream is closed, flush any remaining chunks out.
    controller.enqueue(this.chunks);
  }
}
const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable
  .pipeThrough(new TransformStream(new LineBreakTransformer()))
  .getReader();

सीरियल डिवाइस के कम्यूनिकेशन से जुड़ी समस्याओं को डीबग करने के लिए, यहां दिया गया tee() तरीका इस्तेमाल करें सीरियल डिवाइस पर जाने वाली या उससे आने वाली स्ट्रीम को स्प्लिट करने के लिए port.readable. दोनों बनाई गई स्ट्रीम को अलग-अलग इस्तेमाल किया जा सकता है और इससे अपनी स्ट्रीम को प्रिंट किया जा सकता है भेजा जा सकता है.

const [appReadable, devReadable] = port.readable.tee();

// You may want to update UI with incoming data from appReadable
// and log incoming data in JS console for inspection from devReadable.

सीरियल पोर्ट का ऐक्सेस वापस लेना

वेबसाइट ऐसे सीरियल पोर्ट को ऐक्सेस करने के लिए अनुमतियों को खाली कर सकती है जो अब नहीं है SerialPort इंस्टेंस पर forget() को कॉल करके बनाए रखने में दिलचस्पी है. इसके लिए उदाहरण के लिए, किसी ऐसे शैक्षणिक वेब ऐप्लिकेशन के लिए जिसका इस्तेमाल किसी ऐसे कंप्यूटर पर किया जाता है करते हैं, तो बड़ी संख्या में उपयोगकर्ता जनित अनुमतियों की वजह से उपयोगकर्ता अनुभव मिलता है.

// Voluntarily revoke access to this serial port.
await port.forget();

Chrome 103 या इसके बाद के वर्शन में forget() उपलब्ध है. इसलिए, देखें कि यह सुविधा इनके साथ काम करता है:

if ("serial" in navigator && "forget" in SerialPort.prototype) {
  // forget() is supported.
}

डेवलपर के लिए सलाह

इंटरनल पेज की मदद से, Chrome में Web Serial API को आसानी से डीबग किया जा सकता है, about://device-log जहां सीरियल डिवाइस से जुड़े सभी इवेंट एक ही बार में देखे जा सकते हैं एक ही जगह पर.

Web Serial API को डीबग करने के लिए, इंटरनल पेज का स्क्रीनशॉट.
वेब सीरियल एपीआई को डीबग करने के लिए, Chrome का इंटरनल पेज.

कोडलैब (कोड बनाना सीखना)

Google Developer कोडलैब में, आपको इंटरैक्ट करने के लिए Web Serial API का इस्तेमाल करना होगा जिसमें BBC Micro:bit बोर्ड हो, जो 5x5 LED मैट्रिक्स पर इमेज दिखाता हो.

ब्राउज़र समर्थन

Web Serial API सभी डेस्कटॉप प्लैटफ़ॉर्म पर उपलब्ध है. इनमें ChromeOS, Linux, macOS, और Windows) पर उपलब्ध है.

पॉलीफ़िल

Android पर, WebUSB API का इस्तेमाल करके, यूएसबी पर आधारित सीरियल पोर्ट काम कर सकते हैं और Serial API पॉलीफ़िल होना चाहिए. यह पॉलीफ़िल सिर्फ़ हार्डवेयर और ऐसे प्लैटफ़ॉर्म जहां डिवाइस को WebUSB API की मदद से ऐक्सेस किया जा सकता है, क्योंकि दावा बिल्ट-इन डिवाइस ड्राइवर ने किया हो.

सुरक्षा और निजता

स्पेसिफ़िकेशन में शामिल, वेब सीरियल एपीआई को शानदार वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना में बताए गए सिद्धांत, इसमें उपयोगकर्ता के कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स का इस्तेमाल करना शामिल है. इस सुविधा का इस्तेमाल करके एपीआई को मुख्य रूप से अनुमति के ऐसे मॉडल से लॉक किया जाता है जो सिर्फ़ एक एक बार में कई डिवाइसों पर देखा जा सकता है. उपयोगकर्ता के प्रॉम्प्ट के जवाब में, उपयोगकर्ता को ऐक्टिव होना चाहिए किसी सीरियल डिवाइस को चुनने के लिए यह तरीका अपनाएं.

सुरक्षा के जोखिमों को समझने के लिए, सुरक्षा और निजता के बारे में जानें वेब सीरियल एपीआई एक्सप्लेनर के सेक्शन में दिए गए हैं.

सुझाव/राय दें या शिकायत करें

Chrome टीम को वेब सीरियल एपीआई.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो उम्मीद के मुताबिक काम नहीं करता? या ऐसे हैं क्या आपको अपने आइडिया पर काम करने के लिए कुछ तरीके या प्रॉपर्टी नहीं मिल रही हैं?

Web Serial API GitHub के रेपो पर स्पेसिफ़िकेशन से जुड़ी समस्या दर्ज करें या अपने मौजूदा समस्या के बारे में अपने विचार बताएं.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या, लागू करने पर क्या यह स्पेसिफ़िकेशन से अलग है?

https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी शामिल करना न भूलें ब्यौरा दें, बग का समाधान करने के लिए आसान निर्देश दें, और कॉम्पोनेंट Blink>Serial पर सेट किए गए. Glitch इनके लिए बेहतरीन काम करता है: तुरंत और आसानी से दोहराने की सुविधा देता है.

सपोर्ट करें

क्या आपको Web Serial API इस्तेमाल करना है? आपके सार्वजनिक समर्थन से Chrome को टीम, सुविधाओं को प्राथमिकता देती है और अन्य ब्राउज़र वेंडर को दिखाती है कि उनके लिए मदद मिलती है.

हैशटैग का इस्तेमाल करके @ChromiumDev को ट्वीट भेजें #SerialAPI और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक

डेमो

स्वीकार की गई

इस लेख पर समीक्षाएं लिखने के लिए, रेली ग्रांट और जो मेडली का धन्यवाद. अनस्प्लैश पर बर्मिंघम म्यूज़ियम्स ट्रस्ट की ओर से हवाई जहाज़ फ़ैक्ट्री की फ़ोटो.