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

如何使用Chrome.js进行串口通信？

admin
行业动态
2024-12-21
3201

Chrome 浏览器通过其强大的扩展系统和 API 支持，为用户提供了丰富的功能增强，串口通信是一个重要且实用的功能，尤其在需要与硬件设备进行数据交换的场景中，本文将详细介绍如何在 Chrome 中使用 JavaScript 进行串口操作，包括获取串口设备列表、连接串口、发送和接收数据等步骤。

如何使用Chrome.js进行串口通信？第1张

一、准备工作

在使用 Chrome 的串口 API 之前，需要确保以下几点：

1、使用 HTTPS：由于安全原因，Web Serial API 只能在 HTTPS 环境下使用，如果是在本地开发环境，可以使用localhost 来绕过这一限制。

2、检查浏览器支持：Chromium 内核版本 89 及以上版本的浏览器才支持 Web Serial API，可以通过if ("serial" in navigator) 语句来检查当前浏览器是否支持该 API。

3、安装必要的库：如果需要处理字符串编码转换，可以使用iconv-lite 库，可以通过 npm 安装：npm install iconv-lite。

二、获取串口设备列表

要获取系统中可用的串口设备列表，可以使用navigator.serial.getPorts() 方法，该方法返回一个 Promise，解析后可以得到一个包含所有串口设备的数组，每个设备对象包含设备的路径（path）和其他信息。

async function getSerialPorts() {
    try {
        const ports = await navigator.serial.getPorts();
        ports.forEach(port => console.log(Device: ${port.getInfo().usbVendorId}, Product ID: ${port.getInfo().usbProductId}));
    } catch (err) {
        console.error('Error getting serial ports:', err);
    }
}

三、连接串口

选择并连接到指定的串口设备，可以使用navigator.serial.requestPort() 方法，此方法会弹出一个对话框，让用户选择一个串口设备，并返回一个 Promise，解析后得到一个 SerialPort 对象。

async function connectToSerialPort() {
    try {
        const port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 }); // 设置波特率等参数
        console.log('Connected to:', port.getInfo());
        return port;
    } catch (err) {
        console.error('Error connecting to serial port:', err);
    }
}

四、发送数据

一旦串口连接建立，就可以使用write() 方法向串口发送数据，数据可以是 ArrayBuffer、ArrayBufferView 或 Blob 类型。

function sendData(port, data) {
    port.write(data).then(() => {
        console.log('Data sent successfully');
    }).catch(err => {
        console.error('Error sending data:', err);
    });
}

五、接收数据

接收串口数据需要使用readable stream，可以创建一个TextDecoderStream 和一个自定义的转换器来处理接收到的数据，以下是一个简单的示例，展示如何读取串口数据并将其转换为字符串：

async function readFromSerialPort(port) {
    const decoder = new TextDecoderStream();
    const reader = port.readable.pipeThrough(new TransformStream(new LineBreakTransformer())).getReader();
    const inputDone = port.readable.pipeTo(decoder.writable);
    while (true) {
        const { value, done } = await reader.read();
        if (value) {
            console.log('Received:', value);
        }
        if (done) {
            break;
        }
    }
}

六、关闭串口

完成数据传输后，应关闭串口连接以释放资源，可以使用close() 方法关闭串口。

async function closeSerialPort(port) {
    try {
        await port.close();
        console.log('Serial port closed');
    } catch (err) {
        console.error('Error closing serial port:', err);
    }
}

七、完整示例代码

以下是一个完整的示例代码，展示了如何获取串口设备列表、连接串口、发送和接收数据以及关闭串口：

async function main() {
    if (!("serial" in navigator)) {
        console.error("Your browser does not support the Web Serial API");
        return;
    }
    try {
        // 获取串口设备列表
        const ports = await navigator.serial.getPorts();
        ports.forEach(port => console.log(Device: ${port.getInfo().usbVendorId}, Product ID: ${port.getInfo().usbProductId}));
        // 请求并连接到串口设备
        const port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        console.log('Connected to:', port.getInfo());
        // 发送数据
        const data = convertStringToArrayBuffer("Hello, World!");
        sendData(port, data);
        // 接收数据
        await readFromSerialPort(port);
        // 关闭串口
        await closeSerialPort(port);
    } catch (err) {
        console.error('Error:', err);
    }
}
main();