阿里云CC云呼VUE前后端项目集成

最近公司要在系统中集成阿里云的CC云呼软电话功能，一直没有总结，也对深入的一些功能没有透彻研究。现将代码贴出来，供大家参考。
阿里云软电话前端接入API (https://help.aliyun.com/document_detail/63063.html)

技术：
  • vue框架
  • ElementUI组件
项目需求：
  • 需要全局使用云呼的功能。
  • 可以获取到打进来的电话号码。
  • 可以实现平台外呼号码。
  • 点击云呼的按钮，可以控制面板的显示与隐藏。
具体实现：

阿里云提供的SDK引入方式

<!--sdk样式文件-->
<link rel="stylesheet" type="text/css" href="https://g.alicdn.com/acca/workbench-sdk/{version-sdk}/main.min.css">
<!--sdk js文件-->
<script type="text/javascript" src="//g.alicdn.com/cloudcallcenter/SIPml/{version-sip}/SIPml-api.js"></script>
<script type="text/javascript" src="//g.alicdn.com/cloudcallcenter-voip/agentbar-sdk/{version-voip}/index.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/acca/workbench-sdk/{version-sdk}/workbenchSdk.min.js"></script>
以上静态资源，将上面的{version-sdk}和{version-sip}替换为对应的版本号，当前最新版本号为：
version-sip ==> 0.1.3
version-voip ==> 2.7.8
version-sdk ==> 1.0.9

由于系统用户中只有客服才可以显示云呼按钮，且必须为chrome 58+ ， https 协议且支持 navigator.getUserMedia()，为了避免浪费资源，将SDK设置为判断用户身份后引入，并判断浏览器支持情况。

判断是否为chrome浏览器，且版本号在58+
// 判断是否为chrome
      isChrome() {
        const userAgent = window.navigator.userAgent
        if(userAgent.indexOf('WOW') < 0 && userAgent.indexOf("Edge") < 0) {
          const start = userAgent.indexOf('Chrome');
          const end = userAgent.indexOf(' Safari');
          const temp = userAgent.substring(start, end);
          const broName = temp.replace('Chrome/', '');
          const code = Number(broName.substring(0, broName.indexOf('.')));
          if(code > 58) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      },
js 方法加载SDK
// 加载sdk
      loadSDK() {
        const _self = this
        // 加载js文件
        const url = [
          'https://g.alicdn.com/cloudcallcenter/SIPml/0.1.3/SIPml-api.js',
          'https://g.alicdn.com/acca/workbench-sdk/1.0.8/workbenchSdk.min.js',
          'https://g.alicdn.com/cloudcallcenter-voip/agentbar-sdk/2.7.8/index.js',
        ]
        url.forEach(item => {
          $.getScript(item, function(){
            _self.scriptLoad++
            // 所有sdk文件加载完毕后，显示云呼按钮
            if(_self.scriptLoad === url.length) {
              _self.openWbShow = true
            }
          });
        })
      },

必须通过https协议引入SDK文件，否则初始化完成后点击上线会报错。

完整代码：
<template>
  <div>
    <div class="callDiv" v-if="openWbShow && !isMobile">
      <!-- 云呼 -->
      <div @click="openWB()" class="mini-workbench">
        {{ !openStatus ? '云呼' : '' }}
        <i v-if="openStatus" class="el-icon-close"></i>
      </div>

    </div>
    <!-- 云呼挂载元素id -->
    <div id="workbench" v-drag :class="{show: openStatus}"></div>
  </div>
</template>
<script type="text/ecmascript-6">
  import globalConfig from '@/config/index'
  // 引入拖拽组件
  import drag from './common/drag';
  export default {
    components: {
      drag
    },
    data() {
      return {
        openWbShow: false, // 云呼按钮的显示
        openStatus: false, // 控制面板的显示
        workbench: null,
        isMobile: false,
        state: true ,// 是否初始化云呼
        scriptLoad: 0
      };
    },
    watch: {

    },
    created() {
      const _self = this
      setTimeout(function() {
        // 1 手机  ；2 pc
        if(_self.CFG.clinet.isMobile || _self.CFG.clinet.isIOS || _self.CFG.clinet.isAndroid || _self.CFG.clinet.isIPhone || _self.CFG.clinet.isIPad) {
          _self.isMobile = true
        } else {
          _self.isMobile = false
          if(_self.isChrome()) {
            // 如果不支持媒体方法，不加载云呼
            if(typeof(navigator.getUserMedia) !== 'undefined') {
              // 获取用户登录状态
              _self.loadUserLogin();
            }
          }
        }
      }, 2000)
    },
    mounted() {

    },
    methods: {
      // 判断是否为chrome
      isChrome() {
        const userAgent = window.navigator.userAgent
        if(userAgent.indexOf('WOW') < 0 && userAgent.indexOf("Edge") < 0) {
          const start = userAgent.indexOf('Chrome');
          const end = userAgent.indexOf(' Safari');
          const temp = userAgent.substring(start, end);
          const broName = temp.replace('Chrome/', '');
          const code = Number(broName.substring(0, broName.indexOf('.')));
          if(code > 58) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      },
      // 加载sdk
      loadSDK() {
        const _self = this
        // 加载js文件
        const url = [
          'https://g.alicdn.com/cloudcallcenter/SIPml/0.1.3/SIPml-api.js',
          // 'https://cloudcallcenter-stage.oss-cn-hangzhou.aliyuncs.com/all-public/workbench-sdk-uncompress-build/daily/1.0.8/workbenchSdk.js',
          'https://g.alicdn.com/acca/workbench-sdk/1.0.8/workbenchSdk.min.js',
          'https://g.alicdn.com/cloudcallcenter-voip/agentbar-sdk/2.7.8/index.js',
        ]
        url.forEach(item => {
          $.getScript(item, function(){
            _self.scriptLoad++
            if(_self.scriptLoad === url.length) {
              _self.openWbShow = true
            }
          });
        })
      },
      // 点击云呼按钮
      openWB() {
        if(this.state) {
          // 初始化云呼
          this.initWorkBench()
        } else {
          this.openStatus = !this.openStatus
        }
      },
      // 获取用户登录状态
      loadUserLogin() {
        this.API.send(this.CFG.services.crm.aliyunRefresh, {}, function(res) {
          // 判断是否显示按钮
          if (res === false) {
            this.openWbShow = false
          } else {
            // 加载SDK文件
            this.loadSDK();
          }
        }, function() {}, this)
      },
      //云呼相关初始化
      initWorkBench() {
        const _self = this
        window.workbench = new window.WorkbenchSdk({
          dom: 'workbench', // 挂载的元素
          width: '280px', // 面板的宽
          height: '500px', // 面板的高
          instanceId: '填写你项目的instanceId',    // 生产环境
          ajaxPath: '填写后台接口地址',
          ajaxOrigin: ‘填写后台域名’,
          ajaxMethod: 'post',
          afterCallRule: 15, // 挂机后的话后处理时间
          header: true,
          ajaxHeaders: {
            'ACCESS-TOKEN': '系统token，用于后台获取当前登录用户'
          },
          withCredentials: true,
          defaultVisible: false,
          useOpenApiSdk: false,
          exportErrorOfApi: true,
          moreActionList: ['mobilePhoneAnswer', 'break', 'offline'],
          // SDK对象实例化完成时触发
          onInit: function() {
            // console.log('SDK对象实例化完成时触发')
            // _self.workbench.register(); // 想实现自动上线在此注册
            _self.state = false
            _self.openStatus = !_self.openStatus
            window.workbench.changeVisible(true); //可以实现初始化后显示面板
          },
          // 当有一些错误信息的时候触发，可以获取error信息
          // onErrorNotify: function(error) {
          //   console.warn(error);
          // },
          // 来电时触发，用户可以在该函数内获取参数信息
          // onCallComing: function(connid, caller, calee, contactId, skillgroupId) {
          //   // connid: 通话id;caller: 主叫号码;calee:被叫号码;contactId:录音id，通话记录查询需要的字段;skillgroupId:技能组id
          //   console.log('来电时触发', connid, caller, calee, contactId, skillgroupId)
          // },
          // 去电、拨号振铃时触发，用户可以在该函数内获取参数信息
          // 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: function(type) {
          //   console.log("挂机", type);
          // }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .callDiv {
    position: fixed;
    bottom: 68px;
    right: 35px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    overflow: hidden;
    z-index: 9;

    .mini-workbench {
      background: #0eb8f0;

      &:hover {
        background: #08a3d6;
      }
    }

    div {
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }

  }

  #workbench {
    font-size: 14px;
    color: #4F5357;
    position: fixed;
    width: 303px;
    background: #FFFFFF;
    bottom: 0px;
    right: 100px;
    transition: all .3s;
    display: none;
    z-index: 10;

    &.show {
      display: table;
      max-height: 503px;
      border: 1px solid #D7D8D9;
      box-shadow: 0 1px 4px 0 rgba(55, 61, 65, 0.14);

      &:active {
        cursor: move;
      }
    }
  }
</style>
效果：
企业微信截图_20201112155050.png

关于drag拖拽组件，可查看此文章：VUE 封装拖拽组件

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,076评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,658评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,732评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,493评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,591评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,598评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,601评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,348评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,797评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,953评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,585评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2赞 367
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2赞 352