1. 项目概述最近在开发一个零售收银系统时遇到了需要对接电子秤和扫码枪的需求。这类硬件设备通常通过串口与计算机通信而传统认知中串口开发是后端的工作范畴。但实际上借助Node.js的SerialPort库前端开发者也能直接处理串口通信。这个发现让我兴奋不已经过两周的实战总结出这套完整的前端串口开发方案。电子秤和扫码枪在商超、物流、仓储等场景十分常见。电子秤通过RS232或USB转串口输出重量数据扫码枪则通过模拟串口发送条码信息。传统方案需要后端开发中间件转发数据增加了系统复杂度和延迟。而前端直连方案不仅响应更快还能减少前后端联调成本。2. 环境准备与基础配置2.1 Electron项目搭建由于浏览器安全限制纯Web环境无法直接访问串口因此我们需要基于Electron框架开发。以下是现代Electron项目的标准搭建流程# 创建项目目录 mkdir pos-system cd pos-system # 初始化项目推荐使用pnpm pnpm init # 安装Electron当前稳定版为28.x pnpm add electron -D # 基础目录结构 ├── src │ ├── main.js # 主进程代码 │ └── preload.js # 预加载脚本 ├── index.html # 渲染进程页面 └── package.json提示Electron 28对应Node.js 18.x这个版本信息对后续SerialPort安装很重要。可以在 Electron发布表 查询版本对应关系。2.2 SerialPort安装与编译SerialPort是Node.js的C插件需要根据Electron的Node版本选择对应版本# 查看Electron使用的Node版本 npx electron -p process.versions.node # 安装对应版本的SerialPort pnpm add serialport10 # Electron 11-13 pnpm add serialport11 # Electron 14-16 pnpm add serialport12 # Electron 17关键编译步骤# 全局安装编译工具链 pnpm add node-gyp -g # 针对Electron重新编译 cd node_modules/serialport/bindings node-gyp rebuild --targetelectron版本 --archx64常见编译问题解决方案MSBuild找不到安装Visual Studio Build Tools勾选C桌面开发Python环境问题确保系统有Python 3.10且已添加到PATH版本不匹配使用nvm切换Node版本至Electron对应版本再编译3. 串口通信核心实现3.1 设备连接与配置电子秤和扫码枪的通信参数通常如下电子秤波特率9600数据位8停止位1无校验扫码枪波特率115200数据位8停止位1无校验获取可用串口列表的现代写法const { SerialPort } require(serialport) async function listPorts() { const ports await SerialPort.list() console.log(可用串口:, ports.map(p ${p.path} (${p.manufacturer || 未知}))) }3.2 数据收发完整实现电子秤数据处理示例const port new SerialPort({ path: COM3, baudRate: 9600, dataBits: 8, stopBits: 1, parity: none }) // 重量数据解析假设格式 1.25 kg port.on(data, data { const raw data.toString(ascii).trim() const weight parseFloat(raw.split( )[0]) // 发送到渲染进程 mainWindow.webContents.send(weight-update, { value: weight, unit: kg, timestamp: Date.now() }) })扫码枪数据处理技巧// 扫码枪通常以回车结束数据 let buffer port.on(data, data { buffer data.toString(ascii) if (buffer.includes(\r)) { const [barcode] buffer.split(\r) handleBarcode(barcode.trim()) buffer } })3.3 双向通信控制向电子秤发送指令的可靠写法function sendCommand(cmd) { return new Promise((resolve, reject) { port.write(Buffer.from(cmd), err { if (err) return reject(err) // 等待设备响应 const handler data { const response data.toString(ascii) if (response.includes(ACK)) { port.off(data, handler) resolve(response) } } port.on(data, handler) setTimeout(() reject(Timeout), 3000) }) }) } // 示例切换计量单位 await sendCommand(SET UNIT kg\r\n)4. 实战问题与解决方案4.1 设备连接异常处理典型问题1串口被占用try { const port new SerialPort({ path: COM3, baudRate: 9600 }) } catch (err) { if (err.message.includes(cannot open)) { console.error(串口被其他程序占用) // 自动尝试释放 await killProcessByPort(COM3) } }典型问题2波特率不匹配// 自动检测波特率仅支持标准速率 const possibleRates [9600, 19200, 38400, 57600, 115200] for (const rate of possibleRates) { try { const testPort new SerialPort({ path, baudRate: rate }) await new Promise(r setTimeout(r, 200)) testPort.close() return rate // 找到可用波特率 } catch {} }4.2 数据解析难点电子秤常见数据格式及处理方法固定长度格式 1.25 kg function parseFixed(raw) { return parseFloat(raw.slice(4, 9)) }分隔符格式WT:1.25KGfunction parseDelimited(raw) { return parseFloat(raw.split(:)[1].replace(KG, )) }协议格式ST,GS,1.25,kg,ETXfunction parseProtocol(raw) { const parts raw.split(,) if (parts[0] ST parts[4] ETX) { return { value: parts[2], unit: parts[3] } } }4.3 性能优化技巧数据流节流电子秤可能高频发送数据let lastUpdate 0 port.on(data, data { if (Date.now() - lastUpdate 100) { // 100ms间隔 processData(data) lastUpdate Date.now() } })二进制模式优化对于固定格式数据直接处理Buffer更高效port.on(data, buffer { const weight buffer.readFloatBE(2) // 从第3字节读取浮点数 })错误恢复机制自动重连实现function connectWithRetry(portName, retries 3) { const port new SerialPort({ path: portName, baudRate: 9600 }) port.on(close, () { if (retries 0) { setTimeout(() connectWithRetry(portName, retries - 1), 1000) } }) return port }5. 进阶应用场景5.1 多设备协同工作超市收银台典型配置// 电子秤和扫码枪同时工作 const scale new SerialPort({ path: COM3, baudRate: 9600 }) const scanner new SerialPort({ path: COM4, baudRate: 115200 }) // 数据聚合 const productData {} scale.on(data, data { productData.weight parseWeight(data) }) scanner.on(data, data { productData.barcode parseBarcode(data) if (productData.weight productData.barcode) { completeProduct(productData) } })5.2 设备模拟与测试开发阶段可以使用虚拟串口工具// 使用serialport-test模拟设备 const { MockBinding } require(serialport/binding-mock) MockBinding.createPort(/dev/ROBOT, { echo: true, record: true }) // 测试脚本示例 const port new SerialPort({ binding: MockBinding, path: /dev/ROBOT }) port.write(TEST) port.on(data, data { console.assert(data.toString() TEST, 回显测试失败) })5.3 WebSocket桥接方案实现远程串口访问的安全方案// 主进程 const ws new WebSocketServer({ port: 8080 }) scale.on(data, data { ws.clients.forEach(client { client.send(JSON.stringify({ type: weight, data: data.toString() })) }) }) // 渲染进程 const socket new WebSocket(ws://localhost:8080) socket.onmessage ({ data }) { const { type, data } JSON.parse(data) if (type weight) updateWeightDisplay(data) }6. 安全与权限管理6.1 Electron安全配置在preload.js中安全暴露APIconst { contextBridge, ipcRenderer } require(electron) contextBridge.exposeInMainWorld(serialAPI, { listPorts: () ipcRenderer.invoke(serial:list), openPort: options ipcRenderer.invoke(serial:open, options), onData: callback { ipcRenderer.on(serial:data, (_, data) callback(data)) } })6.2 设备权限控制实现基于角色的设备访问function checkPermission(portInfo, userRole) { const protectedDevices [COM1, COM2] // 系统保留端口 if (protectedDevices.includes(portInfo.path)) { return userRole admin } return true }7. 调试与性能监控7.1 串口数据监听技巧使用中间件模式实现调试输出const debugStream new Transform({ transform(chunk, _, callback) { console.log(RAW DATA:, chunk) this.push(chunk) callback() } }) port.pipe(debugStream).pipe(realProcessor)7.2 性能指标收集监控串口通信质量const stats { bytesReceived: 0, packetsReceived: 0, lastUpdated: Date.now() } port.on(data, data { stats.bytesReceived data.length stats.packetsReceived // 每分钟输出统计 if (Date.now() - stats.lastUpdated 60000) { console.log(吞吐量: ${stats.bytesReceived/1024} KB/min) Object.keys(stats).forEach(k stats[k] 0) stats.lastUpdated Date.now() } })8. 打包与部署注意事项8.1 跨平台编译方案在package.json中配置序列化编译{ scripts: { rebuild: electron-rebuild -f -w serialport }, dependencies: { serialport: ^12.0.0, serialport/binding-mock: ^12.0.0 } }8.2 安装程序打包技巧使用electron-builder的extraFiles配置{ extraFiles: [ { from: node_modules/serialport/bindings/build/Release, to: Resources/bindings } ] }对于Windows平台可能需要额外包含驱动文件{ extraResources: [ { from: drivers/ch340, to: drivers } ] }9. 行业特定实现案例9.1 生鲜超市称重方案处理计价秤的特殊协议// 解析Toledo计价秤数据 function parseToledo(buffer) { const stx buffer[0] const etx buffer[buffer.length - 1] if (stx 0x02 etx 0x03) { const data buffer.slice(1, -1).toString(ascii) const [price, weight, total] data.split( ) return { price: parseFloat(price), weight: parseFloat(weight), total: parseFloat(total) } } }9.2 物流扫码称重一体机处理组合设备数据流// 使用分隔符区分设备类型 const DEVICE_HEADERS { \x01\x02: scale, \x02\x03: scanner } port.on(data, buffer { const header buffer.slice(0, 2).toString(hex) const device DEVICE_HEADERS[header] if (device scale) { processScaleData(buffer.slice(2)) } else if (device scanner) { processScannerData(buffer.slice(2)) } })10. 未来扩展方向10.1 Web Serial API展望虽然目前主流方案仍需依赖Electron但Web Serial API正在逐步普及// 浏览器环境下的未来方案 async function connectSerial() { const port await navigator.serial.requestPort() await port.open({ baudRate: 9600 }) const reader port.readable.getReader() while (true) { const { value, done } await reader.read() if (done) break console.log(Received:, new TextDecoder().decode(value)) } }10.2 物联网集成方案将串口设备接入物联网平台的架构设计[电子秤] -- [串口服务器] -- [MQTT Broker] -- [云平台] ↑ [扫码枪] ----------┘实现代码片段const mqtt require(mqtt) const client mqtt.connect(mqtt://iot.example.com) scale.on(data, data { client.publish(scale/weight, JSON.stringify({ deviceId: scale001, value: parseWeight(data), timestamp: Date.now() })) })经过这个项目的实战我深刻体会到前端工程师的边界正在不断扩展。从最初对串口通信的陌生到现在能游刃有余地处理各种硬件协议这个过程让我对前端开发的认知有了质的飞跃。最实用的建议是一定要保留详细的设备通信日志当遇到协议解析问题时原始数据记录往往比代码更有说服力。
