项目接入即时聊天客服系统(环信系统)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
项目接入即时聊天客服系统(环信系统)PHP后端操作的更多相关文章
- 前端开发之旅-zopim在线即时聊天客服
一.与潜在客户实时聊天的神奇-zopim Zopim是一款高效的可嵌入网页中去的即使通讯与网站访客信息追踪的的Web软件.知道谁在访问您的网站吗?想和他们实时交流吗?想更有效的把握商机吗?使用Zopi ...
- iOS聊天客服功能(Udesk)
前言: 在商城或者需要用户和平台交流的APP中需要用到客服功能.接下来会讲解Udesk客服功能的实现.技术文档在Udesk官网可以看到,本文讲述在项目中的集成实现流程.客服使用的PC端交流工具账号在公 ...
- 网页调启用qq对话聊天客服窗口的链接地址方法大全(包含移动端)
z转自: http://www.wazhuti.com/1781.html 在PC端,腾讯的QQ软件还是应用最为广泛的即时通讯工具了,除了网站自动的一些对话软件外,qq可以有效的将用户留存下来, ...
- 大数据项目之_15_电信客服分析平台_01&02_项目背景+项目架构+项目实现+数据生产+数据采集/消费(存储)
一.项目背景二.项目架构三.项目实现3.1.数据生产3.1.1.数据结构3.1.2.编写代码3.1.3.打包测试3.2.数据采集/消费(存储)3.2.1.数据采集:采集实时产生的数据到 kafka 集 ...
- Java项目案例:酒店前台客服管理系统
import java.util.Scanner; public class HelloWorld { public static void main(String[] args){ String [ ...
- 大数据项目之_15_电信客服分析平台_03&04_数据分析
3.3.数据分析3.3.1.Mysql 表结构设计3.3.2.需求:按照不同的维度统计通话3.3.3.环境准备3.3.4.编写代码:数据分析3.3.5.运行测试3.3.6.bug 解决 3.3.数据分 ...
- iOS:移动端“用户反馈和客服”的几个平台SDK的介绍
简单阐述: 用户反馈功能几乎是每个app都有的一个功能点,通过反馈功能实现与用户的连接.沟通,随时随地收集用户意见反馈和Bug报告,即时和用户保持沟通,在一定程度上提升了app的竞争力.而给app评分 ...
- h5在线1v1客服|web在线客服系统|h5即时聊天
网上有很多环信.美恰之类的客服系统,最近也使用h5+css3+fontJs+swiper+wcPop等技术架构开发了一个在线客服(1v1沟通聊天),可以应用到在线临时聊天.在线咨询等情景.实现了消息. ...
- PHP客服聊天
1.基于workman框架 github:https://github.com/walkor/workerman-chat 文档:http://www.workerman.net/gatewaydoc ...
随机推荐
- postgresql-创建主键自增的表
之前一直用的mysql,这个也基本上是主流,主键自增是很多建表规范中的硬性要求,不过这两种数据库主键自增的区别还是很大的 通常navicat中对mysql 主键自增直接客户端指定即可,不过对PG貌似不 ...
- Eclipse中普通java项目转成Web项目
在eclipse导入一个myeclipse建的web项目后,在Eclipse中显示的还是java项目,按下面的步骤可以将其转换成web项目. 1.找到项目目录下的.project文件 2.编辑.pro ...
- Apache Spark 2.2.0 中文文档 - Spark SQL, DataFrames and Datasets
Spark SQL, DataFrames and Datasets Guide Overview SQL Datasets and DataFrames 开始入门 起始点: SparkSession ...
- input输入内容成可点击状态
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1. ...
- mui--使用mui中的图文表格组件时出现一条横线的解决方法
最近做的微信公众号点击链接跳转到H5页面,该H5页面使用mui做的,遇到的商品列表页出现一个横线的问题, 这个是修改前的图片 解决方法: <style type="text/css&q ...
- 一张图轻松掌握 Flink on YARN 应用启动全流程(上)
Flink 支持 Standalone 独立部署和 YARN.Kubernetes.Mesos 等集群部署模式,其中 YARN 集群部署模式在国内的应用越来越广泛.Flink 社区将推出 Flink ...
- java——万年历
package oop; import java.util.Scanner; public class 万年历 { public static void main(String[] args) { / ...
- P2763 试题库问题 (网络流 最大流)
传送门 解题思路 比较简单的网络流,建图还是比较好想的.让源点向试题连流量为1的边,试题向所属类型连流量为1的边,类型向汇点连流量为需要此类试题的边.直接跑最大流,输出答案时找到那些满流的边所对的点. ...
- JavaConfig
Java Config是Spring的一个子项目,它旨在通过Java类的方式提供Bean的定义信息,是Spring4.0的核心功能 普通的POJO只要标注@Configuration注解,就可以为 ...
- C# GZipStream 压缩 解压
关于GZipStream压缩解压,网上找了很多资料,完整的不多,要么是针对字符串压缩解压缩的,要么只实现了针对单个文件的压缩解压缩,还有的不支持子文件夹的压缩,实用性都不是很大. 以下整理了压缩解压缩 ...