为H5浏览器添加串口操作能力_html5串口界面

概述

 在浏览器操作串口方式有多种，其中最为简单的方法是使用IE浏览器，然后使用ActiveX控件(mscomm.ocx)来进行串口操作；对于Chrome以及FireFox，可以NPAPI来进行串口操作。本文章，展示一种支持所有H5浏览器的思路——websocket实现。
 接下来简单展示其实现思路。

需求

表1.需求列表

概要设计

概念架构

图1. 概念架构

 如上图所示，实现H5监听串口的方法便是在本地运行一个支持websocket的HTTP服务，通过该服务对串口进行访问。

关键流程

• 发送数据

图2. 数据发送流程

• 接收数据

图2. 数据接收流程

接口设计

串口枚举

请求数据：

{"type":"enum"}
1

JSON返回：

["COM1","COM2"]
1

打开串口

请求数据：

{"type":"open","serial_name":"COM1"}
1

JSON返回：

{"success": true, "message":"打开串口成功"}
1

 打开串口成功后，在服务端会存储串口与当前websocket连接会话的对应关系，在后续操作中，都会使用该对应关系来确认数据来源/去向。

写入数据

 写入数据采用16进制字符串进行编码。
请求数据：

{"type":"send","data":"010203040506070809"}
1

JSON返回：

{"type":"send","success": true, "message":"写入数据成功"}
1

监听数据回调

 当串口返回数据时，通过websocket向浏览器页面推送数据，数据内容用16进制字符串进行编码。
JSON数据：

{"type":"data", "data":"010203040506070809"}
1

关闭串口

请求数据：

{"type":"close"}
1

JSON返回：

{"success": true, "message":"关闭串口成功"}
1

 串口关闭后，服务端的会话与串口的对应关系将被解除，同时服务端会关闭串口。

详细设计

略

实现

基于boost的服务器实现

开源中国
Github

GO语言实现 - 待完成

Python实现-待完成