Web端與Client客戶端資料互動方案選擇

weixin_33806914發表於2018-04-26

背景

CS架構中會在客戶端中嵌入web頁面,能大量提升開發效率和使用者體驗。AR客戶端開發語言為C#,其中的Web頁面執行在基於Chromium的瀏覽器中,當Cient端需要呼叫多個Web視窗,並且各個Web視窗間也有資料互動,這樣的情況下Cient端管理多個Web視窗、Web端與Cient端、Web與Web視窗間如何更好的進行資料互動就成為一個複雜的場景。基於專案實踐和以往的開發經驗做了這方面的總結歸納。

C#向Web端,目前已知的可實現方案如下:

  • 方案一:

C#調起Web頁面時,將資料引數加入到url中,Web端解析。這是在一般專案中簡單的業務場景下最優先選用的方案,傳參形式如下:http://10.10.10.10:80/index.html?pageId=3345688&name=62133&postType=1

  • 方案二

C#調起Web頁面後直接呼叫js暴露出的函式,將資料以引數的形式傳送給Web端。

Web端暴露給Client端的方法:

圖片描述

方案優缺點對比:

圖片描述

結論:對於複雜的場景支援程度優先選擇方案二。

Web端向C#進行資料傳輸,目前已知的可實現方案如下

  • 方案1

C#暴露介面給Web端,js直接呼叫C#介面以引數形式傳送資料,C#解析請求引數解析並進行事件分發。

Web呼叫c#暴露的方法
圖片描述

  • 方案2

Web端與c#自定義協議,Web端通過自定義協議將資料傳送給Client端,Client端擷取自定義協議請求並解析。
如果定義的協議為:webclientprotocol://websendmsgtoclient,Web頁面通過iframe傳送該請求,並在請求中加入資料如下:webclientprotocol://websendmsgtoclient?id=0&name=page

  • 方案3:

Web端通過http請求向Web後端服務傳送資料,Web後端服務通過tcp長連線向Client端傳送資料,這種方式由於涉及多方面的資料傳輸,並且tcp傳輸資料複雜,一般情況下不選用該方案。

方案對比:
圖片描述

結論:從傳輸效率、開發工作量、實現的複雜度三個方面對比,方案一的優勢明顯。

選擇C#向Web端的方案二和Web端向C#的方案一應用

資料傳輸格式:只支援String格式傳輸,但是為了資料解析的方便,將json轉換為string;
如果有A、B、C、D四個視窗間有資料的相互傳輸,模型如下:

圖片描述

備註:文中貼上的程式碼只是程式碼例項,專案中實際用的暴露介面需要提供事件分發,資料格式檢測的功能。

此文件提供的方案同樣適用於C++開發的客戶端與Web資料互動

相關文章