更新时间:2023-02-28 GMT+08:00
分享

代码使用示例-用户发送消息

以页面的发送按钮为例,对应的方法为/src/layout/ Footer.vue文件的doSend方法。

//聊天框发送消息
doSend() {
    let content = this.$refs && this.$refs.inputBox.innerHTML;
    if (content !== "") {
        let sendContent=this.$Utils.getContext(content)
        if (this.countSubstr(sendContent,'data:image') > 1) {
            this.$message({
                message: '当前不支持发送超过一张图片',
                type: 'warning'
            });
        }
        if(sendContent.length - this.getPastePicLength(content)>=500){
            this.$message({
                message: '消息长度超出最大限制500',
                type: 'warning'
            });
        }else{
            this.dataString = sendContent
            this.$refs.inputBox.innerHTML = "";
            this.sendMessage()
        }
    }
}
该方法会调用sendMessage方法,sendMessage方法会调用webChat.js中的send方法,同用户接入的方法。
//发送消息到座席的方法
sendMessage() {
    let messageData = {
        channel: 'WEB',
        controlType: "CHAT",
        mediaType: "TEXT",
        content: this.dataString,
        sourceType: "CUSTOMER",
        to: this.$Chat.getChannelId(),
        "from": this.$Chat.userId,
        senderNickname: this.$Chat.userName
    };
    this.$Chat.send(messageData);
    messageData["pushType"] = 0;
    let msg = {
        avatar: "zph",
        text: this.$Utils.textChangeToImage(this.dataString) ,
        type: messageData["pushType"],
        time: this.$Utils.getDateString(),
        float: "right",
    };
    EventBus.$emit("pushInRecords", JSON.stringify(msg));
    this.dataString = '';
},

EventBus.$emit("pushInRecords", JSON.stringify(msg)); 为向事件栈 EventBus发送消息推入到聊天框的事件,对应的监听方法在MainContent.vue的mouted方法中。
//用户发消息
EventBus.$on("pushInRecords", (messageData) =>
    this.pushMessageInRecord(messageData)
);
 
//处理消息发送到聊天框
pushMessageInRecord(message) {
    let data = JSON.parse(message);
    if (data['text'].indexOf("data:image/png;base64") > -1) {
        let b = /<img src="data:image\/png;base64/g;
        data['text'] = data['text'].replaceAll(b,"<img style =\"max-width:350px;\" onclick='window.showBgImg(this)' src=\"data:image/png;base64")
    }
    this.records.push(data);
    let div = this.$refs.box;
    setTimeout(() => {
        div.scrollTop = div.scrollHeight;
    }, 200);
},
用户发送多媒体文件的方法参考Footer.vue的uploadFile方法。
//文件 图片上传
uploadFile(type) {
    if (type === 'img') {
        this.$refs.imageInput.click();
    }
    if (type === 'file') {
        this.$refs.fileInput.click();
    }
}
该方法会调用getFile。
//文件 图片上传后处理
getFile(event) {
    const files = event.target.files;
    let size = files[0].size;
    let filename = files[0].name;
    const fileReader = new FileReader()
    let index = filename.lastIndexOf(".");
    let index2 = filename.length;
    let fileType = filename.substr(index + 1, index2);
    let sendFileType =  this.fileType[fileType];
    if (!sendFileType){
        this.$message({
            message: '当前文件类型不支持',
            type: 'warning'
        });
        return;
    }
    //内置方法new FileReader()   读取文件
    fileReader.addEventListener('load', () => {
        let fileData = fileReader.result;
        let fileBase64DataString = fileData.split(",")[1];
 
        let requestParam = {
            fileType: sendFileType,
            fileStream: fileBase64DataString,
            channel: 'WEB'
        }
        let that = this;
        //回调函数
        let callbacks = function (data) {
            event.target.value = "";
            if (data && data['objectKey']) {
                let messageData = {
                    channel: 'WEB',
                    controlType: "CHAT",
                    mediaType: that.mediaType[sendFileType],
                    content: data['objectKey'] + ',' + sendFileType,
                    sourceType: "CUSTOMER",
                    to: that.$Chat.getChannelId(),
                    "from": that.$Chat.userId,
                    senderNickname: that.$Chat.userName
                };
                if ('FILE' === that.mediaType[sendFileType]) {
                    messageData['content'] = filename.substr(0, index ) + ','
                    + size + ','
                        + data['objectKey'] + ','
                        + sendFileType
                }
                that.$Chat.send(messageData);
                let header = fileData.split(",")[0];
                let bytes = window.atob(fileBase64DataString);
                let arrayBuffer = new ArrayBuffer(bytes.length);
                let uint8Array = new Uint8Array(arrayBuffer);
                for (let i = 0; i < bytes.length; i++) {
                    uint8Array[i] = bytes.charCodeAt(i);
                }
                let blobFile = new Blob([uint8Array], {
                    type: header.match(/(.*?)/)[1]
                });
                let objectUrl = window.URL.createObjectURL(blobFile);
                let fileSize = size;
                if (fileSize < 1024 * 1024) {
                    fileSize = (fileSize / 1024).toFixed(2) + "KB";
                } else {
                    fileSize = (fileSize / 1024 / 1024).toFixed(2) + "MB";
                }
                let messageInRecords = {
                    avatar: "zph",
                    text: objectUrl,
                    type: that.showType[sendFileType],
                    time: that.$Utils.getDateString(),
                    float: "right-media",
                    fileName:filename,
                    fileType:sendFileType,
                    fileSize:fileSize
                }
                if (that.showType[sendFileType] === 1) {
                    let imgList = [];
                    imgList.push(objectUrl);
                    messageInRecords["imgList"] = imgList;
                }
                EventBus.$emit("pushInRecords", JSON.stringify(messageInRecords));
            }
        }
        this.$Chat.uploadFileStream(callbacks, requestParam);
 
    })
    fileReader.readAsDataURL(files[0])
}

在获取文件后,会调用uploadFileStream接口去发送多媒体文件到客服座席侧。

相关文档