使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

近段时间利用业余时间开发了一套在线客服系统，期间遇到过大大小小不少问题，好在都一一解决，最终效果也还可以，打算写一个系列的文章把开发过程详细的记录下来。

希望能够和更多的开发人员互相交流学习，也希望有有兴趣的小伙伴一起加入开发当中来，毕竟一个人的力量是有限的 :)

有兴趣的小伙伴请加Q：279060597

系列文章将分为几个部分

零、概述（本篇）

　　一、需求分析及技术方案初步选型

　　二、技术方案选型，验证

　　三、底层框架设计，开发

　　四、服务器设计开发

　　五、客户端设计开发

　　六、Web端设计开发

在这个系列的文章中，您将了解并学习到以下技术知识：

ASP.NET MVC、WPF、MSMQ、YUI、WebSocket

如果这些技术对您有用，还请您 推荐 一下本文章，谢谢！

首先是需求，我们大概看看什么是在线客服系统：

只需将系统生成的一段JavaScript代码嵌入网站页面，即可在网站上显示代表客服的浮动小图标，邀请框，以及小聊天窗口。

而对于客服：

1.变被动为主动，使营销人员（客服）主动发现并跟踪网站访客，实时掌握访客动向，向访客发起聊天邀请或直接强制会话。

2.对营销人员（客服）实行有效管理与考核，借助实时监控，历史记录，统计分析等功能。

3.营销辅助功能：访客地域，来源网页，搜索引擎关键字，快捷回复，消息预知等功能。

4.网页回拨电话，访客输入自己的电话号码系统自动记录并回拨接通营销人员（客服）与访客的电话；营销人员（客服）也可以直接使用客服端软件在电脑上拨打手机或固定电话。

这就是我们要开发的系统，还好需求非常明确，并不复杂。

关于技术方案的选型：

1）服务器操作系统：

Windows Server 2012

Windows Server 2012 是微软下一代 Windows 服务器的最新版本，它采用超越虚拟化技术，可通过一台服务器提供多台服务器的功能， 实现相当灵活的工作方式，为每个应用程序创造更大的发挥空间 。它将向企业和托管提供商提供可伸缩、动态、支持多租户以及通过云计算得到优化的基础结构，并能帮助 IT 专业人员更快、更高效地响应业务需求。

2）消息服务：

MSMQ

在线客服系统最重要的是什么，当然是网站访客与客服人员消息的互通，我不推荐重复造轮子，而是更愿意选择成熟稳定的产品来为我们服务。

Message Queue（微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式，相互通信的应用可以分布于同一台机器上，也可以分布于相连的网络空间中的任一位置。它的实现原理是：消息的发送者把自己想要发送的信息放入一个容器中（我们称之为Message），然后把它保存至一个系统公用空间的消息队列(Message Queue)中；本地或者是异地的消息接收程序再从该队列中取出发给它的消息进行处理。

在消息传递机制中，有两个比较重要的概念。一个是消息，一个是队列。消息是由通信的双方所需要传递的信息，它可以是各式各样的媒体，如文本、声音、图象等等。消息最终的理解方式，为消息传递的双方事先商定，这样做的好处是，一是相当于对数据进行了简单的加密，二则采用自己定义的格式可以节省通信的传递量。消息可以含有发送和接收者的标识，这样只有指定的用户才能看到只传递给他的信息和返回是否操作成功的回执。消息也可以含有时间戳，以便于接收方对某些与时间相关的应用进行处理。消息还可以含有到期时间，它表明如果在指定时间内消息还未到达则作废，这主要应用与时间性关联较为紧密的应用。

3）Web 开发框架：

YUI，WebSocket

对于在线客服系统，Web页面的稳定性和速度非常重要，在此我们使用 YUI 和 WebSocket 来构建可与服务端实时交互的 Web 系统。

YUI:YUI库是一系列使用Javascript和CSS创建的的工具和控件集，用来创建富客户端Web应用。使用到了DOM scripting，DHTML和AJAX。

WebSocket：是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

4）客服端开发框架：

Microsoft .NET Framework 4.5 / WPF

Windows Presentation Foundation (WPF) 是下一代显示系统，用于生成能带给用户震撼视觉体验的 Windows 客户端应用程序。 使用 WPF，您可以创建广泛的独立应用程序以及浏览器承载的应用程序。

5）服务端开发框架：

Microsoft ASP.NET MVC 4

微软官方提供的MVC模式编写Asp.net Web应用程序的一个框架。

系统结构：



话不多说，先上图：

客服端主界面：



网页端：



网页端大聊天窗口



手机端聊天界面：



功能分解

访问状态跟踪：

实时扫描跟踪正在浏览网站的访客，在客服端通过树形目录进行分类展示。



访客信息采集/搜索引擎关键字分析

识别访客的：来源地域，IP地址，来源网页地址，使用的终端设备类型以及正在浏览的网页等。

智能识别访客的来源地址，如果来源地址为搜索引擎，则分析来源搜索引擎及搜索关键字。



轨迹跟踪：

在聊天区及辅助功能区的轨迹面板，实时追踪显示访客正在浏览的页面。



会话转接：

当客服遇到疑难问题时，可以转接给其他同事，寻求帮助。在转接对话时自动把原接待客服沟通的记录全部转给待接客服。



消息预知：

客服可预先看到访客已经输入而未发送的消息，以便在第一时间了解访客的心理。



快捷回复：

可在线添加、修改，导入或导出，缩短访客等待时间，提高客服工作效率。



历史记录

与使用其它聊天工具时历史记录存储在客服电脑无法集中管理不同，在线客服系统的所有聊天记录均可由管理员进行统一的查询，可以按时间段，聊天内容等多种方式精准查询。



实时监控

可以自由选择对客服进行对话监控，通过监控中的聊天记录，了解客服工作状态及业务技能。



留言（web侧）

非工作时间无客服在线时，自动切换到留言功能，引导访客留下联系方式及诉求。



网页回呼

在网站中显示一个浮动区域，引导访客填写电话号码后，系统可自动接通客服与访客的电话。客服亦可在后台查询所有的访客电话号码及呼叫记录。





拨打手机和固定电话

客服可在客服端软件中，直接使用网络电话业务拨打全国固定电话或手机。



角色与权限

对客服分配不同的角色和所拥有的操作权限，可进行管理员，班组长，一般客服，实习生等多种角色层级，实现有效管理。



联系人管理

为访客建立联系人信息，记录访客的联系方式，营销情况，可对访客进行业务类型，重要级别的分类。





站点设置

设定个性的LOGO图片，浮动图标、图片广告，文字广告等。所有设置均实时生效。



具体每一部分的实现，敬请关注。

小广告

博主正在留意南京的 .Net 相关高级职位

江苏电信10000号前技术经理，现任某外资企业Team Leader

简历：http://121.40.198.87:8010/

WinForm 作品：/content/4181687.html

WPF + ASP.NET MVC 作品：/article/5252028.html