业务背景
最近接到一个需求,在微信公众号界面设计一个独立界面,界面上有 A 电机进、A 电机退、B 电机进、B 电机退 4 个按钮,点击对应按钮,云平台发送不同的代码给电机本地的控制器,控制电机执行不同的动作,电机本地控制器具备GPRS网络功能。服务器与电机本地控制器(客户端)采用 TCP 协议连接,客户端发送心跳包给服务器保持长连接,客户端每次收到服务器下发的代码指令后作出回复主要的实现原理是前端访问后台的接口传输数据。后台采用用socket与GPRS模块进链接,暴露出一个IP+PORT给GPRS进行访问即可,实现逻辑比较简单。但是在开发中出现一下比较棘手问题,下面进行一一归纳。
技术栈
主要采用的技术栈前端部分采用vue和weUI,后台采用node的koa框架,前端页面是直接写在koa里面,由于页面比较简单,所以没有实现前后的分离。
实现过程
1、前端部分

前端部分实现主要是提供4个按钮,向后台接口请求对应的数据,例如:点击A点击前进,就向后台请求http://XXXX:4000/djxt/move接口并传输数据,可以下载完整项目运行后,通过127.0.0.1:3002/djxt进行访问,页面html代码主要部分如下:
<div class="wrap">
<button @click="goA('A1')" class="weui-btn" v-bind:class="{ 'weui-btn_loading': btnStatus.cur == 'A1'&&btnStatus.status==0, 'weui-btn_primary': btnStatus.cur == 'A1'&&btnStatus.status==1, 'weui-btn_plain-primary': btnStatus.cur != 'A1' }">A 前进<i v-show="btnStatus.cur == 'A1'&&btnStatus.status==0" class="weui-loading"></i></button> <button @click="backA('A0')" class="weui-btn" v-bind:class="{ 'weui-btn_loading': btnStatus.cur == 'A0'&&btnStatus.status==0, 'weui-btn_primary': btnStatus.cur == 'A0'&&btnStatus.status==1, 'weui-btn_plain-default': btnStatus.cur != 'A0' }">A 后退<i v-show="btnStatus.cur == 'A0'&&btnStatus.status==0" class="weui-loading"></i></button>
<button @click="goB('B1')" class="weui-btn" v-bind:class="{ 'weui-btn_loading': btnStatus.cur == 'B1'&&btnStatus.status==0, 'weui-btn_primary': btnStatus.cur == 'B1'&&btnStatus.status==1, 'weui-btn_plain-primary': btnStatus.cur != 'B1' }">B 前进<i v-show="btnStatus.cur == 'B1'&&btnStatus.status==0" class="weui-loading"></i></button>
<button @click="backB('B0')" class="weui-btn" v-bind:class="{ 'weui-btn_loading': btnStatus.cur == 'B0'&&btnStatus.status==0, 'weui-btn_primary': btnStatus.cur == 'B0'&&btnStatus.status==1, 'weui-btn_plain-default': btnStatus.cur != 'B0' }">B 后退<i v-show="btnStatus.cur == 'B0'&&btnStatus.status==0" class="weui-loading"></i></button>









