基于websocket的適配多種瀏覽器的插件開(kāi)發(fā)方法

嚴(yán)偉苗 諸葛楊楊 劉瑞 鄒翔

摘要：針對(duì)當(dāng)前各類瀏覽器插件不兼容問(wèn)題，本文提出了一種基于websocket的適配多種瀏覽器的插件開(kāi)發(fā)方法。

關(guān)鍵詞：瀏覽器;websocket;插件;連接

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2020）02-0108-01

0 引言

瀏覽器插件是當(dāng)前應(yīng)用范圍較為廣泛的技術(shù)之一，如常見(jiàn)的adobe flash player，可用來(lái)在網(wǎng)頁(yè)中嵌入并播放視頻，再有各大銀行門戶網(wǎng)站中常見(jiàn)的安全網(wǎng)銀控件等等[1]。目前主流瀏覽器插件技術(shù)主要包括Microsoft的ActiveX插件技術(shù)、Mozilla的NPAPI插件技術(shù)以及Google的PPAPI插件技術(shù)，而國(guó)內(nèi)互聯(lián)網(wǎng)公司推出的一些瀏覽器基本上采用了以上幾個(gè)國(guó)外廠家的瀏覽器內(nèi)核，所以在插件技術(shù)上并沒(méi)有突破創(chuàng)新。

當(dāng)軟件系統(tǒng)采用基于B/S架構(gòu)模式進(jìn)行開(kāi)發(fā)，原本適配C/S架構(gòu)模式的插件工具，如人臉采集儀、指紋采集儀等通常無(wú)法直接集成于網(wǎng)頁(yè)端，而這些設(shè)備的開(kāi)發(fā)商往往僅提供一個(gè)簡(jiǎn)單的開(kāi)發(fā)工具包，開(kāi)發(fā)人員必須根據(jù)不同瀏覽器各自指定的插件技術(shù)開(kāi)發(fā)規(guī)范開(kāi)發(fā)不同版本的插件實(shí)現(xiàn)兼容適配，不僅需要開(kāi)發(fā)三種以上不同技術(shù)版本的插件代碼，同時(shí)也不可避免地存在重復(fù)工作，無(wú)形之中增加了程序出錯(cuò)的概率。目前尚沒(méi)有一種插件技術(shù)能夠同時(shí)兼容多種瀏覽器，并實(shí)現(xiàn)無(wú)縫對(duì)接使用，而不同瀏覽器廠商出于安全考慮對(duì)各類插件的使用權(quán)限也做了不同程度的限制，導(dǎo)致應(yīng)用系統(tǒng)在調(diào)用插件的時(shí)出現(xiàn)調(diào)用失敗、頁(yè)面無(wú)反應(yīng)甚至直接被禁用等情況。

WebSocket同http一樣，都是基于TCP的可靠性傳輸協(xié)議[2]，且都工作在應(yīng)用層中，但webSocket僅需完成一次握手便可建立持久連接，并可進(jìn)行雙向數(shù)據(jù)傳輸，且可以主動(dòng)向?yàn)g覽器等客戶端發(fā)送數(shù)據(jù)，數(shù)據(jù)當(dāng)中也不必再帶有head的部分信息了。與http的長(zhǎng)鏈接通信相比，不僅降低了系統(tǒng)壓力，而且也減少了部分多余的信息，節(jié)省了帶寬。本文提出了一種基于websocket協(xié)議的、可適配多種瀏覽器的插件開(kāi)發(fā)方法。該方法依托websocket協(xié)議建立瀏覽器與插件之間的可靠持久性連接，以此支持瀏覽器調(diào)用插件開(kāi)放的各服務(wù)功能接口，大大減輕了技術(shù)人員的開(kāi)發(fā)、調(diào)試及維護(hù)工作量，有效規(guī)避了因?yàn)g覽器版本差異等問(wèn)題導(dǎo)致的插件服務(wù)調(diào)用失敗、頁(yè)面無(wú)反應(yīng)甚至直接被禁用等情況，較好滿足了用戶及系統(tǒng)使用需求[3]。

1 插件設(shè)計(jì)

為實(shí)時(shí)監(jiān)聽(tīng)并響應(yīng)來(lái)自瀏覽器的接口調(diào)用請(qǐng)求，插件應(yīng)作為websocket的服務(wù)端，實(shí)際生產(chǎn)環(huán)境中還應(yīng)注冊(cè)為操作系統(tǒng)的開(kāi)機(jī)啟動(dòng)服務(wù)，同時(shí)允許本地防火墻允許開(kāi)放websocket服務(wù)端監(jiān)聽(tīng)端口。當(dāng)作為客戶端的瀏覽器開(kāi)啟并訪問(wèn)特定應(yīng)用網(wǎng)站時(shí)，若某個(gè)頁(yè)面集成了如人臉采集儀、指紋采集儀的相關(guān)功能，當(dāng)用戶需要使用這些功能時(shí)，瀏覽器便會(huì)按照相關(guān)流程完成功能接口調(diào)用。

websocket連接必須由瀏覽器發(fā)起，因?yàn)槌跏颊?qǐng)求為一個(gè)標(biāo)準(zhǔn)的http請(qǐng)求，格式如圖1所示。

圖1所示請(qǐng)求和普通的http請(qǐng)求有幾點(diǎn)不同：（1）該請(qǐng)求為GET方式的請(qǐng)求，請(qǐng)求地址以ws：//開(kāi)頭;（2）請(qǐng)求頭中Upgrade和Connection表示該連接將要被轉(zhuǎn)為WebSocket連接;（3）Sec-WebSocket-Key用于標(biāo)識(shí)這個(gè)連接;（4）Sec-WebSocket-Version指定了WebSocket的協(xié)議版本。

當(dāng)插件服務(wù)成功接受該請(qǐng)求后，會(huì)返回如圖2所示的響應(yīng)內(nèi)容，其中響應(yīng)代碼101表示本次連接的http協(xié)議即將被更改，更改后的協(xié)議就是websocket協(xié)議，版本號(hào)和子協(xié)議規(guī)定了雙方能理解的數(shù)據(jù)格式，以及是否支持壓縮等。

當(dāng)瀏覽器和插件成功建立websocket連接后，瀏覽器和插件之間就可以隨時(shí)主動(dòng)發(fā)送消息給對(duì)方了。插件封裝的服務(wù)接口視具體需要的操縱本地設(shè)備而定，通常設(shè)備廠家會(huì)提供該設(shè)備在不同操作系統(tǒng)下的功能開(kāi)發(fā)庫(kù)，以供開(kāi)發(fā)者根據(jù)業(yè)務(wù)需求來(lái)定制自己的插件功能。

2 插件測(cè)試

為驗(yàn)證基于websocket的適配多種瀏覽器的插件開(kāi)發(fā)方法在實(shí)際應(yīng)用中的可行性，本文開(kāi)發(fā)了一套測(cè)試系統(tǒng)，該測(cè)試系統(tǒng)主要由浙江中正智能科技有限公司開(kāi)發(fā)的MR-210臺(tái)式身份證閱讀機(jī)具、基于該閱讀機(jī)具的非接觸式Type-A卡讀寫功能庫(kù)開(kāi)發(fā)的插件服務(wù)程序以及一個(gè)簡(jiǎn)單的瀏覽器網(wǎng)頁(yè)應(yīng)用程序（部署在tomcat上）組成。

測(cè)試時(shí)需要先啟動(dòng)插件服務(wù)程序，啟動(dòng)成功后會(huì)提示“開(kāi)啟websocket插件服務(wù)，等待連接…”，然后在瀏覽器中輸入應(yīng)用程序網(wǎng)址（http：//localhost：8080/websocket_client.html），并在彈出的網(wǎng)頁(yè)服務(wù)插件地址欄中輸入服務(wù)連接地址（ws：//127.0.0.1：3000），連接成功后，下方響應(yīng)詳細(xì)框中會(huì)提示“連接成功”。為方便測(cè)試，本文定義在請(qǐng)求輸入框中輸入“0”表示讀卡，輸入“1|JSON格式卡片數(shù)據(jù)”表示寫卡。

當(dāng)瀏覽器端請(qǐng)求數(shù)據(jù)為0時(shí)，若請(qǐng)求成功，插件服務(wù)程序會(huì)提示“收到來(lái)自客戶端的讀卡請(qǐng)求”，然后讀取卡片數(shù)據(jù)并將數(shù)據(jù)返回給瀏覽器端。當(dāng)瀏覽器端請(qǐng)求數(shù)據(jù)為“1|{“userName”：“張三”，“zoneName”：“宋都凱旋苑”，“buildingNum”：“01”，“unitNum”：“01”，“floorNum”：“10”，“roomNum”：“1002”，“beginTime”：1577426791，“endTime”：1609049191，“rollingCode”： 0， “cardType”： 11}”時(shí)，若請(qǐng)求成功，服務(wù)端會(huì)提示“收到來(lái)自客戶端的寫卡請(qǐng)求”，然后將待寫入數(shù)據(jù)寫入卡片中，并將寫卡結(jié)果返回給瀏覽器。從二次讀卡結(jié)果看，卡內(nèi)數(shù)據(jù)已被成功覆寫。

3 結(jié)語(yǔ)

為適配多種瀏覽器，降低開(kāi)發(fā)維護(hù)成本，本文提出了websocket的插件開(kāi)發(fā)方法，該方法可不再遵循各個(gè)瀏覽器的插件開(kāi)發(fā)規(guī)約，只需定義服務(wù)端與瀏覽器端的接口規(guī)范，在滿足用戶需求的同時(shí)大大簡(jiǎn)化了開(kāi)發(fā)流程。

參考文獻(xiàn)

[1] 汪詩(shī)林，吳泉源.WWW瀏覽器插件開(kāi)發(fā)技術(shù)[J].計(jì)算機(jī)應(yīng)用研究，2000（4）：55-57.

[2] 湖北省數(shù)字證書認(rèn)證管理中心有限公司.一種基于http的web插件調(diào)用方法及系統(tǒng)：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