基于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