serial port comport write and read in Next.js

การใช้งาน Serial Port หรือ COM Port ในการเขียนและอ่านข้อมูลเป็นสิ่งที่มีความสำคัญอย่างมากในวงการพัฒนาโปรแกรม โดยเฉพาะอย่างยิ่งเมื่อต้องการเชื่อมต่อกับอุปกรณ์ฮาร์ดแวร์ เช่น Arduino หรือ Raspberry Pi ในบทความนี้เราจะมาทำความเข้าใจเกี่ยวกับการใช้งาน Serial Port ใน Next.js ซึ่งเป็นเฟรมเวิร์กสำหรับการสร้างแอปพลิเคชันบนเว็บด้วย JavaScript และ Node.js

ความรู้เบื้องต้นเกี่ยวกับ Serial Port

Serial Port เป็นช่องทางการสื่อสารที่ใช้ในการส่งข้อมูลระหว่างคอมพิวเตอร์กับอุปกรณ์อื่นๆ โดยมีการส่งข้อมูลเป็นแบบอนุกรม เช่น อุปกรณ์เชื่อมต่อแบบ USB, Arduino, หรืออื่นๆ การสื่อสารผ่าน Serial Port มีความสำคัญในหลายๆ ด้าน เช่น การส่งข้อมูลจากเซนเซอร์, การควบคุมอุปกรณ์ต่างๆ หรือแม้กระทั่งการอัปเดตเฟิร์มแวร์

ใช้งาน Serial Port ใน Next.js

ใน Next.js นั้น เรายังไม่สามารถเชื่อมต่อ Serial Port โดยตรงจากหน้าเว็บใน Client-Side ได้เนื่องจากข้อจำกัดด้านความปลอดภัยและฟังก์ชันการทำงานของเบราว์เซอร์ แต่วิธีการหนึ่งที่เราสามารถทำได้คือการใช้ Node.js เพื่อทำงานกับ Serial Port ในฝั่ง Server และส่งข้อมูลไปยัง Client ผ่าน API

การติดตั้งโมดูลที่จำเป็น

ในการใช้ Serial Port ใน Node.js เราจำเป็นต้องใช้โมดูลที่ชื่อว่า `serialport` ซึ่งเราสามารถติดตั้งได้โดยใช้คำสั่ง npm ดังนี้:

 npm install serialport

ตัวอย่างการเขียนโค้ดอ่านข้อมูลจาก Serial Port

สมมติว่าเรามีอุปกรณ์ Arduino ที่ส่งข้อมูลอยู่ที่ Serial Port เราสามารถสร้าง API ใน Next.js เพื่ออ่านข้อมูลจาก Serial Port ได้ดังนี้:

 // pages/api/serial.js
import { SerialPort } from 'serialport';

export default function handler(req, res) {
    const port = new SerialPort({
        path: '/dev/ttyUSB0', // เปลี่ยนเป็นพอร์ตที่ใช้งาน
        baudRate: 9600,
    });

    port.on('open', () => {
        console.log('Port open');
        port.on('data', (data) => {
            console.log('Data:', data.toString());
            res.json({ message: data.toString() });
        });
    });

    port.on('error', (err) => {
        console.error('Error: ', err.message);
        res.status(500).json({ error: err.message });
    });
}

ในโค้ดด้านบน เราได้ทำการสร้าง API ที่ชื่อว่า `serial.js` ซึ่งจะทำการเปิด COM Port และรอรับข้อมูลที่ส่งมาจากอุปกรณ์เมื่อ Com Port เปิดอยู่ หากมีข้อมูลเข้ามา จะทำการส่งข้อมูลนั้นกลับมาให้ Client ผ่านทาง API

การอ่านข้อมูลจาก API ด้วย Client-Side

เพื่อให้สามารถเรียก API นี้จาก Client-Side ได้ เราสามารถใช้คำสั่ง `fetch` เพื่อทำการเรียกข้อมูลจาก API:

 // ตัวอย่างใน component
import { useEffect, useState } from 'react';

const SerialDataComponent = () => {
    const [data, setData] = useState('');

    useEffect(() => {
        const getData = async () => {
            const response = await fetch('/api/serial');
            const result = await response.json();
            setData(result.message);
        };

        getData();
    }, []);

    return (
        <div>
            <h1>ข้อมูลจาก Serial Port</h1>
            <p>{data}</p>
        </div>
    );
};

export default SerialDataComponent;

Use Case ในโลกจริง

การใช้งาน Serial Port มีความสำคัญในหลายๆ ด้านในชีวิตประจำวัน ตัวอย่างเช่น:

สรุป

การใช้งาน Serial Port ใน Next.js นั้นสามารถทำได้ง่ายๆ ด้วยการใช้ API ซึ่งช่วยให้เราสามารถอ่านและเขียนข้อมูลจากและไปยังอุปกรณ์ฮาร์ดแวร์ได้อย่างมีประสิทธิภาพ นอกจากนี้ยังมีหลากหลาย Use Case ที่สามารถนำไปใช้ในชีวิตประจำวันได้อย่างน่าสนใจ

หากคุณสนใจเรียนรู้การเขียนโปรแกรมและการทำงานกับอุปกรณ์ฮาร์ดแวร์เช่น Serial Port หรือการพัฒนาแอปพลิเคชันบน Next.js อย่าลืมเข้าร่วมเรียนกับ EPT (Expert-Programming-Tutor) ที่เราพร้อมจะช่วยให้คุณกลายเป็นโปรแกรมเมอร์ที่เก่งในอนาคต!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง