注意的点
-
需要手动配对,点个点击配对,浏览器配对后,以后就不用配对了,下面是配好对的显示
-
配对后需要开启串口,刷新后,串口需要重新开启
-
打包发布后 Navigator.serial = undefined
由于安全限制,需要https环境
或者生产环境的话没办法,本地环境可以设置浏览器的安全选项,忽略某个本地地址的安全校验
vue实现
- 手动点击需要配对的串口
- 该页面的时候,循环连接串口,并打开
vue
<el-button @click="setPort">第一次授权端口</el-button>
<el-button @click="getPort1">连接端口</el-button>
js
mounted() {
this.getPort1();
},
methods: {
async setPort() {
const port = await navigator.serial.requestPort();
},
async getPort1() {
const ports = await navigator.serial.getPorts();
let _this = this;
ports.forEach((e) => {
_this.getPort(e);
});
},
async getPort(port) {
console.log(port);
/* const ports = await navigator.serial.getPorts();
const port = ports[1];
*/
await port.open({ baudRate: 9600 });
while (port.readable) {
const reader = port.readable.getReader();
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
// 允许稍后关闭串口。
reader.releaseLock();
break;
}
if (value) {
let val = "";
value.forEach((e) => {
val += String.fromCharCode(e);
});
console.log('收到的数据:'+val);
}
}
} catch (error) {
// TODO: 处理非致命的读错误。
}
}
},
},