项目接入即时聊天客服系统(环信系统)PHP后端操作

环信工作原理:

一、由于环信没有直接的接口来主动调取本项目中的用户数据,所有用户信息必须在环信服务器上注册对应信息成为环信的用户;(这样才能当用户进入聊天时显示其基本信息,如:名称、昵称、电话、邮箱等);

二、客服工作台登录可以显示用户信息,可以查看用户访问轨迹,可以主动接入访客咨询等诸多功能(这些基本都不需要后端程序员编写)

下面开始后端程序员(app程序员请自行查看环信开发文档)需要接入的代码编写:

一、用户信息传递

1、先下载环信开发demo文件,提取statics、easemob.js等文件放置到项目指定目录下便于调用

如图:图片


2、编写用户信息提供接口,将本站用户基本信息return出,如下:

class  GetUser
{
public function get()
{

//给予状态初始值
        $res = [
            'status' =>0
        ];

//判断本站用户是否登录
        $user_id = Yii::$app->user->id;
        if ($user_id >0)
        {

            $user_one = User::Redis_getOne($user_id);

//easemob_id为用户数据中是否有注册环信的账号id
            if (empty($user_one['easemob_id']))
            {
                //配置文件中写入的环信参数(是公司在环信官网注册得到的信息,详情见环信文档)
                $option = [
                    'client_id' => yii::$app->params['easemob']['client_id'],
                    'client_secret' => yii::$app->params['easemob']['client_secret'],
                    'org_name' => yii::$app->params['easemob']['org_name'],
                    'app_name' => yii::$app->params['easemob']['app_name'],
                    'base_url'=> "https://a1.easemob.com/".yii::$app->params['easemob']['org_name']."/".yii::$app->params['easemob']['app_name']."/"
                ];

//实例化环信类

                $h = new Easemob($option);

                //在环信端注册用户信息
                $re = $h->createUser($user_one['phone'], yii::$app->params['easemob']['default_password']);

 //获取环信上用户的信息到本站上
                $easemob_id = $h->getUser($user_one['phone']);

                //添加用户相关字段值(将用户在环信上注册好的id再存入用户数据)
                User::updateOne_NoRedis(['id'=>$user_one['id'], 'easemob_id'=>$easemob_id['entities'][0]['username']]);

//判断注册信息是否有,如果有则注册成功,状态改为1,信息存入结果集;反之则已被注册,将用户信息直接存入结果集即可;
                if ($re)
                {
                    $res['status'] = 1;
                    $res['msg'] = '环信用户生成';
                    $res['data'] = [
                        'username'=>$user_one['phone'],
                        'password'=>yii::$app->params['easemob']['default_password'],
                        'nickname'=>$user_one['nickname'],
                        'realname'=>$user_one['realname'],
                        'qq'=>$user_one['qq'],
                        'head'=>File::getFileUrl($user_one['portrait'],100,100),
                        'phone'=>$user_one['phone'],
                        'wx'=>$user_one['wx_openid'],
                    ];
                }
            }else{
                $res['status'] = 1;
                $res['msg'] = '环信用户找到';
                $res['data'] = [
                    'username'=>$user_one['phone'],
                    'password'=>yii::$app->params['easemob']['default_password'],
                    'nickname'=>$user_one['nickname'],
                    'realname'=>$user_one['realname'],
                    'qq'=>$user_one['qq'],
                    'head'=>File::getFileUrl($user_one['portrait'],100,100),
                    'phone'=>$user_one['phone'],
                    'wx'=>$user_one['wx_openid'],
                ];
            }
        }
        return $res;
}
}

2、在用户点击联系客服按钮事件时,调用上述接口,获取用户信息传到客服工作台

h5页面代码:

< a href=" " onclick="easemobim.bind({tenantId:‘注册的租户id’'})"><i class="icon"></i><span class="a_txt">在线客服</span></ a>

其中onclick为自定义按钮事件,点击启用传值动作

//打开环信客服窗口

var easemob =function(){

$.ajax({

    type:'POST',
    url:ajax_url_config.my.easemob+'?access-token='+token,
    success:function (User) {
        var jsondata = eval("("+User+")");
       }

return jsondata;

} ;
var easemobUser = easemob ();

window.easemobim = window.easemobim || {};
easemobim.config = {
    //是否隐藏小的悬浮按钮
    hide: true,
    //自动连接
    autoConnect: true,
    //环信移动客服域,固定值,请按照示例配置
    domain: '//kefu.easemob.com',
    //您网站上im.html文件的完整路径
    path: '//你项目的域名地址/huanxin',
    //访客插件static的路径
    staticPath: '//你项目的域名地址/huanxin/static',
    //orgName#appName
    appKey: '  ',
    //手机App绑定的IM号
    to: ' ',
    //集成用户体系,验证的方式二选一,必填,另一项为空即可
    user: {
        //指定用户名,集成时必填
        username: easemobUser['username'],
        //password验证方式
        password: easemobUser['password'],
        //token验证方式
        token: ''
    },
    visitor:{
        trueName: easemobUser['realname'],
        qq: easemobUser['qq'],
        phone: easemobUser['phone'],
        companyName: '',
        userNickname: easemobUser['nickname'],
        description: ''
    }
};

在这之前,请记得要引入之前放置在指定目录下的环信js文件:

<script type="text/javascript" src="/sea-modules/huanxin/easemob.js"></script>

自此,用户信息传递完毕,客服可以看到是哪位用户在咨询。
二、用户访问轨迹传递

1、由于文件已放置,可以省略

2、商品信息得提取接口,我就不提供代码了,与上面的第二部一样;

3、商品信息的传递,也是一样,通过ajax请求得到商品数据,传递到环信平台:

var easemobgoods = (function () {
    var res ;
    $.ajax({
        type:'GET',
        url:ajax_url_config.goods.get_attribute_url+goods_item_id,
        async:false,
        success:function (data) {
            res = data;
        }

    });
    return res;
});

var goods = easemobgoods();


 //提取环信客服传递商品数据


window.easemobim = window.easemobim || {};
easemobim.config = {
    tenantId: ' ',//写入注册时得到的租户id
    //orgName#appName
    appKey: ' ',
    //手机App绑定的IM号
    to: ‘ ’,
    satisfaction: true,
    // //是否隐藏小的悬浮按钮
    hide: true,
    //自动连接
    autoConnect: true,
    //环信移动客服域,固定值,请按照示例配置
    domain: '//kefu.easemob.com',
    //您网站上im.html文件的完整路径
    path: '//你项目的域名地址/huanxin',
    //访客插件static的路径
    staticPath: '//你项目的域名地址/huanxin/static',
    //移动端点击联系客服按钮自动发送订单消息demo
    extMsg: {
        "imageName": goods['goods_name'],
        //custom代表自定义消息,无需修改
        "type": "custom",
        "msgtype": {
            "track": {
                "title": "我正在看:",
                "price": goods['price'],
                "desc": goods['goods_name']+goods['color'],
                "img_url": goods['goods_thumb'],
                "item_url":"http://你项目的域名地址/goods/detail/"+goods['goods_item_id']
            }
        }
    },
}

原文:https://blog.csdn.net/gaokcl/article/details/74357239

posted @ 2018-11-05 12:56  码农编程进阶笔记  阅读(1650)  评论(0编辑  收藏  举报
返回顶部 有事您Q我