在electron中使用串口

博客介绍了在Electron中使用本机串口硬件的方法。因Electron集成的Node runtime版本与本机有差异,引用serialport需重新编译。详细说明了新建项目、安装相关包、重新编译serialport的步骤,还介绍了测试安装和编译是否成功的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果要在electron中使用本机的串口硬件,需要用到node-serialport这个package。 由于electron集成的node runtime版本与本机存在差异,所以如果要在electron项目里引用serialport的话,必须要重新把它编译成此时electron使用的版本。

首先,新建一个electron项目文件夹(比如elec-proj),然后使用vscode 打开这个文件夹;

打开Terminal,npm初始化这个项目:

npm init

接着,安装electron和serialport:

npm install electron --save-dev
npm install serialport --save

然后,安装electron-rebuild(用来重新编译serialport包):

npm install --save-dev electron-rebuild

重新编译serialport包:

.\node_modules\.bin\electron-rebuild.cmd

提示Rebuild Complete,表示编译完成。

接下来我们测试一下安装和编译是否成功:

新建main.js和index.html文件,分别拷贝官方例程到里面,然后添加串口模块,列出硬件串口设备。

//main.js

const {app, BrowserWindow} = require('electron');
const SerialPort = require('serialport');

SerialPort.list().then(
    ports => ports.forEach(console.log),
    err => console.error(err)
);

// 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被
// 垃圾回收的时候,window对象将会自动的关闭
let win;

function createWindow(){
    //创建浏览器窗口
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            nodeIntegration: true
        }
    });
    //加载index.html文件
    win.loadFile('index.html');
    //打开开发者工具
    win.webContents.openDevTools();

    //当window被关闭,这个事件被触发
    win.on('closed', () => {
        //取消引用的window对象
        win = null;
    });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
      createWindow()
    }
  })
  
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

package.json文件:

{
  "name": "electron-serialport",
  "version": "1.0.0",
  "description": "electron and serialport",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "ykee",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.1",
    "electron-rebuild": "^1.8.4"
  },
  "dependencies": {
    "serialport": "^7.1.5"
  }
}

启动:

npm start

窗口:

控制台输出串口列表:

### 如何在 Electron使用串口通信 #### 安装依赖库 为了在 Electron 应用程序中实现串口通信功能,需要安装 `electron-serialport` 和其他必要的工具来支持编译和运行环境。以下是所需的主要依赖项及其作用: - **`@serialport/bindings-cpp`**: 提供底层的串口操作接口。 - **`electron-rebuild`**: 用于重新构建原生模块以适配 Electron 的特定版本。 可以通过以下命令完成这些依赖的安装: ```bash npm install @serialport/stream @serialport/parser-readline electron-rebuild --save ``` 注意,在安装完成后需执行重建步骤以便兼容当前使用Electron 版本[^2]: ```bash ./node_modules/.bin/electron-rebuild ``` --- #### 初始化并配置串口连接 通过引入 `@serialport/stream` 来初始化串口实例,并设置波特率和其他参数。下面是一个简单的示例代码片段展示如何打开指定端口号以及读取数据流: ```javascript const { SerialPort } = require('@serialport/stream'); // 创建一个新的SerialPort对象 let port = new SerialPort({ path: '/dev/ttyUSB0', // 替换为实际设备路径 baudRate: 9600 // 设置波特率为9600bps }, (err) => { if (err) console.error('Error opening the serial port:', err.message); }); // 添加事件监听器捕获传入的数据 port.on('data', function(data){ console.log(`Received data from serial port: ${data.toString()}`); }); ``` 上述脚本展示了基本的操作流程,包括定义目标串行端口的位置、速率以及其他选项;同时附加了一个回调函数用来接收来自外设的消息[^1]。 --- #### 错误处理与调试技巧 考虑到真实世界中的复杂性和不确定性因素,建议增加额外的安全措施来增强系统的健壮性。例如可以加入 try...catch 块捕捉潜在异常或者定期轮询状态信息确认链接正常工作等等[^3]: ```javascript try{ let portStatus = port.isOpen(); if(!portStatus){ throw new Error("The specified COM Port is not open."); } }catch(e){ console.warn("Failed checking port status:", e.message); } finally{ setTimeout(() => { port.close((errorOnClose)=>{ errorOnClose ? console.error(errorOnClose): null; }); }, 5000); // 自动关闭超时设定时间为五秒 } ``` 此部分强调了良好的编程实践对于稳定可靠的应用至关重要——即使是最基础的功能也应考虑边界条件下的行为表现。 --- #### 测试阶段注意事项 最后提醒开发者们务必重视全面详尽地验证整个解决方案的有效性。这不仅限于理论上的正确与否,还涉及具体场景下能否满足预期需求等问题。推荐采用虚拟仿真工具代替真实的物理组件作为初步筛查手段之一。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值