.net core 和 WPF 開發升訊威線上客服與營銷系統：實現對 IE8 的完全完美支援 【乾貨】

sheng.chao發表於2021-02-06

本系列文章詳細介紹使用 .net core 和 WPF 開發 升訊威線上客服與營銷系統 的過程。本產品已經成熟穩定並投入商用。
線上演示環境：https://kf.shengxunwei.com 注意：演示環境僅供演示交流與評估，不保證 7x24 小時可用。

文章目錄列表請點選這裡

對於線上客服與營銷系統，對瀏覽器的相容性和支援至關重要。我在設計之初，就考慮了這個問題，訪客端必須支援 IE8 以上的所有PC端和移動端瀏覽器。並且能夠根據瀏覽器的片本，自動切換不同的能信方式，始終選擇最優的方式與服務端通訊。

此外，還需要考慮到對網路的波動的相容，訪客所使用的網路五花八門，使用手機時，APP隨時會被切換到後臺導致中斷網路，或者訪客本身所處的車庫、電梯、郊外網路不佳，時斷時續。系統必須能夠合理的處理這些情況，做到：

  • 不中斷會話
  • 不丟失訊息。

這裡存在幾個技術難點需要注意：

  • IE8 和 IE9 不支援 WebSocket 通訊，只能降級使用 Http Ajax 請求。
  • 短時間的網路中斷，再次連線時，不可認為是新會話，必須能夠接著進行未完成的會話。
  • 訪客端頁面的排版佈局，必須完全相容 IE8 和 IE9，做到美觀一致。

本文我將詳細的解釋這些問題，以及如何實現對 IE8 的完全完美的相容。

訪客端在 IE8 下的效果：

客服端與使用 IE8 的訪客進行交流：

首先判斷使用者的瀏覽器版本

首先我們能過 User-Agent 判斷訪客所使用的瀏覽器。
User-Agent通常格式：

Mozilla/5.0 (平臺) 引擎版本 瀏覽器版本號

IE8 的 User-Agent：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

IE9 的 User-Agent：

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

我們可以通過 JavaScript 從使用者的瀏覽器中得到 User-Agent

  var ua = navigator.userAgent;

獲得 User-Agent 之後，我們通過對內容的判斷，就很容易知道使用者使用的瀏覽器版本，從而為後續的工作做準備。

從 WebSocket 降級到 HTTP Ajax

當我們判斷用使用者的瀏覽器不支援 WebSocket 時，就需要對通訊方式進行降級，我們使用 XMLHttpRequest 物件進行 HTTP 非同步通訊。

XMLHttpRequest 能夠：

  • 在不重新載入頁面的情況下更新網頁
  • 在頁面已載入後從伺服器請求資料
  • 在頁面已載入後從伺服器接收資料
  • 在後臺向伺服器傳送資料

通過一行簡單的 JavaScript 程式碼，我們就可以建立 XMLHttpRequest 物件。

var xhr = new XMLHttpRequest();

該建構函式用於初始化一個 XMLHttpRequest 例項物件。在呼叫下列任何其他方法之前，必須先呼叫該建構函式，或通過其他方式，得到一個例項物件。

XMLHttpRequest 有一個 onreadystatechange 。它的值 (state_Change) 是一個函式的名稱，當 XMLHttpRequest 物件的狀態發生改變時，會觸發此函式。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。在狀態為 4 時，我們執行程式碼進行通訊。

程式碼示例：

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=new XMLHttpRequest();
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

我們只需要在 xmlhttp.status 狀態程式碼為 200 時，處理從伺服器返回的資料即可。

本文對客服系統如何相容 IE8 進行了簡要的介紹，在接下來的文章中，我將具體解構服務端程式的結構和設計、客服端程式的結構和設計，敬請關注。

線上演示環境：https://kf.shengxunwei.com 注意：演示環境僅供演示交流與評估，不保證 7x24 小時可用。

聯絡QQ: 279060597
聯絡E-mail：C5118@outlook.com

相關文章