基于WebSocket服务实现Web应用访问本地串口设备

钱鑫博

摘要：浏览器里的Web应用和计算机的串口硬件进行通信时，需要针对不同的浏览器开发不同的插件。采用HTML5内置的WebSocket技术和QT开发框架，通过WebSocket协议连接本地服务，并通过本地服务绑定串口完成全双工通信的方案，实现了跨浏览器的Web应用与客户端计算机串口通信的技术，解决了为不同浏览器产品及版本开发多种插件的问题。经过测试验证，达到了预期目标。

关键词：WebSocket；HTML5技术；串口通信

中图分类号：TP393文献标志码：A文章编号：1008-1739（2020）14-62-4

0引言

随着互联网的不断发展，软件趋向于网络化，很多计算机上的应用都做成了B/S架构，客户端打开浏览器就可以进行访问。但是出于安全考虑，浏览器与操作系统进行了隔离，浏览器不允许Web应用直接访问客户端的硬件，访问硬件就只能开发插件。每种浏览器各自的API不兼容，Chrome浏览器用NPAPI来执行一个本地程序获取硬件，Firefox浏览器使用JS-Ctypes技术实现插件，然后调用C++代码等来获取本地硬件。浏览器迭代速度快、接口变化大，开发插件时常遇到浏览器更新导致不能用，客户体验非常差，而且每次都开发对应版本的插件费时费力。WebSocket是HTML5规范中的一个部分，借鉴了Socket思想，为了Web应用程序和服务端全双工通信而专门制定的一种新的应用层协议。

1 WebSocket协议及帧结构

WebSocket Protocol是HTML5中一种新的协议，实现了浏览器与服务器全双工通信（full-duplex）。在这之前都是客户端主动请求服务端，请求一次应答一次，很多时候实现消息更新都是采用Ajax轮询，有延迟。有了WebSocket，双方都可以主动发给对端，实现真正的推送。WebSocket连接创建后，客户端和服务端进行数据交换時，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2～10 Byte（取决于数据包长度），客户端到服务端需要加上额外的4 Byte掩码。而HTTP协议每次通信都需要携带完整的头部[1]。RFC文档给出的WebSocket协议格式，如图1所示。

WebSocket协议报文是分帧传输，FIN：1 bit，代表是否是尾帧，如果为1，即为最后片段；RSV1，RSV2，RSV3：每个占1 bit，为扩展保留的，若建立连接时使用了扩展，那么这些位的含义应自定义好；opcode：4 bit，定义负载数据（payload data）的类型，如表1所示。

WebSocket有控制帧和数据帧2种，opcode最高位为1的都是控制帧，opcode最高位为0的都是数据帧。应用级的数据传输帧，有文本帧和二进制帧2种。协议级别的控制报文帧，有关闭帧、ping帧和pong帧3种。关闭帧：opcode 0x8，连接任一端想关闭WebSocket，就发一个关闭帧给对端，对端收到该帧，若之前没有发过关闭帧，则必须回复一个关闭帧。ping帧和pong帧：用来心跳检测和判断对端是否还连接，连接建立后任一端都可以发送ping帧，收到ping的一端必须回复pong帧。

masked：1 bit，表示是否进行掩码处理，客户端发送给服务端时为1，服务端发送给客户端时为0。根据WebSocket的定义，客户端发送数据需要进行掩码处理，接收数据无需反掩码操作，服务端发送数据无需进行掩码处理，接收数据需要反掩码操作。

payload length：7 bit，如果第2个字节的后面7 bit的十进制值≤125，则直接用7 bit表示数据长度；如果该值为126，表示数据长度是126～65 535，这时要用3～4 Byte，每个字节8 bit，即16 bit来表示数据长度；如果该值为127，则说明数据长度已经>65 535，16 bit也已经不足以表示数据长度了，这时就用3～10 Byte，即64 bit来表示数据长度。

masking key：当masked为1的时候才存在，用于对需要的数据进行解密。

payload data：负载数据，就是要传输的数据。如果masked为1，该数据会被加密，要通过与masking key的值进行异或运算解密才能获取真正的负载数据。负载数据=扩展数据+应用数据。扩展数据包含在总负载数据长度中，其实就是自定义一个协议，如果有扩展数据，扩展数据就加在应用数据前面，并且要协商好扩展数据长度如何计算。应用数据是指扩展数据之后帧的剩余部分。

2方案设计

2.1本地服务的结构

本地服务主要实现WebSocket的服务端的串口控制和数据转发。WebSocket服务端用来处理客户端的浏览器Web应用连接，串口控制用来操作计算机的串口设备，本地服务内部转接双方的数据实现数据转发传输[2]，本地服务结构如图2所示。