前言

在現代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應用來說，這無疑是一個值得關注和使用的技術。