| 记一次web端读取串口数据（扫码枪） | 您所在的位置：网站首页 › 地磅怎样使用方法 › 记一次web端读取串口数据（扫码枪） |
记一次web端读取串口数据（扫码枪）
|
原因
说到要写这串口内容的博客原因，当然是有需求开发才会去接触这一方面的内容。 需求系统上需要使用到条形码扫描枪，根据已获得的条形码，通过扫描枪获取条形码的内容，再进而触发下一个功能逻辑。 方案遇到问题，肯定是先百度（毕竟这一方面的功能开发我是头一次），所以兜兜转转…最终确定使用Web Serial API Web Serial API为网站提供了一种使用JavaScript对串行设备进行读写的方法。串行设备可以通过用户系统上的串行端口连接，也可以通过模拟串行端口的可移动USB和蓝牙设备连接。 这里是我找到的参考文档： 链接1 链接2 确定好要使用哪一个方案后，就要写例子来验证一下这个API是否可行。 步骤说明要验证API，我这里先写了一个HTML文件做简单实现。 test2.html DOCTYPE html> 串口调试 启动串口调试 hamon async function serial(){ // 浏览器支持serial if ('serial' in navigator) { console.log('当前浏览器支持serial') const port = await navigator.serial.requestPort() await port.open({ baudRate: 9600}) console.log("port的内容是：", port); const reader = port.readable.getReader(); try{ while(true){ const {value,done} = await reader.read(); if (done) { reader.releaseLock(); break; } console.log("测试value的内容是", value); } }catch (error) { console.error(error) }finally { reader.releaseLock(); console.log('允许稍后关闭串口。'); await readableStreamClosed.catch(() => { /* Ignore the error */ }); await port.close(); } } }测试代码写完了，那要创造什么环境进行验证呢？ 因为我们当时还没有拿到设备，所以说先是本地虚拟出串口进行测试。 创建一对虚拟串口：
串口是一个双向通信接口，允许字节发送和接收数据。上述的COM1和COM2就相当于传输线的两端。 有了串口，就要构建一发一收，web端当然是用来接收数据的，还有一端用来发数据。 这里我们使用串口调试助手，这个工具是在微软store里面直接下载的（免费的）。
SerialPort对象的readable和writable属性返回一个ReadableStream和一个WritableStream。这些将用于从串行设备接收数据并将数据发送到串行设备。两者都使用Uint8Array实例进行数据传输。 所以我们还需要将传过来的Uint8Array数组进行转换。 在test2.html中加上一个方法： function Uint8ArrayToString(serialData){ var out, i, len, c; var char2, char3; out = ""; len = serialData.length; i = 0; while(i case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: // 0xxxxxxx out += String.fromCharCode(c); break; case 12: case 13: // 110x xxxx 10xx xxxx char2 = serialData[i++]; out += String.fromCharCode(((c & 0x1F) |
打开串口调试助手，连接虚拟串口的另一端
回到web项目这里，运行test2.html文件
根据弹出窗口显示，浏览器可以获取到我们虚拟出来的两个串口，然后我们浏览器连接COM1，串口调试助手连接COM2，并发送一串数据：
点击发送后，回到浏览器端，F12打开调试窗口： 
可以看到接收到COM2传过来的值，但是不是我们想要的效果，这是因为:【本文地址】