Web Serial API: การเชื่อมต่อช่องว่างระหว่างเว็บเบราว์เซอร์และอุปกรณ์ฮาร์ดแวร์

Web Serial API เป็นเทคโนโลยีปฏิวัติวงการที่ช่วยให้นักพัฒนาเว็บสามารถโต้ตอบโดยตรงกับอุปกรณ์อนุกรมได้จากภายในเว็บเบราว์เซอร์ สิ่งนี้เปิดโอกาสอันกว้างใหญ่ ตั้งแต่การควบคุมหุ่นยนต์และระบบสมองกลฝังตัว ไปจนถึงการรวบรวมข้อมูลเซ็นเซอร์และการสร้างประสบการณ์ทางกายภาพแบบโต้ตอบ คู่มือนี้ให้ภาพรวมที่ครอบคลุมของ Web Serial API ความสามารถ และวิธีนำไปใช้ในโครงการของคุณ โดยรองรับนักพัฒนาและผู้ที่สนใจทั่วโลก

Web Serial API คืออะไร?

Web Serial API ช่วยให้เว็บแอปพลิเคชันสามารถสื่อสารกับอุปกรณ์อนุกรม เช่น ไมโครคอนโทรลเลอร์, บอร์ด Arduino, เครื่องพิมพ์ 3 มิติ และฮาร์ดแวร์อื่น ๆ ได้โดยตรงจากเบราว์เซอร์ สิ่งนี้ทำได้ผ่านพอร์ตอนุกรม ซึ่งเป็นอินเทอร์เฟซมาตรฐานสำหรับการสื่อสารข้อมูล แตกต่างจากวิธีการก่อนหน้าที่ต้องใช้ปลั๊กอินหรือแอปพลิเคชันแบบเนทีฟ Web Serial API มอบวิธีที่ปลอดภัยและได้มาตรฐานในการโต้ตอบกับฮาร์ดแวร์

คุณสมบัติหลัก:

• การเข้าถึงที่ปลอดภัย: ต้องได้รับอนุญาตจากผู้ใช้อย่างชัดเจนเพื่อเข้าถึงอุปกรณ์เฉพาะ ซึ่งช่วยเพิ่มความปลอดภัย
• ความเข้ากันได้ข้ามแพลตฟอร์ม: ทำงานได้กับระบบปฏิบัติการต่าง ๆ รวมถึง Windows, macOS, Linux และ ChromeOS ทำให้ได้รับประสบการณ์ที่สอดคล้องกัน
• API ที่ได้มาตรฐาน: มี JavaScript API ที่สอดคล้องและใช้งานง่ายสำหรับการโต้ตอบกับอุปกรณ์อนุกรม
• การสตรีมข้อมูล: รองรับการสตรีมข้อมูลแบบเรียลไทม์ ทำให้สามารถแสดงภาพข้อมูลและการโต้ตอบแบบสดได้
• การสื่อสารแบบสองทิศทาง: ช่วยให้สามารถส่งและรับข้อมูลระหว่างเว็บแอปพลิเคชันและอุปกรณ์ฮาร์ดแวร์ได้

ประโยชน์ของการใช้ Web Serial API

Web Serial API มีประโยชน์มากมายสำหรับนักพัฒนา รวมถึง:

• การพัฒนาที่ง่ายขึ้น: ไม่จำเป็นต้องใช้ปลั๊กอินเฉพาะแพลตฟอร์มหรือการพัฒนาแอปพลิเคชันแบบเนทีฟ ทำให้กระบวนการพัฒนาง่ายขึ้น
• การเข้าถึงที่ดีขึ้น: ทำให้การโต้ตอบกับฮาร์ดแวร์เข้าถึงได้ง่ายขึ้นสำหรับผู้ชมในวงกว้าง เนื่องจากผู้ใช้สามารถควบคุมอุปกรณ์ได้โดยตรงจากเว็บเบราว์เซอร์ของตน
• ประสบการณ์ผู้ใช้ที่ดีขึ้น: มอบประสบการณ์ผู้ใช้ที่ราบรื่นและใช้งานง่ายยิ่งขึ้น เนื่องจากผู้ใช้สามารถโต้ตอบกับฮาร์ดแวร์ได้โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติม
• การโต้ตอบที่เพิ่มขึ้น: เปิดใช้งานการสร้างเว็บแอปพลิเคชันที่มีการโต้ตอบสูงซึ่งรวมเข้ากับโลกทางกายภาพ
• การเข้าถึงทั่วโลก: เว็บแอปพลิเคชันที่สร้างด้วย Web Serial API สามารถเข้าถึงได้จากอุปกรณ์ใด ๆ ที่มีเว็บเบราว์เซอร์และการเชื่อมต่ออินเทอร์เน็ต ซึ่งช่วยอำนวยความสะดวกในการทำงานร่วมกันและนวัตกรรมทั่วโลก

กรณีการใช้งานและตัวอย่าง

Web Serial API สามารถนำไปใช้กับโครงการและแอปพลิเคชันได้หลากหลาย รวมถึง:

• อินเทอร์เน็ตของสรรพสิ่ง (IoT): การเชื่อมโยงเว็บแอปพลิเคชันกับข้อมูลเซ็นเซอร์จากไมโครคอนโทรลเลอร์ การสร้างแดชบอร์ดสำหรับการตรวจสอบสภาพแวดล้อม การควบคุมสมาร์ทโฮม และระบบอัตโนมัติทางอุตสาหกรรม พิจารณาการใช้งานในสถานที่ต่าง ๆ เช่น การตรวจสอบอุณหภูมิในเรือนกระจกในเนเธอร์แลนด์ หรือการติดตามความชื้นในดินในฟาร์มในเคนยา
• หุ่นยนต์และระบบอัตโนมัติ: การควบคุมหุ่นยนต์ โดรน และระบบอัตโนมัติอื่น ๆ โดยตรงจากอินเทอร์เฟซเว็บ สิ่งนี้สามารถใช้เพื่อวัตถุประสงค์ทางการศึกษา (เช่น การเขียนโปรแกรมหุ่นยนต์ในโรงเรียนในญี่ปุ่น) หรือระบบอัตโนมัติทางอุตสาหกรรม (เช่น การควบคุมสายการผลิตในเยอรมนี)
• การควบคุมการพิมพ์ 3 มิติ: การจัดการและตรวจสอบเครื่องพิมพ์ 3 มิติโดยตรงจากเว็บเบราว์เซอร์ ทำให้ผู้ใช้สามารถอัปโหลดและควบคุมงานพิมพ์จากระยะไกลได้ สิ่งนี้มีประโยชน์อย่างยิ่งในการผลิตแบบกระจายศูนย์และ makerspaces ดังที่เห็นในประเทศอย่างสหรัฐอเมริกาหรืออินเดีย
• การเก็บรวบรวมและแสดงภาพข้อมูล: การรวบรวมข้อมูลจากเซ็นเซอร์ (เช่น อุณหภูมิ ความดัน แสง) และแสดงผลแบบเรียลไทม์บนเว็บแดชบอร์ด สิ่งนี้มีการประยุกต์ใช้อย่างกว้างขวาง ตั้งแต่การวิจัยทางวิทยาศาสตร์ในแคนาดาไปจนถึงการตรวจสอบทางการเกษตรในบราซิล
• โครงการการศึกษา: การสอนนักเรียนเกี่ยวกับอิเล็กทรอนิกส์ การเขียนโปรแกรม และการโต้ตอบกับฮาร์ดแวร์ ความเรียบง่ายของ Web Serial API ทำให้สามารถเข้าถึงได้สำหรับนักเรียนทุกวัยและทุกภูมิหลังทั่วโลก
• การติดตั้งแบบโต้ตอบ: การสร้างการติดตั้งที่น่าสนใจและโต้ตอบได้ซึ่งตอบสนองต่ออินพุตของผู้ใช้หรือข้อมูลเซ็นเซอร์ ตัวอย่างเช่น การติดตั้งงานศิลปะหรืองานจัดแสดงในพิพิธภัณฑ์ โดยใช้การประมวลผลทางกายภาพในประเทศต่างๆ เช่น ออสเตรเลีย

ตัวอย่าง: การควบคุมบอร์ด Arduino

มาสร้างตัวอย่างง่าย ๆ เพื่อควบคุม LED ที่เชื่อมต่อกับบอร์ด Arduino เราจะใช้ JavaScript เพื่อส่งคำสั่งไปยัง Arduino และ Arduino จะตอบสนองโดยการเปิดหรือปิด LED

1. โค้ด Arduino (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
              
            
          

โค้ด Arduino นี้:

• ตั้งค่าขา LED เป็นเอาต์พุต
• เริ่มต้นการสื่อสารแบบอนุกรมที่ 9600 บอด
• ตรวจสอบข้อมูลอนุกรมที่เข้ามาอย่างต่อเนื่อง
• หากได้รับข้อมูล จะอ่านอักขระ
• หากอักขระเป็น '1' จะเปิด LED
• หากอักขระเป็น '0' จะปิด LED
• ส่งข้อความยืนยันกลับไปยังพอร์ตอนุกรม

2. HTML และ JavaScript (เว็บเบราว์เซอร์):

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

คำอธิบายโค้ด JavaScript:

• ปุ่มเชื่อมต่อ: เมื่อคลิก จะร้องขอการเข้าถึงพอร์ตอนุกรมและพยายามเปิดพอร์ต
• ปุ่มเปิด/ปิด LED: ส่งคำสั่ง "1" เพื่อเปิด LED และ "0" เพื่อปิด LED
• สถานะการเชื่อมต่อ: แสดงสถานะการเชื่อมต่อปัจจุบัน
• `navigator.serial.requestPort()`: แจ้งผู้ใช้ให้เลือกพอร์ตอนุกรม
• `port.open()`: เปิดพอร์ตอนุกรมที่เลือก พารามิเตอร์ `baudRate` ถูกตั้งค่าให้ตรงกับโค้ด Arduino (9600)
• `port.writable.getWriter()`: สร้างตัวเขียนเพื่อส่งข้อมูลไปยังพอร์ตอนุกรม
• `writer.write(data)`: เขียนข้อมูล (คำสั่ง) ไปยังพอร์ตอนุกรม
• การจัดการข้อผิดพลาด: มีการจัดการข้อผิดพลาดเพื่อให้ข้อเสนอแนะแก่ผู้ใช้

วิธีเรียกใช้ตัวอย่าง:

1. เชื่อมต่อ Arduino: เชื่อมต่อบอร์ด Arduino เข้ากับคอมพิวเตอร์ของคุณผ่าน USB
2. อัปโหลดโค้ด Arduino: เปิด Arduino IDE และอัปโหลดโค้ดที่ให้ไว้ไปยังบอร์ด Arduino ของคุณ
3. สร้างไฟล์ HTML: บันทึกโค้ด HTML เป็นไฟล์ HTML (เช่น `index.html`)
4. เปิดไฟล์ HTML ในเบราว์เซอร์: เปิดไฟล์ `index.html` ในเว็บเบราว์เซอร์ที่รองรับ Web Serial API (เช่น Chrome, Edge และ Opera บางเวอร์ชัน)
5. เชื่อมต่อและควบคุม: คลิกปุ่ม "Connect to Arduino" เบราว์เซอร์ของคุณจะขอให้คุณเลือกพอร์ตอนุกรม เลือก Arduino จากนั้นคลิกปุ่ม "Turn LED On" และ "Turn LED Off" เพื่อควบคุม LED

เริ่มต้นใช้งาน Web Serial API

ในการเริ่มต้นใช้ Web Serial API คุณต้องมีสิ่งต่อไปนี้:

• เว็บเบราว์เซอร์ที่รองรับ Web Serial API: ปัจจุบันรองรับโดย Chrome, Edge และ Opera บางเวอร์ชัน ตรวจสอบความเข้ากันได้ของเบราว์เซอร์บนแหล่งข้อมูลเช่น Can I Use
• อุปกรณ์ฮาร์ดแวร์: เช่น Arduino, Raspberry Pi หรืออุปกรณ์ใด ๆ ที่สื่อสารผ่านพอร์ตอนุกรม
• ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript: ความคุ้นเคยกับเทคโนโลยีเว็บเหล่านี้เป็นสิ่งจำเป็น

คู่มือทีละขั้นตอน:

1. ร้องขอการเข้าถึงพอร์ตอนุกรม: ใช้ `navigator.serial.requestPort()` เพื่อแจ้งให้ผู้ใช้เลือกพอร์ตอนุกรม ฟังก์ชันนี้จะส่งคืน Promise ที่แก้ปัญหาเป็นออบเจกต์ `SerialPort` ข้อควรจำ: โดยปกติแล้วจำเป็นต้องมีการโต้ตอบกับผู้ใช้ (การคลิกปุ่ม) เพื่อเรียกใช้ `requestPort()`
2. เปิดพอร์ตอนุกรม: เรียกใช้เมธอด `port.open()` โดยส่งออบเจกต์การกำหนดค่าที่ระบุอัตราบอดและพอร์ตอนุกรมอื่น ๆ (เช่น dataBits, stopBits, parity) อัตราบอดต้องตรงกับอัตราที่อุปกรณ์ฮาร์ดแวร์ของคุณใช้
3. รับสตรีมที่อ่านได้และเขียนได้: ใช้คุณสมบัติ `port.readable` และ `port.writable` เพื่อรับสตรีมที่อ่านได้และเขียนได้ สตรีมเหล่านี้ใช้สำหรับการส่งและรับข้อมูล
4. สร้างตัวเขียน: ใช้เมธอด `port.writable.getWriter()` เพื่อสร้างออบเจกต์ `writer` ซึ่งคุณจะใช้เพื่อส่งข้อมูลไปยังอุปกรณ์
5. สร้างตัวอ่าน: ใช้เมธอด `port.readable.getReader()` เพื่อสร้างออบเจกต์ `reader` ซึ่งคุณจะใช้เพื่อรับข้อมูลจากอุปกรณ์
6. เขียนข้อมูลไปยังอุปกรณ์: ใช้ `writer.write(data)` เพื่อส่งข้อมูลไปยังพอร์ตอนุกรม `data` ควรเป็น `ArrayBuffer` หรือ `Uint8Array` คุณสามารถใช้ `TextEncoder` เพื่อแปลงสตริงเป็น `Uint8Array`
7. อ่านข้อมูลจากอุปกรณ์: ใช้ `reader.read()` เพื่ออ่านข้อมูลจากพอร์ตอนุกรม เมธอดนี้จะส่งคืน Promise ที่แก้ปัญหาเป็นออบเจกต์ที่มีข้อมูลและค่าบูลีนที่ระบุว่าสตรีมปิดอยู่หรือไม่
8. ปิดพอร์ตอนุกรม: เมื่อเสร็จสิ้น ให้เรียกใช้ `writer.close()` และ `reader.cancel()` เพื่อปิดสตรีม จากนั้นเรียกใช้ `port.close()` เพื่อปิดพอร์ตอนุกรม ควรมีการจัดการข้อผิดพลาดเสมอเพื่อจัดการปัญหาที่อาจเกิดขึ้นกับการสื่อสารแบบอนุกรม

ตัวอย่างโค้ดและแนวทางปฏิบัติที่ดีที่สุด

นี่คือตัวอย่างโค้ดและแนวทางปฏิบัติที่ดีที่สุดเพิ่มเติมสำหรับการทำงานกับ Web Serial API:

1. การร้องขอพอร์ตอนุกรม:

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

              
                Copy
              
            
          

2. การเปิดและกำหนดค่าพอร์ตอนุกรม:

            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. การเขียนข้อมูลไปยังพอร์ตอนุกรม (สตริง):

            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. การอ่านข้อมูลจากพอร์ตอนุกรม:

            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. การปิดพอร์ตอนุกรม:

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

              
                Copy
              
            
          

แนวทางปฏิบัติที่ดีที่สุด:**

            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
              
            
          

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

              
                Copy