2024年5月11日发(作者：)

第38卷 第2期

数字技术与应用

第 38 卷 数字技术与应用

2020年 2月

Digital Technology &Application

Vol.38 No.2

February 2020

设计开发

DOI:10.19695/12-1369.2020.02.59

基于websocket的

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

严伟苗 诸葛杨杨 刘瑞 邹翔

(杭州易和网络有限公司,浙江杭州 310012)

摘要:针对当前各类浏览器插件不兼容问题,本文提出了一种基于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和Con-

nection表示该连接将要被转为WebSocket连接;(3)Sec-

WebSocket-Key用于标识这个连接;(4)Sec-WebSocket-Version指

定了WebSocket的协议版本。

当插件服务成功接受该请求后,会返回如图2所示的响应内容,

其中响应代码101表示本次连接的http协议即将被更改,更改后的协

议就是websocket协议,版本号和子协议规定了双方能理解的数据格

式,以及是否支持压缩等。

当浏览器和插件成功建立websocket连接后,浏览器和插件之间

就可以随时主动发送消息给对方了。插件封装的服务接口视具体需要

的操纵本地设备而定,通常设备厂家会提供该设备在不同操作系统

下的功能开发库,以供开发者根据业务需求来定制自己的插件功能。

2 插件测试

图1 WebSocket连接请求格式

为验证基于websocket的适配多种浏览器的插件开发方法在实

际应用中的可行性,本文开发了一套测试系统,该测试系统主要由

浙江中正智能科技有限公司开发的MR-210台式身份证阅读机具、

基于该阅读机具的非接触式Type-A卡读写功能库开发的插件服务

程序以及一个简单的浏览器网页应用程序(部署在tomcat上)组成。

图2 插件服务响应内容

收稿日期:2019-12-30

作者简介:严伟苗(1985—),男,浙江绍兴人,博士研究生,工程师,研究方向:物联网技术研究应用。

······下转第110页

108

Copyright©博看网 . All Rights Reserved.

第 38 卷 数字技术与应用

(1)考勤:在微信端手动开启签到和签退流程,可设置只有一次

签到;(2)方式:采用二维码跳转感应或直接感应签到;(3)课堂风采:

学员可以在手机端发表这堂课的精彩瞬间,以图片加描述形式;(4)

签退的方式:以2道调查题目打分,提交自动发起签退流程。

后,效果很好。区级管理部门能通过系统了解到,哪些工作室开展了

活动,并能了解到这些活动的反馈情况。工作室主持人通过手机微信

就可以快速发布课程,课程会自动发信息给成员,主持人还可以继续

提醒成员参加。课程的签到,成员在微信服务号中,点“签到”即可,非

常方便。工作室主持人和成员在系统中的操作都非常简洁。系统运行

中,工作室主持人需要随身携带蓝牙设备,主持人有可能忘记带设

备,需要主持人在微信中手动给参加成员设置签到。

系统的运行,离不开管理制度和及时的技术支持。制度上和继

续教育学时结合,保证了老师参加工作室活动的积极性。严格的考

勤制度,对参加活动的教师是一种认可和肯定。

参考文献

[1] 夏发优,张锦鹏,徐自立,等.iBeacon和指纹数据的现场考勤系统

[J].福建电脑,2019,35(06):90-92.

[2] 郭玲.基于iBeacon技术的微信“摇一摇”考勤系统的实现

[J].深圳职业技术学院学报,2016,15(01):19-23.

3.5 报表模块

(1)课程统计:课程名、开课时间、地点、报名人数、完成签到人

数、没完成签到人数和课程满意度折算分值;(2)工作室统计:工作室

名、开课数和参与学习人数等。

3.6 通知功能模块

(1)课程发布通知:课程发布后,通过微信自动发送课程信息给

本工作室成员,并统计成员阅读情况,对没有阅读的可一键式提醒;

(2)签到签退提醒:微信提醒成员签到和签退,统计完成操作的成员,

对没完成的微信提醒。

4 应用和展望

系统开发好后,经过培训并告知技术支持联络人,运行一段时间

The Design and Implementation of Management System of Famous Teachers' Studio

Based on Bluetooth Attendance Technology

XIA Cheng-bo

(Shenzhen Longgang District Teacher Training School, Shenzhen Guangdong 518172)

Abstract:The district-level famous teacher studio management system is used to manage the activities carried out by a number of famous teacher

studios in the district. Its purpose is to facilitate famous teachers to carry out activities and record the participation of studio members. Through the system,

the district-level managers can timely understand the work of the studios of the whole district. The system is developed in combination with the WeChat

service number and it can confirm the attendance of the studio members through bluetooth. This paper introduces the design idea, realization method and

module function of this management system so as to provides references for similar systems.

Key words:master studio; management system; bluetooth attendance; wechat service number

······上接第108页

测试时需要先启动插件服务程序,启动成功后会提示“开启

websocket插件服务,等待连接…”,然后在浏览器中输入应用程序网

址(localhost:8080/websocket_),并在弹出的网

页服务插件地址栏中输入服务连接地址(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

插件调用方法及系统:CN2.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

110

Copyright©博看网 . All Rights Reserved.