h5 webAPI串口通信

125 阅读1分钟
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <body>    <button onclick="sendMsg()">发送</button>    <!-- <button onclick="getMsg()">获取</button> -->    <button onclick="serial()">启动串口调试</button>    <script type="text/javascript">      let writer = null,        getData = [],        timeOut      let reader = null      async function sendMsg() {        const data = new Uint8Array(toUint8Arr('test1234'))        await writer.write(data)      }      async function getMsg() {        // 监听来自串口的数据        while (true) {          console.log(reader)          const { value, done } = await reader.read()          if (done) {            // 允许稍后关闭串口            reader.releaseLock()            break          }          // value 是一个 Uint8Array          console.log(value)        }      }      async function serial() {        // 浏览器支持serial        console.log(navigator)        if ('serial' in navigator) {          console.log('当前浏览器支持serial')          // 提示用户选择一个串口          const port = await navigator.serial.requestPort()          // 获取用户之前授予网站访问权限的所有串口.          // const ports = await navigator.serial.getPorts();          //打开串口          await port.open({ baudRate: 115200 })          reader = port.readable.getReader()          writer = port.writable.getWriter()          try {            while (true) {              console.log('while')              const { value, done } = await reader.read()              console.log('read')              if (done) {                reader.releaseLock()                break              }              let arr = Array.from(value)              getData.push(...arr)              if (timeOut) clearTimeout(timeOut) //不知道为什么返回数据会分批,所以做了防抖              timeOut = setTimeout(() => {                console.log(Uint8ArrayToString(new Uint8Array(getData)), 'getData')                getData = []                timeOut = null              }, 200)            }          } catch (error) {            console.error(error)          } finally {            reader.releaseLock()            console.log('允许稍后关闭串口。')            await port.close()          }        } else {          console.log('不支持')        }      }      //stringuint8array      function toUint8Arr(str) {        const buffer = []        for (let i of str) {          const _code = i.charCodeAt(0)          if (_code < 0x80) {            buffer.push(_code)          } else if (_code < 0x800) {            buffer.push(0xc0 + (_code >> 6))            buffer.push(0x80 + (_code & 0x3f))          } else if (_code < 0x10000) {            buffer.push(0xe0 + (_code >> 12))            buffer.push(0x80 + ((_code >> 6) & 0x3f))            buffer.push(0x80 + (_code & 0x3f))          }        }        return Uint8Array.from(buffer)      }      //uint8arrayString      function Uint8ArrayToString(serialData) {        var out, i, len, c        var char2, char3        out = ''        len = serialData.length        i = 0        while (i < len) {          c = serialData[i++]          switch (c >> 4) {            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) << 6) | (char2 & 0x3f))              break            case 14:              // 1110 xxxx  10xx xxxx  10xx xxxx              char2 = serialData[i++]              char3 = serialData[i++]              out += String.fromCharCode(((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0))              break          }        }        return out      }    </script>  </body></html>

developer.mozilla.org/en-US/docs/…

serialport.io/docs/guide-…

js读取串口数据的方法

以下内容为赋值百度问答, 非原创, 仅作为个人笔记 :

node 实现操作串口的模块是一个 serialport 的模块,网上一搜有很多好文,此处记录一下实现过程中遇到的一些问题以及解决方法。

一开始被忽略的问题 ,我把 node 服务搭在自己的服务器上,后来返回的串口数组全是一堆令我懵逼的数据。后来想起那是 node 读取了我的
Linux 服务器的串口,而不是用户使用的 pc。

由此引出的两个问题。第一,node 服务必须搭建在用户使用的 pc 上,因此用户使用的电脑必须有 node 环境。第二,用户 pc 一般是 windows 系统, node 的模块很多在 Linux 上很容易安装成功,在 Windows 上安装比较困难。

首先解决的是第二个问题:在Windows上安装serialport失败
解决方法: npm install --global --production windows-build-tools
参考链接1: stackoverflow.com/questions/3…
参考链接2: github.com/nodejs/node…

安装好之后就可以安装 serialport 模块了。

解决第一个问题:用户电脑的 node 环境
解决方法: electron ——使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 (官网链接: electronjs.org/ )(w3c: www.w3cschool.cn/electronman…
使用 electron 搭建的桌面应用可以像平常我们使用的 exe 应用程序一样直接运行,不需要搭建环境。

npm install -g electron-prebuilt //提示electron-prebuilt已经更名为electron
npm install -g electron //安装失败
使用淘宝镜像安装问题解决: cnpm install -g electron
参考链接: blog.csdn.net/upc\_xbt/ar…

解决方法: npm install -g electron-rebuild
以后每次重新运行 electron . 的时候再执行一次 ``./node_modules/.bin/electron-rebuild` 对原生模块进行rebuild
参考链接: www.w3cschool.cn/electronman…

参考链接: m.blog.csdn.net/u014563989/…
cnpm install -g electron-packager //安装打包工具
electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules

因为打包的时候执行的命令带有 --ignore=node_modules , 即不将 node_modules 里面的依赖包打包,所以在打包后的新文件中,进入resource 目录会发现 node_modules 是一个空文件夹,所以自然找不到依赖包。如果去掉打包时的命令参数 --ignore=node_modules ,则需要非常长的打包时间。我的解决方法是将原来 node_modules 文件夹中的相关的依赖包文件复制进打包后的 node_modules 中,虽然是一个比较无脑的方法,每次打包都要拖动相关文件进去,不过我备份了一个 node_modules 文件夹,下一次打包后就把备份的 node_modules 直接复制进去。

node 模块 ccap : 用于生成验证码图片,可以在 express 后台
res.send(图片) ,前端的 img 的 src设置为请求这个接口。
ccap的用法可以参考链接: cnodejs.org/topic/50f90…