使用 WPF+ ASP.NET MVC 開發 線上客服系統 （一）

標籤：c#   net   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）Message Service：

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 相關進階職位

簡曆：http://zkebao.com/r/resume.html

WinForm作品：http://www.cnblogs.com/sheng_chao/p/4387249.html

 

使用 WPF+ ASP.NET MVC 開發 線上客服系統 （一）