Web端與Client客戶端數據交互方案選擇

背景

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數據交互