前言

在现代Web开发中，随着IoT设备和硬件交互需求的增长，浏览器与串口设备的通信变得越来越重要。本文将详细介绍如何在Vue项目中使用Web Serial API实现串口通信功能，为开发者提供一个完整的解决方案。

技术背景

传统方案的局限性

传统的串口通信通常依赖Node.js环境下的 serialport 模块，但这种方案存在以下问题：

• 环境限制 ：需要Electron或Node.js环境，无法在纯浏览器环境中运行
• 部署复杂 ：需要额外的桌面应用打包和分发
• 安全限制 ：浏览器安全策略阻止直接访问系统硬件

Web Serial API的优势

Web Serial API是现代浏览器提供的原生串口通信接口，具有以下优势：

• 原生支持 ：无需额外依赖，直接在浏览器中运行
• 安全可控 ：用户主动授权，符合浏览器安全策略
• 跨平台 ：支持Windows、macOS、Linux等主流操作系统
• 易于集成 ：可直接集成到现有Vue项目中

1，安装serialport模块

npm install serialport

2，核心工具类实现

WebSerialUtil.js

首先，我们创建一个封装Web Serial API的工具类：

// Web Serial API 工具类
class WebSerialUtil {constructor() {this.port = null;this.reader = null;this.writer = null;this.isConnected = false;}// 检查浏览器支持isSupported() {return 'serial' in navigator;}// 请求串口权限并连接async connect(options = {}) {if (!this.isSupported()) {throw new Error('浏览器不支持Web Serial API');}try {// 请求用户选择串口this.port = await navigator.serial.requestPort();// 打开串口await this.port.open({baudRate: options.baudRate || 9600,dataBits: options.dataBits || 8,stopBits: options.stopBits || 1,parity: options.parity || 'none'});this.reader = this.port.readable.getReader();this.writer = this.port.writable.getWriter();this.isConnected = true;return { success: true, message: '串口连接成功' };} catch (error) {return { success: false, message: error.message };}}// 读取数据async readData(callback) {if (!this.isConnected || !this.reader) {throw new Error('串口未连接');}try {while (true) {const { value, done } = await this.reader.read();if (done) break;// 将Uint8Array转换为字符串const text = new TextDecoder().decode(value);if (callback) callback(text);}} catch (error) {console.error('读取数据失败:', error);}}// 发送数据async writeData(data) {if (!this.isConnected || !this.writer) {throw new Error('串口未连接');}try {const encoder = new TextEncoder();await this.writer.write(encoder.encode(data));return { success: true };} catch (error) {return { success: false, message: error.message };}}// 断开连接async disconnect() {try {if (this.reader) {await this.reader.cancel();await this.reader.releaseLock();}if (this.writer) {await this.writer.releaseLock();}if (this.port) {await this.port.close();}this.port = null;this.reader = null;this.writer = null;this.isConnected = false;return { success: true };} catch (error) {return { success: false, message: error.message };}}
}export default new WebSerialUtil();

3，在组件中使用

<template><div><el-button @click="connectSerial" :disabled="isConnected">连接串口</el-button><el-button @click="disconnectSerial" :disabled="!isConnected">断开连接</el-button><el-input v-model="sendData" placeholder="输入数据"></el-input><el-button @click="sendSerialData">发送</el-button><div><h4>接收数据:</h4><pre>{{ receivedData }}</pre></div></div>
</template><script>
import webSerial from '@/util/webserial'export default {data() {return {isConnected: false,sendData: '',receivedData: ''}},methods: {async connectSerial() {if (!webSerial.isSupported()) {this.$message.error('浏览器不支持Web Serial API，请使用Chrome 89+');return;}const result = await webSerial.connect({ baudRate: 9600 });if (result.success) {this.isConnected = true;this.$message.success('串口连接成功');// 开始读取数据webSerial.readData((data) => {this.receivedData += data;});} else {this.$message.error('连接失败: ' + result.message);}},async disconnectSerial() {const result = await webSerial.disconnect();if (result.success) {this.isConnected = false;this.$message.success('串口已断开');}},async sendSerialData() {if (!this.sendData) {this.$message.warning('请输入要发送的数据');return;}const result = await webSerial.writeData(this.sendData);if (result.success) {this.sendData = '';this.$message.success('数据发送成功');} else {this.$message.error('发送失败: ' + result.message);}}},beforeDestroy() {if (this.isConnected) {webSerial.disconnect();}}
}
</script>

故障排除

常见问题及解决方案

1. 浏览器不支持

• 确保使用Chrome 89+或Edge 89+
• 检查浏览器实验性功能设置

2. 权限被拒绝
   • 确保在用户交互事件中调用API
   • 检查浏览器安全策略设置
3. 设备连接失败

• 确认设备驱动程序已安装
• 检查设备是否被其他程序占用
• 验证串口参数设置

4. 数据传输异常
   • 检查波特率等参数配置
   • 确认数据格式和编码
   • 添加适当的错误处理

总结

Web Serial API为前端开发者提供了一个强大而安全的串口通信解决方案。通过本文介绍的WebSerialUtil工具类，我们可以轻松地在Vue项目中集成串口通信功能，无需依赖Node.js或桌面应用程序。

主要优势

• 简单易用 ：封装后的API简化了复杂的串口操作
• 现代化 ：基于Promise的异步编程模式
• 安全可靠 ：浏览器原生支持，用户授权机制
• 跨平台 ：支持Windows、macOS、Linux

适用场景

• 物联网设备调试和监控
• 工业设备数据采集
• 教育和原型开发
• 硬件测试工具

随着Web技术的不断发展，Web Serial API将为更多创新应用提供可能。对于需要与硬件设备交互的Web应用来说，这无疑是一个值得关注和使用的技术。