阿里云云呼叫中心——软电话SDK前端接入

87 阅读 0 评论 58 点赞

我是靠谱客的博主想人陪哑铃，最近开发中收集的这篇文章主要介绍阿里云云呼叫中心——软电话SDK前端接入，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

摘要：2018年十二月份的时候，我们需要基于我们的后台系统开发应急呼叫系统。一直没有总结。我对这部分也许会有很多理解不透彻的地方，望小伙伴们彼此相互学习，多多提出不足呢。

技术：由于是基于我们的后来系统来实现，后台系统中使用的技术如下：

vue框架
vue-router 路由的相关使用
axios用于前后端数据交互
ElementUI组件

应急呼叫系统，引入了阿里云云呼叫中心系统集成中的软电话SDK前端接入

需求如下：

需要全局使用云呼的功能
云呼的按钮需要根据用户权限，来确定是否显示云呼的按钮
可以获取到打进来的电话号码
可以实现平台外呼号码
当有电话呼入到平台上的时候，显示工作台弹窗
点击云呼的按钮，可以控制面板的显示与隐藏

大概思路：

（刚开始有点迷茫，不知道从何下手），具体如下：

全局引入样式和SDK
根据用户的权限控制云呼按钮的显示和隐藏
对云呼进行初始化

具体代码实现如下：

1、由于需要全局使用，在index.html中引入阿里云的SDK。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你自己写</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="你自己写" />
<meta name="description" content="" />
<link rel="icon" href="../static/img/L_icon7.png">
<!--sdk样式文件-->
<link rel="stylesheet" type="text/css" href="https://g.alicdn.com/acca/workbench-sdk/0.4.7/main.min.css">
</head>
<body>
<div id="app"></div>
<!-- 阿里云云呼叫SDK -->
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/SIPml-api.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/crm/acc-phone/1.1.2/index.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/acca/workbench-sdk/0.4.7/workbenchSdk.min.js"></script>
</body>
</html>

2、由于需要全局使用，所以我在home.vue页写初始化的配置。

这里一开始写的时候，遇到了一个问题。一开始云呼的挂载元素写在了class='callDiv'里面了，初始化后在子组件中调用window.workbench的时候会报错，这个主要的原因是v-if=openWbShow的影响，所以我把云呼的挂载元素div放在外面了，就没这个报错了。

<template>
<div class="callDiv" v-if="openWbShow">
<!-- 云呼 -->
<div @click="openWB(openStatus)" v-if="login" class="mini-workbench">云呼</div>
<div class="noLogin" v-else>
<a href="后台给我需要登录的接口" class="noLoginWorkbench">云呼</a>
</div>
</div>
<!-- 云呼挂载元素id -->
<div id="workbench" :class="{'workbenchBorder':workbenchBorder}"></div>
</template>
<script>
export default {
data() {
return {
openWbShow:false, // 云呼按钮的显示
login:false, // 云呼按钮是登录状态
openStatus:false, // 控制面板的显示
workbenchBorder:false, // 面板的边框
visibleWorkbench:false, // 来电的时候工作台弹窗的显示
}
},
mounted() {
this.getUserInfo();
},
methods : {
getUserInf(){
let self = this;
self.$axios.post("后台给的用户相关的接口").then((res) => {
// console.log(res.data);
// user.isCall属性来判断是给允许进入云呼叫拨打电话,0：云呼按钮不可见；1：可见云呼按钮，但不能进行外：能够实现外呼功能
// 判断当前用户的权限 有权限的话显示云呼按钮
// 判断云呼登录状态 如果已登录 按钮蓝色 初始化initWorkBench，如果未登录的话是灰色按钮，点击去登录的界面（后台给我的阿里云的子账户登陆页面，这是后台配置好的）
if(res.data.data.user.isCall==null || res.data.data.user.isCall == 0{
self.openWbShow = false;
}else if(res.data.data.user.isCall == 1){
self.openWbShow = true; //云呼按钮可以显示
if(res.data.data.user.aliToken){
// 判断是不是有aliToken，有的话云呼可以上线，初始化
self.login = true;
self.initWorkBench();
}else{
// 可以显示云呼按钮，但不能使得上线，上线按钮为灰色
self.login = false;
}
}
});
},
//云呼相关初始化
initWorkBench(){
let self = this;
window.workbench = new window.WorkbenchSdk({
dom: 'workbench', // 挂载的元素
width: '280px', // 面板的宽
height: '500px', // 面板的高
instanceId: '这里是你们自己申请后的id',
ajaxPath: '后台配置好的接口，让我写的',
ajaxMethod: 'post',
afterCallRule: 15,
// 挂机后的话后处理时间
header: true,
defaultVisible:false,
useOpenApiSdk: false,
exportErrorOfApi: true,
moreActionList: ['mobilePhoneAnswer', 'break', 'offline'],
onInit: function () {
// window.workbench.register(); // 想实现自动上线在此注册
// window.workbench.changeVisible(true); //可以实现初始化后显示面板
},
onErrorNotify: function (error) {
console.warn(error)
},
onCallComing: function (connid,caller,calee,contactId,skillgroupId) {
// connid: 通话id;caller: 主叫号码;calee:被叫号码;contactId:录音id，通话记录查询需要的字段;skillgroupId:技能组id
eventBus.phone = caller; //将获取的号码，先赋值
eventBus.$emit("callComming",caller); // 传递给非父子组件
},
onCallDialing: function (connid,caller,calee,contactId) {
// console.log('这里是',connid,caller,calee,contactId);
},
onStatusChange: function (code, lastCode, context) {
// console.log(code, lastCode, context);
},
onCallEstablish: function (connid, caller, calee, contactId) {
// console.log('这里是通话建立时触发的回调函数', connid, caller, calee, contactId)
},
onCallRelease: function (connid, caller, calee, contactId) {
// console.log('这里是通话结束时触发的回调函数', connid, caller, calee, contactId)
},
onHangUp(type){
// console.log("挂机");
eventBus.phone = "";
},
onStatusChange(code, lastCode, context){
// console.log(code, lastCode, context);
}
})
},
// 云呼相关配置
openWB(openStatus){
//
点击出现云呼面板，再次点击面板消失
if(openStatus == true){
window.workbench.changeVisible(false);
this.openStatus = false;
this.workbenchBorder = false;
}else{
window.workbench.changeVisible(true);
this.openStatus = true;
this.workbenchBorder = true;
}
}
}
}
</script>

实现的效果：如下