# 代码使用示例-用户接入
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中获取用户信息，如果没有相关信息，则展示如下的用户信息输入框，需要输入用户昵称。如果存在用户信息，则调用上述[鉴权方式](https://support.huaweicloud.com/devg-webdemo-cec/cec_05_1114.html)中的鉴权，开始准备走接入流程；最后的sendConnect方法就是用户发送接入请求。
   ![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001310056213.png)
   
   
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中，并调用[鉴权方式](https://support.huaweicloud.com/devg-webdemo-cec/cec_05_1114.html)的鉴权方法获取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，即开始轮询获取座席侧发送的消息。