对于在线客服与营销系统,客服端指的是后台提供服务的客服或营销人员,他们使用客服程序在后台观察网站的被访情况,开展营销活动或提供客户服务。在本篇文章中,我将详细介绍如何通过 WPF + Chrome 内核的方式实现复合客服端应用程序。

先看实现效果

客服程序界面中的 聊天记录部分、文字输入框部分 使用的是基于 Chrome 内核的 WebView2 进行呈现的。

客服端

访客端

视频实拍:演示升讯威在线客服系统在网络中断,直接禁用网卡,拔掉网线的情况下,也不丢消息,不出异常。

https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53


要实现这样的效果只需三个步骤

  • 嵌入组件
  • 响应事件
  • 调用 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 内核 的复合式应用程序!

使用 WPF + Chrome 内核实现高稳定性的在线客服系统复合应用程序的更多相关文章

  1. 使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 免费使用 & 私有化部署免费下载:https://docs.sh ...

  2. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 (一)

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  3. .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布

    希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...

  4. .net core 和 WPF 开发升讯威在线客服系统:把 .Net Framework 打包进安装程序

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程. 系列文章目录: https://blog.shengxunwei.com/Home/Post/44a3 ...

  5. .net core 和 WPF 开发升讯威在线客服系统:使用本地IP数据库实现访客来源快速定位,支持国外

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 免费使用 & 私有化部署:https://kf.shengxun ...

  6. .net core 和 WPF 开发升讯威在线客服系统:调用百度翻译接口实现实时自动翻译

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...

  7. .net core 和 WPF 开发升讯威在线客服系统:调用有道翻译接口实现实时自动翻译的方法

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...

  8. .net core 和 WPF 开发升讯威在线客服系统:怎样实现拔网线也不丢消息的高可靠通信(附视频)

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  9. .net core 和 WPF 开发升讯威在线客服与营销系统:背景和产品介绍

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...

  10. .net core 和 WPF 开发升讯威在线客服与营销系统:系统总体架构

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

随机推荐

  1. [QML]从零开始QML开发(二)QML开发,浅谈控件、槽函数、锚等基本概念。QML和C++怎么交互?贯彻落实MVC原则

    [QML]从零开始QML开发(二)QML开发,浅谈控件.槽函数.锚等基本概念.QML和C++怎么交互?贯彻落实MVC原则 先看代码: import QtQuick 2.12 import QtQuic ...

  2. linux 对子用户配置java 环境变量

    转载请注明出处: 若服务器安装 jdk 时用的是root 用户,则root 用户登录服务器可以直接获取Java环境. 当切换到其他子用户时,则会发现环境不存在,命令不存在等. 解决方案: 1. 先切换 ...

  3. 百度网盘(百度云)SVIP超级会员共享账号每日更新(2023.12.10)

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  4. Jrebel与Xrebel教学

    简介 JRebel和XRebel是两个非常有用的工具,可以显著提升Java开发人员的生产力和应用程序性能. JRebel是一个强大的Java开发工具,它允许开发人员在不重新启动应用程序的情况下进行代码 ...

  5. Net Core中使用EF Core连接Mysql数据库

    Entity Framework Core的前身是微软提供并主推的ORM框架,简称EF,其底层是对ADO.NET的封装.EF支持SQLServer.MYSQL.Oracle.Sqlite等所有主流数据 ...

  6. SQLServer性能优化之二

    SQLServer性能优化之二 背景 优化了机器的硬件配置之后性能好了很多 但是偶尔还是会出现阻塞. SQL总是奇奇怪怪的. 其实第一天时就感觉可能是索引存在问题. 但是dbcc 重建所有数据库的索引 ...

  7. [转帖]5 分钟学会写一个自己的 Prometheus Exporter

    https://cloud.tencent.com/developer/article/1520621学习一下怎么搭建呢.   去年底我写了一个阿里云云监控的 Prometheus Exporter, ...

  8. [转帖]ERROR 2068 (HY000): LOAD DATA LOCAL INFILE file request rejected due to restrictions on access.

    1.报错信息 ERROR 2068 (HY000): LOAD DATA LOCAL INFILE file request rejected due to restrictions on acces ...

  9. tiup 工具离线安装与简单导出数据说明

    tiup 工具离线安装说明 mirror的创建 能上网的机器上面进行如下操作: curl --proto '=https' --tlsv1.2 -sSf https://tiup-mirrors.pi ...

  10. [转帖]15.1. 插件dblink简介

    https://help.kingbase.com.cn/v8.6.7.12/development/sql-plsql/ref-extended-plug-in/dblink.html dblink ...