JS如何访问串口：使用Web Serial API、使用Node.js的serialport库、在Electron中使用串口库。 Web Serial API 是一种相对较新的技术，它使得在Web浏览器中直接访问串口设备成为可能。本文将详细介绍这三种方法，并深入探讨它们的应用场景和优缺点。
一、使用Web Serial API
Web Serial API 是一项由Google提出并在Chromium浏览器中实现的API，使得Web应用可以直接与串口设备进行通信。以下是详细的介绍和使用方法。
1、Web Serial API的基本概念
Web Serial API 是一种允许Web应用与串口设备进行通信的接口。它为Web开发者提供了一个标准的方式来访问串口设备，从而无需借助中间层或插件。
2、浏览器支持情况
目前，Web Serial API 主要在基于Chromium的浏览器（如Google Chrome, Microsoft Edge）中得到支持。其他浏览器可能还没有实现这一特性，因此在开发时需要注意兼容性问题。
3、使用Web Serial API的步骤
1. 请求串口设备
首先，用户需要授予Web应用访问串口设备的权限。可以通过调用 navigator.serial.requestPort 方法来请求设备。
let port;
const requestPort = async () => {
port = await navigator.serial.requestPort();
};
2. 打开串口
在获得设备的权限后，可以通过调用 port.open 方法来打开串口。
const openPort = async () => {
await port.open({ baudRate: 9600 });
};
3. 读写数据
一旦串口被打开，可以使用 port.readable 和 port.writable 属性来读写数据。
const writer = port.writable.getWriter();
await writer.write(new Uint8Array([0x01, 0x02, 0x03]));
writer.releaseLock();
const reader = port.readable.getReader();
const { value, done } = await reader.read();
reader.releaseLock();
4、应用场景和优缺点
优点：无需安装额外的软件或库，适用于轻量级应用。
缺点：浏览器支持有限，性能和功能可能受到限制。
二、使用Node.js的serialport库
Node.js 提供了丰富的库来访问底层硬件设备，其中 serialport 库是最常用的串口通信库之一。以下是详细介绍和使用方法。
1、安装serialport库
使用 npm 来安装 serialport 库：
npm install serialport
2、使用serialport库的基本步骤
1. 导入serialport库
首先，需要在项目中导入 serialport 库。
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');
2. 打开串口
使用 SerialPort 类来打开串口。
const port = new SerialPort('/dev/tty-usbserial1', {
baudRate: 9600
});
3. 读写数据
可以通过 write 方法来写数据，通过 on 方法监听数据读取事件。
port.write('Hello from Node.jsn', (err) => {
if (err) {
return console.log('Error on write: ', err.message);
}
console.log('message written');
});
port.on('data', (data) => {
console.log('Data received: ', data);
});
3、应用场景和优缺点
优点：功能强大，支持多种平台，适用于复杂应用。
缺点：需要安装Node.js环境，增加了部署复杂度。
三、在Electron中使用串口库
Electron 是一种用于创建跨平台桌面应用的框架，它结合了Chromium和Node.js的特性，使得开发者可以使用Web技术来构建桌面应用。以下是详细介绍和使用方法。
1、安装Electron和串口库
使用 npm 来安装 Electron 和 serialport 库：
npm install electron serialport
2、创建Electron应用
1. 创建主进程文件
在 main.js 中创建主进程代码。
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
});
2. 创建渲染进程文件
在 index.html 中创建渲染进程代码。
<!DOCTYPE html>
<html>
<head>
<title>Electron Serial Port</title>
</head>
<body>
<h1>Hello from Electron</h1>
<script>
const SerialPort = require('serialport');
const port = new SerialPort('/dev/tty-usbserial1', {
baudRate: 9600
});
port.on('data', (data) => {
console.log('Data received: ', data);
});
port.write('Hello from Electronn', (err) => {
if (err) {
return console.log('Error on write: ', err.message);
}
console.log('message written');
});
</script>
</body>
</html>
3、应用场景和优缺点
优点：跨平台，适用于桌面应用开发，结合了Web和Node.js的优点。
缺点：应用体积较大，性能可能不如原生应用。
四、总结
JS访问串口的方法主要包括使用Web Serial API、使用Node.js的serialport库、在Electron中使用串口库。每种方法都有其独特的优点和适用场景，开发者可以根据具体需求选择合适的方法。对于轻量级Web应用，可以选择Web Serial API；对于复杂的服务器端应用，可以选择Node.js的serialport库；而对于跨平台桌面应用，Electron则是一个理想的选择。希望本文能为您在JS中访问串口提供有价值的参考。
相关问答FAQs：
1. 如何使用JavaScript访问串口？
JavaScript是一种用于网页和应用程序的脚本语言，通常在浏览器中运行。JavaScript本身没有直接访问串口的功能。但是，可以使用Web Serial API来实现通过JavaScript访问串口的功能。Web Serial API可以让网页应用程序与串口设备进行通信，从而实现对串口的读写操作。
2. 如何使用Web Serial API在JavaScript中读取串口数据？
要在JavaScript中读取串口数据，首先需要使用navigator.serial.requestPort()方法请求访问串口。然后，可以使用port.readable对象来读取串口数据。可以通过监听readable对象的data事件来获取读取到的串口数据。
3. 如何使用Web Serial API在JavaScript中写入串口数据？
要在JavaScript中写入串口数据，同样需要使用navigator.serial.requestPort()方法请求访问串口。然后，可以使用port.writable对象来写入串口数据。可以使用write()方法将数据写入串口。
请注意，Web Serial API目前仅在部分浏览器中得到支持，例如Chrome和Edge浏览器。在使用之前，请确保您的浏览器支持该API并进行相应的配置。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2257546
