环信工作原理:
一、由于环信没有直接的接口来主动调取本项目中的用户数据,所有用户信息必须在环信服务器上注册对应信息成为环信的用户;(这样才能当用户进入聊天时显示其基本信息,如:名称、昵称、电话、邮箱等);
二、客服工作台登录可以显示用户信息,可以查看用户访问轨迹,可以主动接入访客咨询等诸多功能(这些基本都不需要后端程序员编写)
下面开始后端程序员(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=" " οnclick="easemobim.bind({tenantId:‘注册的租户id’'})">在线客服 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文件:
自此,用户信息传递完毕,客服可以看到是哪位用户在咨询。
二、用户访问轨迹传递
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']
}
}
},
}