使用 WPF + Chrome 核心實現 線上客服系統 的複合客服端程式

曹旭升（sheng.c）發表於2021-10-09
Chrome

本系列文章詳細介紹使用 .net core 和 WPF 開發 升訊威線上客服與營銷系統 的過程。本產品已經成熟穩定並投入商用。

免費使用 & 私有化部署免費下載：https://docs.shengxunwei.com/Post/f7bc8496-14ee-4a53-07b4-08d8e3da6269

視訊實拍：演示升訊威線上客服系統在網路中斷，直接禁用網路卡，拔掉網線的情況下，也不丟訊息，不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53

對於線上客服與營銷系統，客服端指的是後臺提供服務的客服或營銷人員，他們使用客服程式在後臺觀察網站的被訪情況，開展營銷活動或提供客戶服務。在本篇文章中，我將詳細介紹如何通過 WPF + Chrome 核心的方式實現複合客服端應用程式。

在 1.3 版本之前，客服端程式使用的是 WebBrowser 元件，也就是 IE 核心，隨時系統使用者的持續增加，我偶爾會收到一些細節問題的反饋，比如在部分版本（蘿蔔版番茄版毛桃版之類）的 Windows 7 上，客服必須先點選輸入框上面的加粗或斜體等按鈕，才能啟用輸入框。經過調查發現是這部分 Windows 7 上 WebBrowser 元件所載入的 IE 核心存在問題，表現出了一些行為的不一致。

為了解決這個問題，從 1.5 版本開始客服程式中的 Web 容器我升級到了最新的 Chrome 核心，除了獲得了更好的效能之外，得以使程式在不同版本的 Windows 系統上的表現一致。

1.5 版本之前的使用者可以考慮儘快升級。

先看下效果，客服程式介面中的 聊天記錄部分、文字輸入框部分 使用的是基於 Chrome 核心的 WebView2 進行呈現的。

而訪客端，則反之向下相容，在 PC 端相容到 IE8 ：

要實現這樣的效果只需三個步驟

  • 嵌入元件
  • 響應事件
  • 呼叫 JavaScript 函式

1. 嵌入元件

首先使用 NuGet 將 WebView2 SDK 新增到專案中，然後將 WebView 新增視窗介面。

<Window x:Class="WPF_Getting_Started.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:{YOUR PROJECT NAME}"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800"
>
    <Grid>
     <DockPanel>
     <wv2:WebView2 Name="webView"
                  Source="https://www.microsoft.com"
     />
    </DockPanel>
    </Grid>
</Window>

2. 響應事件

在網頁導航期間，WebView2 控制元件將引發事件。 承載 WebView2 控制元件的應用偵聽以下事件。

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

例：修改建構函式以匹配以下程式碼段並新增 EnsureHttps 函式。


public MainWindow()
{
    InitializeComponent();
    webView.NavigationStarting += EnsureHttps;
}

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        args.Cancel = true;
    }
}

3. 呼叫 JavaScript 函式

可以在執行時使用主機應用將 JavaScript 程式碼注入控制元件。 可以執行任意 JavaScript 或新增初始化指令碼。 在刪除 JavaScript 之前，注入的 JavaScript 適用於所有新的頂級文件和任何子框架。

例如，新增在使用者導航到非 HTTPS 網站時傳送警報的指令碼。 修改 EnsureHttps 函式以將指令碼注入到使用 ExecuteScriptAsync 方法的 Web 內容中。


void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
        args.Cancel = true;
    }
}

完成

只需要以上簡單三個步驟，嵌入元件、響應事件、呼叫 JavaScript 函式。就可以完成 WPF + Chrome 核心 的複合式應用程式！

相關文章