文档首页/ 云客服/ 用户接入——网页版客户端集成 (RESTful)/ 代码使用示例-用户接入
更新时间：2023-02-28 GMT+08:00
查看PDF
分享

代码使用示例-用户接入

  1. 当前demo首次进入时，需要输入用户信息，该代码位于/src/layout/UserForm.vue的mouted方法中的initUser方法。 

    //初始化进入聊天时需要处理的用户信息
async initUser() {
    let storage = window.localStorage;
    let userInfo = storage.getItem("sc_chat_user");
    if (userInfo) {
        let data = JSON.parse(userInfo);
        this.$Chat.userName = data.userName;
        this.$Chat.userId = data.userId;
        if (!this.$Chat.messageToken) {
            await this.$Chat.applyToken();
        }
        this.sendConnect();
        return;
    }
    this.dialogTableVisible = true;
}

    方法会从前端的localStorage中获取用户信息，如果没有相关信息，则展示如下的用户信息输入框，需要输入用户昵称。如果存在用户信息，则调用上述鉴权方式中的鉴权，开始准备走接入流程；最后的sendConnect方法就是用户发送接入请求。

  2. 当输入完用户信息并点击确认后，会进入到配置方法。 

    //配置用户信息
async configUserInfo() {
    let storage = window.localStorage;
    let data = {
        userName: this.form.userName,
        userId: "" + new Date().getTime() + this.$Utils.uuid(8, 16),
        userPhone: this.form.userPhone,
        userEmail: this.form.email
    }
    let dataString = JSON.stringify(data);
    storage.setItem("sc_chat_user", dataString);
    this.$Chat.userName = data.userName;
    this.$Chat.userId = data.userId;
    this.dialogTableVisible = false;
    if (!this.$Chat.messageToken) {
        await this.$Chat.applyToken();
    }
    this.sendConnect();
}

  3. 该方法运用一个生成userId的逻辑，将用户信息存入到前端的LocalStorage中，并调用鉴权方式的鉴权方法获取ApiFabric的Token，随后调用sendConnect 发起申请连接到渠道的请求。申请方法如下 

    //发送连接请求
sendConnect(){
    if (!this.$Chat.messageToken){
        this.$alert('接口校验信息错误！')
        return
    }
    let connectionData = {
        channel: 'WEB',
        controlType: "CONNECT",
        mediaType: "TEXT",
        content: "hello",
        sourceType: "CUSTOMER",
        to: this.$Chat.getChannelId(),
        "from": this.$Chat.userId,
        senderNickname: this.$Chat.userName
    }
    this.$Chat.send(connectionData,()=>{
        EventBus.$emit("startPoll");
    })
}

  4. 其中 send方法如下 

    /**
 * apiFabric send发送接口
 *
 * @param data
 * @param callbacks 回调函数，默认为空
 */
 send(data, callbacks = null) {
     if (data['content'].indexOf("data:image")>-1){
         let imgReg = new RegExp(/<img.*?(?:>|\/>)/gi);
         let arr_img = data['content'].match(imgReg, 'g');
         let matchStr = /data:image\/png;base64,(.*?)"/
         let matchArr = data['content'].match(matchStr)
         let requestParam = {
             fileType: 'png',
             fileStream: matchArr[matchArr.length-1],
             channel: 'WEB'
         }
         this.uploadFileStream((resp) => {
             if (resp && resp['objectKey']) {
                 let messageData = {
                     channel: 'WEB',
                     controlType: "CHAT",
                     mediaType: 'FILE_IMAGE',
                     content: resp['objectKey'] + ',png',
                     sourceType: "CUSTOMER",
                     to: this.getChannelId(),
                     "from": this.userId,
                     senderNickname: this.userName
                 };
                 this.send(messageData);
             }
         },requestParam)
         data ['content'] =  data['content'].replaceAll(arr_img[arr_img.length - 1],"");
     }
     if(data ['content'] === "" || data ['content'].length < 1) {
         return;
     }
     axios({
         url: '/apiaccess/ccmessaging/send',
         method: 'POST',
         headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json;charset=UTF-8',
             'Authorization': 'Bearer ' + this.apiToken,
             'x-app-key': this.appKey,
             'ccmessaging-token': this.messageToken
         },
         data: data
     }).then(response => {
         if (response.status === 200) {
             if (data.controlType === 'CONNECT') {
                 this.isChatting = true;
             }
             if (data.controlType === 'DISCONNECT') {
                 this.isChatting = false;
             }
             if (callbacks != null) {
                 callbacks(response.data);
             }
         }
     });
}

    该接口入参为data发送参数，callback回调函数，该方法与发送聊天框中的信息为共用方法，会先校验发送的内容中有无图片信息，如果有，则调用apiFabric的chat聊天中的上传接口，如方法前半段所示。真正调用send的请求为/apiaccess/ccmessaging/send，该方法成功后会执行传入参数的回调函数。在 /src/layout/UserForm.vue中的sendConnect方法中，回调函数为向事件栈EventBus发送一个标识startPoll，即开始轮询获取座席侧发送的消息。

相关文档