簡介

whisper是一個線上客服系統原始碼，採用thinkphp5+Gatewayworker編寫，效能強悍。自己搭建，控制在自己，也無需為您的資料安全擔心，您可以應用在任何的正規的網站，只需要新增一段簡單的js程式碼，就可以使您的網站擁有線上客服功能。

截圖

功能

• 支援客服分組，多客服服務，讓您的服務更有條理。
• 支援客服轉接，讓會員接受最專業的服務。
• 智慧分配客戶流量，讓服務更加高效。
• 問候語設定，服務更加親切。
• 歷史聊天記錄檢視，方便監管和總結。
• 支援資料趨勢統計，隨時掌握服務情況，做出最優的調整。

安裝

環境要求：PHP >= 5.6

1、安裝寶塔

#Centos系統
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh
#Ubuntu系統
wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && sudo bash install.sh
#Debian系統
wget -O install.sh http://download.bt.cn/install/install-ubuntu.sh && bash install.sh
 

安裝完成後，進入面板，點選左側軟體管理，然後安裝PHP、Mysql、Nginx、phpmyadmin。

2、拉取原始碼 點選左側網站，新增站點，使用命令：

cd www/wwwroot/xx.com
git clone https://gitee.com/nickbai/whisper_tp5.git
#如果移動的時候有mv提示，直接Enter即可
mv whisper_tp5/{,.}* ./
chmod 775 ./* ./runtime/temp/*

3、網站設定 進入到域名設定，點選網站目錄，去除跨站攻擊的√，並設定執行目錄為public。

然後點選偽靜態設定，填入以下程式碼：

 location / {
   if (!-e $request_filename) {
   rewrite  ^(.*)$  /index.php?s=/$1  last;
   break;
    }
 }
 

4、新建資料庫 點選面板左側資料庫，點選phpmyadmin進入資料庫管理介面，新建whisper資料庫。再將根目錄的whisper.sql檔案匯入到資料庫，然後修改根目錄application/database.php配置資訊。

#修改如下
// 伺服器地址
'hostname'        => '127.0.0.1',
// 資料庫名
'database'        => 'whisper',
// 使用者名稱
'username'        => 'root',
// 密碼
'password'        => 'root',
// 埠
'hostport'        => '3306',
 

5、安裝拓展 環境一般只要安裝兩個擴充套件即可，一個是pcntl，一個是libevent（event）。pcntl為必須的，libevent為非必須的，但是起到高效能作用的恰恰是libevent（event）。如果你您的併發並不是很高，諮詢量也不是很大，您可以不安裝這個擴充套件，Gatewayworker會採用系統的select同樣效能可觀。

檢視已安裝的PHP拓展：

php -m

這時候發現必需的pcntl拓展已被安裝，接下來就安裝另外一個拓展了(一般情況下可以不用安裝)，即PHP5.x安裝libevent擴充套件，PHP7.x安裝event拓展。

PHP7.x安裝event拓展，博主以PHP7.0測試環境，如果你是7.1將下面目錄70改成71即可：

#event包下載地址http://pecl.php.net/package/event，這裡以最新版2.4.1為準
cd /www/server/php
wget http://pecl.php.net/get/event-2.4.1.tgz
tar -zxvf event-2.4.1.tgz && cd event-2.4.1
/www/server/php/70/bin/phpize
./configure --with-php-config=/www/server/php/70/bin/php-config --with-event-libevent-dir=/www/server/php/event-2.4.1/
make && make install
echo "extension=event.so" >> /www/server/php/70/etc/php.ini

PHP5.x安裝libevent擴充套件，這裡以PHP5.6測試環境，使用命令：

cd /www/server/php
wget https://github.com/libevent/libevent/releases/download/release-2.1.8-stable/libevent-2.1.8-stable.tar.gz
tar -zxvf libevent-2.1.8-stable.tar.gz && cd libevent-2.1.8-stable
/www/server/php/56/bin/phpize
./configure --with-php-config=/usr/local/php/bin/php-config --with-libevent=/www/server/php/libevent-2.1.8-stable/
make && make install

echo "extension=libevent.so" >> /www/server/php/56/etc/php.ini

其實要求不高的，這步可以省略。

6、啟動程式 這時候需要先下載服務端檔案，下載地址：whisper_server.zip，然後解壓上傳到網站根目錄vendor目錄裡，再編輯以下檔案。

#編輯vendor/GatewayWorker/Applications/whisper/Events.php檔案
#修改資料庫名和密碼
self::$db = new \Workerman\MySQL\Connection('127.0.0.1', '3306', 'root', 'pass', 'whisper');

然後啟動程式：

#進入服務端資料夾
cd /www/wwwroot/xx.com/vendor/GatewayWorker
#後臺執行
php start.php start -d

然後再到寶塔的安全裡開啟8282埠。

然後再配置application/config.php，進行如下修改：

'socket' => '192.168.1.104:8282',

ip填寫你伺服器的ip。

搭建成功後程序系統為xx.com，後臺後xx.com/admin，管理員使用者名稱密碼均為admin，客服的工作臺xx.com/service。

接下來我們進入程式系統首頁，點選右下角的客服按鈕，如果出現以下提示，則為安裝成功，不然請檢查你的步驟。 最後我們就將線上客服整合到自己網站。

網站使用

1、首先在您的網站上引入兩段js

<script src="http://xxx.com/static/customer/js/layer/layer.js"></script>
<script src="http://xxx.com/static/customer/js/whisper-tool.js"></script>

對應的地方，換成你剛才部署whisper事時採用的域名。其實你也可以放本地，只要這個資源能訪問到即可。

2、配置引數

var ws = new whisper();
$(dom).click(function(){
    var group = $(this).attr('data-group');
    ws.init({
        id: uid,
        url: 'http://xxx.xxx.com/index/index/chat',
        name: uname,
        avatar: uavatar,
        group: group
    });
});

3、引數解釋 1）dom是什麼？ 這裡的dom就是您的客服諮詢懸浮框，以whisper官網的為例子： 即這兩部分的dom的id，#cs-pre-sales和#cs-after-sales：

<div id="cs-groups">
    <div class="cs-groups__item" id="cs-pre-sales" data-group="1">
        <span class="widget__icon"></span>售前客服
    </div>
    <div class="widget__divider"></div>
    <div class="cs-groups__item" id="cs-after-sales" data-group="2">
        <span class="widget__icon"></span>售後客服
    </div>
</div>

其實就是這兩個地方的點選事件，此處在這個dom的地方，放置一個data-group來設定 這些客服分組的資訊。這個id需要與管理端設定的 異一一對應，否則該分組的客服無法正常的工作。例如whisper站點上，這個點選事件這麼配置的：

$("#cs-pre-sales,#cs-after-sales").click(function(){
        // 其他業務程式碼
})

2）init中的引數是什麼意思？

{
        id: uid,
        name: uname,
        avatar: uavatar,
        whisper_domain: 'http://xxx.xxx.com',
        group: group
}

對應的資訊為：

id    當前登入戶使用者的唯一id
name    當前登入使用者的暱稱
avatar    當前登入使用者的頭像
whisper_domain    您搭建whisper系統的域名
group    使用者諮詢的客服分組

好了，到此為止，您的whisper系統算是搭建 和整合完畢了。你可以為你的訪客提供諮詢服務了。

總結

該程式免費版本只更新到了v1.0.1，對於大部分網站來說，免費版功能已經夠用了。如果想拿來進行商用，需要機器人等功能的話，就要聯絡作者購買授權了。