npm-infobird-websdk01 v1.2.11

##1. 背景

为满足客户在脱离启通宝客户端得情况下也可使用多电话服务，为第三方开发者提供网页开发支持得npm SDK 。 此文档面向网页开发者介绍企通宝npm SDK如何使用及相关注意事项。 支持（PC，H5，Andriod，IOS（11+）,IE10+ , Firefox, Google）方式使用

##2. 简介

电话SDK是包含电话服务网页开发工具包，可提高第三方开发者开发效率，实现同启通宝电话服务无缝对接。

##3. 电话渠道使用示例

• 第一步，下载安装npm包

npm i npm-infobird-websdk01

• 第二步，实例化呼叫组件对象

let infobirdclient = new InfobirdClient(); //实例化 讯鸟客户端对象

• 第三步，坐席账号登录

  infobirdclient.login({
    managerID: '***', // 企业id
    account:account,//坐席账号,必填
    password:password,//坐席账号,必填
    appid: 'infobirdtest',//线上默认填写infobird即可 
    success:function(data){
      var datastr = JSON.stringify(data);
      console.log('login',datastr)
})

//登录需要业务端配置跨域转发
Vue 配置如下：
devServer: {
    proxy: {
      '^/api': {
        target: 'https://vcs.infobird.com',
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: { '^/api': '/' },
      },
    },
  },

Nginx 配置如下：

location ^~ /api/ {
       proxy_pass https://vcs.infobird.com/proxy/;
}

• 第四步，登录成功，执行外呼操作

infobirdclient.outdail({
    accountType: '1', // 主叫类型
    calledDevice: currphonenum, // 呼叫phonenum号码
    callType: '0', // 呼叫类型， 0：语音呼叫
});

• 第五步，通话完成后挂机。

infobirdclient.dropcall({
    accountType: '1', // 主叫类型
    callType: '0', // 呼叫类型， 0：语音呼叫
    success: function() {
        console.log('ok!');
    },
});

• 第六步，退出当前登录账号，如果不退出，可以继续进行下一次通话。

infobirdclient.logout();      

HTML页面中定义回调函数onmessage接收请求结果，

回调事件声明(客户可以自定义)：

window.addEventListener('onMessage', ({
    detail: {
        data
    }
}) => {
    console.log(data);
    var datastr = JSON.stringify(data);
    //状态记时
    if(data.type == 'HeartBeatConf'){

    }else{
      this.clearAll()
      this.timedCount()
    }
    //心跳判断
    switch (data.type) {
      case "ConnectConf":
        if(data.result == 0){
                this.isconnect = 1;
                this.agentstate = "等待"
            }
            break;
        case "DropCallConf":
          this.iscalling = 0;
          this.agentstate = "等待"
          break;
        case "CallReleased":
          this.iscalling = 0;
          this.agentstate = "等待"
            break;
        case "LogoutConf":
          this.agentstate = "未登录"
            break;
        case "MakeCallConf":
          this.agentstate = "呼叫"
            break;
        case "Established":
          this.agentstate = "呼叫"
            break;
        case "EstablishedReal":
          this.agentstate = "通话"
            break;
        case "HeartBeatConf":
            if(data.result == 0){
                this.isconnect = 1
            }else{
               this.init()
            }
            break;
        case "ForceLogout"://强踢
          this.init()
          break;
        default:
            break;
    }
});

客户接收消息后可根据自身开发需求进行处理。也可根据接口描述进行自定义开发。 到此已完成一次呼叫收发消息示例，使用说明介绍完成。

<template>
  <div class="app-container">
    <audio id="remoteAudio" autoplay=""></audio>
    <div class="w_title_bg">
        <div class="w_title">呼叫弹窗</div>
        <a @click="onCancel">
            <img src="../assets/images/cuowu.png" alt="关闭窗口" width="20" height="20" border="0" align="right" class="guanbi_img">
        </a>
    </div>
    <div align="right" style="margin-right:27px;margin-top:10px;">
        <el-button v-if="islogin == 1"
        icon="el-icon-login" 
        type="primary" 
        size="medium"
        @click="onLogout">
        {{button.logout}}
        </el-button>
        <el-button v-else
        icon="el-icon-login" 
        type="primary" 
        size="medium"
        @click="onLogin">
        {{button.login}}
        </el-button>
    </div>
    <el-form  style="margin-top:24px;margin:25px;">
      <el-form-item label="手机号：" prop="phonenum">
        <el-input v-model="currphonenum"/>
      </el-form-item>
      <el-form-item>
        <el-button v-if="iscalling == 1" type="danger" @click="onDropcall">{{button.dropcall}}</el-button>
        <el-button v-else-if="iscalling == 0" type="primary" @click="onOutdail">{{button.makecall}}</el-button>
        <el-button v-else-if="iscalling == 2" type="primary" @click="onAnswerCall">{{button.answercall}}</el-button>

        <el-button v-if="ismute == 0" type="success" round @click="onMute">静音</el-button>
        <el-button v-else-if="ismute == 1" type="danger" round @click="onCancleMute">取消静音</el-button>
       
      </el-form-item>
    </el-form>
    <div class="status_wrapper">
      <div class="status_module">
        <div class="circle__indicator connected" v-if="isconnect == 1"></div>
        <div class="circle__indicator disconnected" v-else></div>
        <div class="text">
          <span class="status" v-if="isconnect == 1">已连接</span>
          <span class="status" v-else>未连接</span>
        </div>
      </div>
      <div class="status_module">
        <div class="circle__indicator connected" v-if="islogin == 1"></div>
        <div class="circle__indicator disconnected" v-else></div>
        <div class="text">
          <span class="status" v-if="islogin == 1">已登录</span>
          <span class="status" v-else>未登录</span>
        </div>
      </div>
        <div class="status_module" style="width:400px">
            <label>坐席状态：</label>
            <div class="text">
          <span class="agentstatus">{{agentstate}}</span>
          <span id="statetime">{{statetime}}</span>
        </div>
        </div>
    </div>
  </div>  
</template>

<script>
import InfobirdClient from 'npm-infobird-websdk01'
export default {
    name: 'Callbox',
    props: {
        account: String,
        password:String,
        currphonenum:String,
    },
    components: {
    },
    data() {
        return {
            infobirdclient:null,//客户端对象
            phonenum:'',
            islogin:0,//登录状态
            iscalling:0,//呼叫状态
            isconnect:0,//连接状态
            ismute:0,//静音
            client:'',//客户端对象
            agentstate:'未登录',//坐席状态
            statetime:'00:00:00',//坐席状态记时
            agentstatetimer:null,//坐席状态记时器
            tc:0,//记时初始值
            button:{
                'login':'登 录',
                'logout':'退 出',
                'dropcall':'挂 断',
                'makecall':'呼 叫',
                'answercall':'接 听',
            },
        }
    },
    watch:{
        client(val, oldVal){//普通的watch监听
            console.log("client: "+val, oldVal);
        },
        islogin(val, oldVal){
            console.log("islogin: "+val, oldVal);
        },
        isconnect(val, oldVal){
            console.log("islogin: "+val, oldVal);
        },
    },
    //挂载
    mounted(){
        this.infobirdclient = new InfobirdClient(); //实例化 讯鸟客户端对象
        this.infobirdclient.init();
        console.log(this.infobirdclient)
      //检查登录状态
        this.$nextTick(function(){
            var _this = this;
            var timer = setInterval(function(){
                if(document.readyState === 'complete'){
                    console.log("页面加载完成");
                    // //初始化页面
                    // _this.initPage()
                    window.clearInterval(timer)
                }
            },500)
        })
    },
    //计算属性
    computed: {
        
    },
    methods: {
      init(){
        this.islogin = 0
        this.iscalling = 0
        this.isconnect = 0
        this.agentstate = "未登录"
        this.statetime = "00:00:00"
      this.tc = 0
      },
      //登录
      onLogin(){
            var self = this;
          let reqdata = {
                managerID: 'bj58082087', // 企业id
                account:this.account,
                password:this.password,
                appid: 'infobirdtest', 
                success:function(data){
                  self.islogin = 1
                  var datastr = JSON.stringify(data);
                  console.log('login',datastr)
                },
            }
            this.infobirdclient.login(reqdata);
      },

      //退出
      onLogout(){
        this.init()
        this.infobirdclient.logout();
      },
      //关闭页签
      onCancel() {
        this.$emit('close-layer')
      },
      //呼叫
      onOutdail(){
        //检查登录状态
        // if(!this.islogin){
        //  this.$message({
        //       message:'账户已退出登录，请您登录后呼叫!',
        //       type:'warning'
        //   })
        //   return
        // }
        // //检查连接状态
        // if(!this.isconnect){
        //  this.$message({
        //       message:'连接未建立，请等待建立连接呼叫!',
        //       type:'warning'
        //   })
        //   return
        // }
        //设置呼叫状态
        this.iscalling = 1;
        this.infobirdclient.outdail({
            accountType: '1', // 主叫类型
            calledDevice: this.currphonenum, // 呼叫phonenum号码
            callType: '0', // 呼叫类型， 0：语音呼叫
        });
      },
      //挂断
      onDropcall(){
        this.iscalling = 0;
        console.log(this.currphonenum)
        this.infobirdclient.dropcall({
            accountType: '1', // 主叫类型
            callType: '0', // 呼叫类型， 0：语音呼叫
            success: function() {
                console.log('ok!');
            },
        });
      },

        //来电接听
        onAnswerCall(){
            var keyword = this.currphonenum;
            this.infobirdclient.answercall({
                callNumber:keyword,// 呼叫类型， 0：语音呼叫
            });
        },

        //静音
        onMute(){
            this.ismute = 1;
            this.infobirdclient.setmute(); //设置静音
        },

        //取消静音
        onCancleMute(){
            this.ismute = 0;
            this.infobirdclient.canclemute(); //取消静音
        },
    

      stopCount() { //停止计时
      clearTimeout(this.agentstatetimer);
    },

    clearAll() { //计时清零
      this.statetime = "00:00:00"
      this.tc = 0
      clearTimeout(this.agentstatetimer);
    },
      //记时
      timedCount(){
      let hour = Math.floor(this.tc / 3600); // 小时数
      if(hour < 10){
        hour = "0" + hour
      }
      let minute = Math.floor(this.tc / 60); // 分钟数
      if(minute >= 60) {
        minute = minute % 60
      }
      if(minute < 10) {
        minute = "0" + minute;
      }
      let second = this.tc % 60;
      if(second < 10)
        second = "0" + second;
        this.statetime = hour + ":" + minute + ":" + second;

        this.tc = this.tc + 1;
        // console.log(this.tc,this.statetime)
        let self = this;
        this.agentstatetimer = setTimeout(function() {
          self.timedCount();
        }, 1000);
      },
  },
  //创建
  created() {
        //注册监听函数onMessage,处理回调数据
        window.addEventListener('onMessage', ({
            detail: {
                data
            }
        }) => {
            console.log(data);
            var datastr = JSON.stringify(data);
            //状态记时
            if(data.type == 'HeartBeatConf'){

            }else{
              this.clearAll()
              this.timedCount()
            }
            //心跳判断
            switch (data.type) {
              case "ConnectConf":
                if(data.result == 0){
                        this.isconnect = 1;
                        this.agentstate = "等待"
                    }
                    break;
                case "DropCallConf":
                  this.iscalling = 0;
                  this.agentstate = "等待"
                  break;
                case "CallReleased":
                  this.iscalling = 0;
                  this.agentstate = "等待"
                    break;
                case "LogoutConf":
                  this.agentstate = "未登录"
                    break;
                case "MakeCallConf":
                  this.agentstate = "呼叫"
                    break;
                case "Established":
                  this.agentstate = "呼叫"
                    break;
                case "Alerting":
                    this.currphonenum = msg['callingDevice']
                    this.iscalling = 2;
                    this.agentstate = "来电"
                    break;
                case "AnswerCallConf":
                    this.iscalling = 1;
                    this.agentstate = "应答"
                    break;    
                case "EstablishedReal":
                  this.agentstate = "通话"
                    break;
                case "HeartBeatConf":
                    if(data.result == 0){
                        this.isconnect = 1
                    }else{
                       this.init()
                    }
                    break;
                case "ForceLogout"://强踢
                  this.init()
                  break;
                default:
                    break;
            }
        });   
        // console.log(res,infobirdclient)
  },
  
}
</script>

<style scoped>
.add-form {
  margin-bottom: 40px;
}

.form-control {
  margin: 20px 0;
}

.form-control label {
  display: block;
}

.form-control input {
  width: 100%;
  height: 40px;
  margin: 5px;
  padding: 3px 7px;
  font-size: 17px;
}

.form-control-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-control-check label {
  flex: 1;
}

.form-control-check input {
  flex: 2;
  height: 20px;
}
.w_title_bg {
    height: 32px;
    background: url(../assets/images/window.png) repeat-x 0 0;
}
.w_title {
    width: auto;
    font-weight: bold;
    font-size: 15px;
    line-height: 34px;
    float: left;
    padding-left: 15px;
    color: #303030;
}


.login-btn {
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-align: center;
    color: #FFF;
    border: none;
    font-family: "Microsoft Yahei";
    cursor: pointer;
    text-decoration: none;
    display: inline;
    letter-spacing: 1px;
    /*margin-left: 10px;*/
}
.bt2:hover {
    background-color: #69c688;
    color: #FFF;
}



.status_module {
    /*border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;*/
    padding-left: 25px;
    cursor: pointer;
    height: 56px;
    max-width: 250px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    float:left;
}
.status_module .circle__indicator {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
    /*width: 14px;*/
    height: 100%;
    margin-right: 5px;
}
.status_module .text {
    font-size: 16px;
}
.status_module .status {
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 3px;
}
.disconnected{
  width: 14px;
    background-image: url(../assets/images/disconnect.png);
}
.connected{
  width: 10px;
    background-image: url(../assets/images/connect.png);
}
.agentstatus{
  font-size: 14px;
    font-weight: 700;
}
#statetime{    
  margin-left: 8px;
    font-size: 14px;
    background-color: #ddd;
    padding: 10px;
}
</style>