electron&node-serialport&ais-json制作可从串口读取ais数据然后解码的桌面应用

1,189 阅读6分钟

前言

我是菜鸡糖粉椰蓉糯米糍 啊 好想升到Lv2。那什么因为公司最近的项目是做海事方面的,然后搞了台AIS设备。我的经理直接就让我弄????? 我怎么弄 我只是一个一年经验弱小无助可怜的前端/(ㄒoㄒ)/~~ 。 但是作为一个合格的社畜拿人钱财替人消灾准备写完以后提涨工资的,也确实涨了,但是没涨多少泪目了。

过程

首先这玩意是AIS设备,大致找了一下想着如果没有就拒绝的,但是我找到个ais-json。一时间不知道该哭还是该开心。 官方提供了个例子AIS解码其实很简单

const ais = require('ais-json'import ais from 'ais-json'
let aisinfo = ais('!AIVDM,1,1,,A,15Cgah00008LOnt>1Cf`s6NT00SU,0*3D')

就是提供了个ais()方法给你直接输进去就好,啊 简洁明了 我爱了。顺便贴下链接

github.com/YunYouJun/a…

当我以为这个工作如此简单的时候,经理告诉我需要我从一个串口读取AIS设备里面的数据,爷直接懵了。爪贼?你要爪贼?还好ais-json文档下也提供了一个小思路 node-serialport

image.png

当我看到含有语言有c++的时候,我感觉情况可能有点不妙,但是没想太多直接进入官网然后复制例子来用

const SerialPort = require('serialport')
const port = new SerialPort('/dev/tty-usbserial1', {
//'/dev/tty-usbserial1'是指串口地址一般来说就是COM+数字 在设备管理器端口里查看你的串口号
baudRate: 57600
})

直接复制的结构就是报错,然后我在网上进行搜索为什么会出错,直到看到有人说web端无法直接控制本地硬件获取数据,基本上有个这样的结构顺序

串口数据 <-> node服务端 <-> web客户端

心塞如我,然后就是漫无目的的找方法解决这个问题 无意间看到个帖子,大致意思就是用electron-vue来把代码套壳变成一个桌面级应用程序,然后把node-serialprot反编译进去就可以使用了,并且有相应的教程。大喜过望,立刻动手尝试了起来,中间遇到了很多其他小问题,我就把我遇到的问题写出来给大家排坑。

动手

1.打开你的cmd注意 要用管理员模式打开!!!要用管理员模式打开!!!要用管理员模式打开!!!安装vue-cli

npm install -g vue-cli

2.electron提供了官方基于vue的项目 ,直接创建项目

cd进你的demo盘
vue init simulatedgreg/electron-vue electron-vue-ais

3.cd至项目目录下

cd 你的项目名字

4.安装node_modules

npm install
或
cnpm install 
注意!!用cnpm可能有无法打包的概率问题我后续就一直没打包

安装完成后,npm run dev 正常是可以打开一个桌面程序

5.安装node-gyp

npm install -g node-gyp
注意!!用cnpm可能有无法打包的概率问题我后续就一直没打包

6.安装python2.7&vc2015,可以直接下载软件安装,也可以使用命令行安装

注意!!用cnpm可能有无法打包的概率问题我后续就一直没打包
这边有个大坑 很可能让你没安装成功
npm install --global --production windows-build-tools
npm config set python python2.7 
npm config set msvs_version 2015

这边在 # npm install --global --production windows-build-tools的时候经常会卡在Successfully installed Python 2.7不动 或者没安装成 网上能找到的提供的方案 ①下载python2.7,并配置环境变量 ②执行npm install --global --production --verbose windows-build-toolsnpm install --global --dev --verbose windows-build-tools 但实际上是用了也没反应 但是不是毫无进展 打开你的.windows-build-tools文件夹 会发现多了点东西 一般来说多的应该是vs_BuildTools 正常来说这个也可以点进去生成工具 然后用这个命令

npm install --global --production windows-build-tools@4.0.0 如果失败了就搜索.net framework安装最新的 然后再执行 这次你应该又会多点东西

image.png

实际上到这步应该就是成功了 但是这个东西吧 有点小问题 他可能不会自己结束 这随缘看脸 如果你卡住了 那就试试看这个

①执行npm命令npm install --global --production windows-build-tools@4.0.0

②当命令行界面不动时,打开任务管理器,把Build Tools结束任务。

③再打开.windows-build-tools文件夹中的build-tools-log.txt,添加Variable: IsInstalled = 1,保存,关闭。

大致意思就是 你卡住了以后 你把这个任务结束 然后打开任务日志 强行告诉他已经完成了 你可以歇歇了

7.测试gyp

node-gyp

成功显示

PS E:\exe\electron-vue> node-gyp

  Usage: node-gyp <command> [options]

  where <command> is one of:
    - build - Invokes `msbuild` and builds the module
    - clean - Removes any generated build files and the "out" dir
    - configure - Generates MSVC project files for the current module
    - rebuild - Runs "clean", "configure" and "build" all at once
    - install - Install node development files for the specified node version.
    - list - Prints a listing of the currently installed node development files
    - remove - Removes the node development files for the specified version

node-gyp@8.1.0  C:\Users\zhupengfei\AppData\Roaming\npm\node_modules\node-gyp
node@16.4.1

8.安装serialport

npm install serialport

9.安装electron-rebuild 用于重新编译c++原生模块

npm install --save-dev electron-rebuild

10.对serialport进行重编译

.\node_modules.bin\electron-rebuild.cmd 

编译出错可以手动编译,cd至./node_modules/@serialport/bindings

node-gyp rebuild --target=2.0.4 --arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell

然后再npm run dev 一般来说 控制台会报一个错 那个错是什么来着 我忘了 你可以搜索一下 在一个js文件里改下注释就好 并不影响使用

然后就可以正常使用了如果还想用ais解析数据的话 你可以用虚拟串口和调试工具 进行操作 我先上代码

serialPort() {
        var a = []
        const SerialPort = require('serialport')
        const Readline = require('@serialport/parser-readline')
        const port = new SerialPort('COM5', {
        //这是你的串口号
          baudRate: 38400
          //这个东西要跟你的串口一致不要乱改
        })
        const parser = port.pipe(new Readline());
        parser.on('data', function (data) {
          a.push(data)
        })
        //这边简单理解一下就是解析你的串口然后获得数据
        this.ais = a
      },

以上就是基本流程

然后其实串口调试工具我推荐使用微软商店里面的一款串口调试助手不管是界面还是别的都远胜于网上找的调试工具

然后虚拟串口的话 我用的是Configure Virtual Serial Port Driver 非常方便 不必硬要找汉化版的 就两三个单词 有个6.9版的好像界面有问题尽量用7.2的吧

我不知道掘金能不能发分享链接 就先不分享了 指路一下

完结 ★,°:.☆( ̄▽ ̄)/$:.°★

残念我想升Lv2