基於workerman+gatawayworker+thinkphp5搭建的客服系統

時間 2019-12-04

標籤基於 workerman+gatawayworker+thinkphp5 workerman gatawayworker thinkphp 搭建客服系統欄目 PHP 简体版

原文原文鏈接

laykefu

thinkphp5+Gatewayworker搭建的web客服系統
體驗地址：http://laykefu.guoshanchina.com
github倉庫：https://github.com/shmilylbel...php

1.客戶端接入

一、添加laykefu.css樣式文件css

<link href="http://laykefu.guoshanchina.com/static/customer/css/laykefu.css" rel="stylesheet" type="text/css" />

二、添加jquery.js和laykefu.js 文件html

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="http://laykefu.guoshanchina.com/static/customer/js/laykefu.js"></script>

三、添加html目標代碼 id="show-laykefu"，樣式可根據需求自定義jquery

<div class="laykefu-min">諮詢客服</div>

默認顯示一個客服linux

四、初始化laykefugit

laykefu.init({
        group: 1,//客服分組
        socket: '127.0.0.1:7272',//聊天服務器地址
        face_path:'/static/customer/images/face',//表情包路徑
        upload_url:'/index/upload/uploadImg',//圖片上傳路徑
    });

五、若是須要展現多個客服，那麼須要這麼修改github

<div class="laykefu-min" data-group="1" >售前客服</div>
<div class="laykefu-min" data-group="2" style="margin:100px">售後客服</div>

初始化前須要先獲取group的值web

$(".laykefu-min").click(function(){
    var group = $(this).attr('data-group');
    laykefu.init({
        group: group,//客服分組
        socket: '127.0.0.1:7272',//聊天服務器地址
        face_path:'/static/customer/images/face',//表情包路徑
        upload_url:'/index/upload/uploadImg',//圖片上傳路徑
    });
});

六、可選參數
可配置參數以下thinkphp

laykefu.init({
        uid: '',//客戶id
        name: '',//客戶暱稱
        group: '',//客服分組
        avatar: '',//客戶頭像
        socket: '',//聊天服務器地址
        face_path:'',//表情包路徑
        upload_url:'',//圖片上傳路徑
        height:'',//窗口高度
        width:'',//窗口寬度
    });

五、關聯已有帳戶系統
默認狀況下諮詢的客戶是隨機分配帳戶信息，若是你的平臺有帳戶系統，那麼能夠在初始化的時候傳遞uid和name便可windows

2.服務端配置

一、安裝依賴

composer install

二、配置環境
修改目錄下.env信息
三、啓動gatawayworker相關服務
若是你是在windows上運行的話，直接雙擊/vendor/workerman/Conf/start_for_bat.bat便可
若是你是在linux或mac上運行的話，請進入/vendor/workerman/Conf/目錄，而後運行