当前位置：首页 > 行业动态 > 正文

如何在Chrome中使用JavaScript进行串口通信？

admin
行业动态
2024-12-15
2218

在现代Web开发中，与硬件设备进行通信变得越来越普遍，Chrome浏览器提供了一种强大的API——串口API（Serial API），允许Web应用程序直接与串行端口进行交互，本文将详细介绍如何在Chrome中使用JavaScript操作串口，包括打开串口、读取和写入数据、关闭串口等操作，并提供相关的代码示例和常见问题解答。

如何在Chrome中使用JavaScript进行串口通信？第1张

检查浏览器支持

我们需要确认当前使用的Chrome版本是否支持串口API，可以通过以下代码进行检查：

if ('serial' in navigator) {
    console.log('This browser supports the Serial API.');
} else {
    console.error('This browser does not support the Serial API.');
}

请求串口权限

在使用串口之前，需要请求用户的权限，这可以通过调用navigator.serial.requestPort()方法来实现：

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

打开串口

获取到串口后，接下来需要打开串口以进行数据传输，这可以通过调用open()方法来实现：

async function openSerialPort(port) {
    if (!port) return;
    try {
        await port.open({ baudRate: 9600 }); // 设置波特率为9600
        console.log('Serial port opened successfully.');
    } catch (error) {
        console.error(Error opening serial port: ${error});
    }
}

读取数据

一旦串口打开，就可以开始读取数据了，可以使用readable流来监听数据：

function readData(port) {
    port.readable.getReader().read().then(reader => {
        return new ReadableStreamDefaultReader(reader);
    }).catch(error => {
        console.error(Error reading from serial port: ${error});
    });
}

写入数据

同样地，可以使用writable流来向串口写入数据：

function writeData(port, data) {
    port.writable.getWriter().write(data).then(() => {
        console.log('Data written to serial port.');
    }).catch(error => {
        console.error(Error writing to serial port: ${error});
    });
}

关闭串口

完成数据传输后，记得关闭串口以释放资源：

async function closeSerialPort(port) {
    if (!port) return;
    try {
        await port.close();
        console.log('Serial port closed successfully.');
    } catch (error) {
        console.error(Error closing serial port: ${error});
    }
}

完整示例

以下是一个完整的示例，展示了如何请求串口权限、打开串口、读取和写入数据以及关闭串口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Serial API Example</title>
</head>
<body>
    <button id="connectBtn">Connect</button>
    <button id="disconnectBtn" disabled>Connect</button>
    <script>
        let port = null;
        async function requestSerialPort() {
            try {
                port = await navigator.serial.requestPort();
                console.log(Requested serial port: ${port.path});
                document.getElementById('connectBtn').disabled = true;
                document.getElementById('disconnectBtn').disabled = false;
            } catch (error) {
                console.error(Error requesting serial port: ${error});
            }
        }
        async function openSerialPort() {
            if (!port) return;
            try {
                await port.open({ baudRate: 9600 }); // 设置波特率为9600
                console.log('Serial port opened successfully.');
                readData(port);
            } catch (error) {
                console.error(Error opening serial port: ${error});
            }
        }
        function readData(port) {
            port.readable.getReader().read().then(reader => {
                return new ReadableStreamDefaultReader(reader);
            }).catch(error => {
                console.error(Error reading from serial port: ${error});
            });
        }
        function writeData(port, data) {
            port.writable.getWriter().write(data).then(() => {
                console.log('Data written to serial port.');
            }).catch(error => {
                console.error(Error writing to serial port: ${error});
            });
        }
        async function closeSerialPort() {
            if (!port) return;
            try {
                await port.close();
                console.log('Serial port closed successfully.');
                document.getElementById('connectBtn').disabled = false;
                document.getElementById('disconnectBtn').disabled = true;
            } catch (error) {
                console.error(Error closing serial port: ${error});
            }
        }
        document.getElementById('connectBtn').addEventListener('click', requestSerialPort);
        document.getElementById('disconnectBtn').addEventListener('click', closeSerialPort);
    </script>
</body>
</html>