基于websocket的适配多种浏览器的插件开发方法

严伟苗 诸葛杨杨 刘瑞 邹翔

摘要：针对当前各类浏览器插件不兼容问题，本文提出了一种基于websocket的适配多种浏览器的插件开发方法。

关键词：浏览器;websocket;插件;连接

中图分类号：TP311.1 文献标识码：A 文章编号：1007-9416（2020）02-0108-01

0 引言

浏览器插件是当前应用范围较为广泛的技术之一，如常见的adobe flash player，可用来在网页中嵌入并播放视频，再有各大银行门户网站中常见的安全网银控件等等[1]。目前主流浏览器插件技术主要包括Microsoft的ActiveX插件技术、Mozilla的NPAPI插件技术以及Google的PPAPI插件技术，而国内互联网公司推出的一些浏览器基本上采用了以上几个国外厂家的浏览器内核，所以在插件技术上并没有突破创新。

当软件系统采用基于B/S架构模式进行开发，原本适配C/S架构模式的插件工具，如人脸采集仪、指纹采集仪等通常无法直接集成于网页端，而这些设备的开发商往往仅提供一个简单的开发工具包，开发人员必须根据不同浏览器各自指定的插件技术开发规范开发不同版本的插件实现兼容适配，不仅需要开发三种以上不同技术版本的插件代码，同时也不可避免地存在重复工作，无形之中增加了程序出错的概率。目前尚没有一种插件技术能够同时兼容多种浏览器，并实现无缝对接使用，而不同浏览器厂商出于安全考虑对各类插件的使用权限也做了不同程度的限制，导致应用系统在调用插件的时出现调用失败、页面无反应甚至直接被禁用等情况。

WebSocket同http一样，都是基于TCP的可靠性传输协议[2]，且都工作在应用层中，但webSocket仅需完成一次握手便可建立持久连接，并可进行双向数据传输，且可以主动向浏览器等客户端发送数据，数据当中也不必再带有head的部分信息了。与http的长链接通信相比，不仅降低了系统压力，而且也减少了部分多余的信息，节省了带宽。本文提出了一种基于websocket协议的、可适配多种浏览器的插件开发方法。该方法依托websocket协议建立浏览器与插件之间的可靠持久性连接，以此支持浏览器调用插件开放的各服务功能接口，大大减轻了技术人员的开发、调试及维护工作量，有效规避了因浏览器版本差异等问题导致的插件服务调用失败、页面无反应甚至直接被禁用等情况，较好满足了用户及系统使用需求[3]。

1 插件设计

为实时监听并响应来自浏览器的接口调用请求，插件应作为websocket的服务端，实际生产环境中还应注册为操作系统的开机启动服务，同时允许本地防火墙允许开放websocket服务端监听端口。当作为客户端的浏览器开启并访问特定应用网站时，若某个页面集成了如人脸采集仪、指纹采集仪的相关功能，当用户需要使用这些功能时，浏览器便会按照相关流程完成功能接口调用。

websocket连接必须由浏览器发起，因为初始请求为一个标准的http请求，格式如图1所示。

图1所示请求和普通的http请求有几点不同：（1）该请求为GET方式的请求，请求地址以ws：//开头;（2）请求头中Upgrade和Connection表示该连接将要被转为WebSocket连接;（3）Sec-WebSocket-Key用于标识这个连接;（4）Sec-WebSocket-Version指定了WebSocket的协议版本。

当插件服务成功接受该请求后，会返回如图2所示的响应内容，其中响应代码101表示本次连接的http协议即将被更改，更改后的协议就是websocket协议，版本号和子协议规定了双方能理解的数据格式，以及是否支持压缩等。

当浏览器和插件成功建立websocket连接后，浏览器和插件之间就可以随时主动发送消息给对方了。插件封装的服务接口视具体需要的操纵本地设备而定，通常设备厂家会提供该设备在不同操作系统下的功能开发库，以供开发者根据业务需求来定制自己的插件功能。

2 插件测试

为验证基于websocket的适配多种浏览器的插件开发方法在实际应用中的可行性，本文开发了一套测试系统，该测试系统主要由浙江中正智能科技有限公司开发的MR-210台式身份证阅读机具、基于该阅读机具的非接触式Type-A卡读写功能库开发的插件服务程序以及一个简单的浏览器网页应用程序（部署在tomcat上）组成。

测试时需要先启动插件服务程序，启动成功后会提示“开启websocket插件服务，等待连接…”，然后在浏览器中输入应用程序网址（http：//localhost：8080/websocket_client.html），并在弹出的网页服务插件地址栏中输入服务连接地址（ws：//127.0.0.1：3000），连接成功后，下方响应详细框中会提示“连接成功”。为方便测试，本文定义在请求输入框中输入“0”表示读卡，输入“1|JSON格式卡片数据”表示写卡。

当浏览器端请求数据为0时，若请求成功，插件服务程序会提示“收到来自客户端的读卡请求”，然后读取卡片数据并將数据返回给浏览器端。当浏览器端请求数据为“1|{“userName”：“张三”，“zoneName”：“宋都凯旋苑”，“buildingNum”：“01”，“unitNum”：“01”，“floorNum”：“10”，“roomNum”：“1002”，“beginTime”：1577426791，“endTime”：1609049191，“rollingCode”： 0， “cardType”： 11}”时，若请求成功，服务端会提示“收到来自客户端的写卡请求”，然后将待写入数据写入卡片中，并将写卡结果返回给浏览器。从二次读卡结果看，卡内数据已被成功覆写。

3 结语

为适配多种浏览器，降低开发维护成本，本文提出了websocket的插件开发方法，该方法可不再遵循各个浏览器的插件开发规约，只需定义服务端与浏览器端的接口规范，在满足用户需求的同时大大简化了开发流程。

参考文献

[1] 汪诗林，吴泉源.WWW浏览器插件开发技术[J].计算机应用研究，2000（4）：55-57.

[2] 湖北省数字证书认证管理中心有限公司.一种基于http的web插件调用方法及系统：CN201611216467.5[P].2017-05-31.

[3] Coward D. Java WebSocket Programming[M]. New York： McGraw-Hill，2014.

Websocket-based Plug-in Development Method Adapted to Multiple Browsers

YAN Wei-miao， ZHUGE Yang-yang， LIU Rui， ZOU Xiang

（Hangzhou Yihe Network Co.， Ltd.， Hangzhou  Zhejiang  310012）

Abstract：In view of the incompatibility of various browser plug-ins， this paper proposes a web socket based plug-in development method which adapts to multiple browsers.

Key words：browser; websocket; plug-in; connection