在Web应用中打开电脑串口可以通过以下两种主要方式实现，具体选择取决于浏览器兼容性和应用场景：
一、使用Web Serial API（现代浏览器支持）
Web Serial API 是浏览器原生提供的串口通信接口，支持跨平台访问本地串口设备，无需安装额外插件。以下是实现步骤：
浏览器兼容性检测 首先需检测浏览器是否支持该API：
```javascript
if ('serial' in navigator) {
// 支持Web Serial API
} else {
alert('您的浏览器不支持Web Serial API');
}
```
请求并选择串口
使用`navigator.serial.requestPort（）`弹出系统串口列表，用户选择目标设备后，通过`navigator.serial.getPorts（）`获取已连接的设备列表。
打开串口并配置参数
通过`port.open（）`方法打开串口，并设置波特率、数据位等参数：
```javascript
async function openPort() {
try {
const port = await navigator.serial.requestPort();
const baudRate = parseInt(document.getElementById('baudRate').value, 10);
await port.open({ baudRate, dataBits: 8, stopBits: 1, parity: 'N' });
console.log('串口已打开');
// 可绑定数据事件监听
port.ondata = (data) => {
document.getElementById('dataOutput').value += data;
};
} catch (error) {
console.error('打开串口失败:', error);
}
}
```
读写数据
- 读取数据： 通过`port.readable`事件监听数据可用性，或使用`port.read（）`方法主动读取。 - 发送数据
二、使用ActiveX控件（兼容旧浏览器）
对于不支持Web Serial API的浏览器（如IE11），可通过ActiveX控件实现串口访问。此方法需用户安装特定插件，存在兼容性和安全性风险：
创建ActiveX控件 使用如`TComm.mComm`等第三方ActiveX控件，通过`
调用控件方法
通过JavaScript调用控件的`SelectComm`方法选择串口，`InitCom`方法打开串口，并设置参数：
```javascript
function selcomport() {
var comNo = tcom.SelectComm(); // 获取串口列表
if (comNo > 0) {
tcom.InitCom(comNo, 9600, 8, 1); // 设置参数为9600波特率等
tcom.onDataIn = function(dat) {
document.getElementById('dataIn').value += dat;
};
tcom.Open(); // 打开串口
} else {
alert("打开端口失败!");
}
}
```
注意事项
安全性：
浏览器直接访问串口可能引发安全风险，建议通过HTTPS协议传输数据，并限制权限。
兼容性：
Web Serial API目前仅在部分浏览器（如最新版Chrome、Firefox）中支持，需考虑用户设备兼容性。
替代方案：
对于复杂场景，可结合服务器端中间件（如Node.js）处理串口数据，通过WebSocket或HTTP协议与前端通信。
通过以上方法，可根据项目需求选择合适的技术栈实现浏览器串口控制。
