zoukankan      html  css  js  c++  java
  • 项目接入即时聊天客服系统(环信系统)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

  • 相关阅读:
    SpringCloud(2) 服务注册和发现Eureka Server
    决策树
    python基础6--面向对象基础、装饰器
    python基础5--输入输出、错误与异常
    python基础4--控制流
    python基础3--函数
    python基础2--数据结构(列表List、元组Tuple、字典Dict)
    python基础1--安装、package、数据类型
    Joda-Time开源库
    Maven教程(4)--Maven管理Oracle驱动包
  • 原文地址:https://www.cnblogs.com/lxwphp/p/9908557.html
Copyright © 2011-2022 走看看