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

作者: 来个大鸡腿吧 | 来源:发表于2020-11-12 15:44 被阅读0次

阿里云CC云呼VUE前后端项目集成
Halo 开源项目使用jsdelivr进行CDN加速.
阿里云高级播放器集成
阿里云短信 composer 集成 PHP 错误
阿里云的重大战略调整，“被集成”成核心，发布SaaS加速器助力企
springboot + mybatis + mysql + V
阿里云ECS云服务器建站爬坑之旅
Swift阿里云上传踩坑之旅
谷粒商城-基础篇- 笔记八（基于人人开源项目搭建前/后端管理系统
阿里云对象存储oss前端上传文件[element-ui]

最近公司要在系统中集成阿里云的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 封装拖拽组件

阿里云CC云呼VUE前后端项目集成
最近公司要在系统中集成阿里云的CC云呼软电话功能，一直没有总结，也对深入的一些功能没有透彻研究。现将代码贴出来，供...
Halo 开源项目使用jsdelivr进行CDN加速.
Halo项目前后端分离. 此时将后端项目部署到阿里云, 前端项目上传至Github, 通过jsdelivr进行中国...
阿里云高级播放器集成
相关链接：阿里云播放器SDK下载3.4.10阿里云播放器SDK集成文档查看集成播放器的目的是让现有项目更好更方便...
阿里云短信 composer 集成 PHP 错误
PHP 阿里云短信集成终端到项目根目录执行：composer require alibabacloud/clien...
阿里云的重大战略调整，“被集成”成核心，发布SaaS加速器助力企
摘要：阿里云战略调整，“被集成”成为生态战略，讲讲即将“退居幕后”的阿里云。阿里云近期调整动作巨大，阿里云新任...
springboot + mybatis + mysql + V
项目总结经验 1.项目框架 SpringBoot + Mybatis + Mysql + Vue 数据库采用阿里云...
阿里云ECS云服务器建站爬坑之旅
0 PRE 阿里云ECS云服务器（预装系统为ubuntu16.04）、可用域名、node.js后端服务器项目(He...
Swift阿里云上传踩坑之旅
前言前段时间公司的项目迭代，加入了上传视频的功能，老大经过调研后决定采用阿里云上传。在集成阿里云上传的过程中...
谷粒商城-基础篇- 笔记八（基于人人开源项目搭建前/后端管理系统
1.后端项目在码云上搜索“人人开源”项目，找到renren-fast和renren-fast-vue两个项目分...
阿里云对象存储oss前端上传文件[element-ui]
相关技术：nodejs，express，vue.js，element-ui ,完整项目github地址阿里云对象...