如何实现IM表情、图片、文件之间的通讯？

背景

随着企业的发展，企业事务管理系统如OA、CRM、PM、KM等将会越来越多。企业员工每天需要花大量的时间去各个系统查看与操作相关事务。尽管如此，各项信息还是无法第一时间得到处理，各项工作的执行效率大打折扣。因此，睿信IM产品应运而生，它可以：

1、为企业提供私有的IM系统，防止商业信息泄露

2、整合企业办公生态，汇总多端消息通知，防止消息漏接漏审。

3、便捷企业办公，在IM中可完成多个办公系统的操作。简化办公流程操作。

而通讯作为睿信IM最基本的功能，怎么少得了表情、图片、文件之间的通讯呢？那么问题来了，它是如何实现IM表情、图片、文件之间的通讯呢？

 

睿信IM表情是如何实现的呢：

在使用IM产品时，我们接收到的表情不会是一张图片，而是类似：face[微笑] 、[微笑]、/微笑这样的字符串，那么如何将字符串转换为对应的表情就是问题的关键。毋庸置疑，通过对相应的字符串作匹配替换，从而将对应的表情显示出来是比较好的一个方法。

首先，本地要有一个表情图片库，类似 睿信IM表情库：

 

本地表情文件的不同，对应的处理方法也会不一样。 有了这样的一个表情库文件，接下来就是对相应的表情字符串进行匹配。

其次：针对不同的表情字符串，需要写不同的匹配规则。如需匹配[微笑]或者/微笑格式的表情，对应的规则如下：

A.循环遍历，用字符串赋予一个图片路径，最后用来发送的表情实际上是 face+下面的字符串标识，如 face[微笑]：

private insertFace(item: any) {
    this.sendMessageValue = this.sendMessageValue + "face" + item;
    this.showFace = false;
}

export let faceUtils = {
    alt: [
        "[微笑]", "[得意]", "[泪]", "[哈哈]", "[色]", "[伤心]",
        "[害羞]", "[疑问]", "[闭嘴]", "[怒]", "[偷笑]", "[困]",
        "[汗]", "[吐血]", "[拜拜]", "[笑哭]", "[晕]", "[嘘]",
        "[衰]", "[敲打]", "[可怜]", "[赞]", "[差]", "[握手]",
        "[耶]", "[抱拳]", "[OK]", "[抱抱]", "[玫瑰]", "[晚安]"
    ],
      faces: function () {
        let self = this;
        let arr: any = {};
        for (let i = 0; i < self.alt.length; i++) {
            arr[self.alt[i]] = "./static/newFace/" + i + ".png";
        }
        return arr;
    }
};

B.上一步的每一个字符串（如face[微笑]）都有一个与之对应的图片路径（如 ”./static/newFace/0.png”），接下来把每个图片路径放到img表情里，实现表情的渲染(如下图)：

<ul class="faces">
    <li v-for="(item, index) in faceList" :key="index">
        <img :src="faceMap[item]" :alt="item" :title="item" @click="insertFace(item)"/>
    </li>
</ul>

data() {
    return {
        faceList: faceUtils.alt,
        faceMap: faceUtils.faces()
    };
},
methods: {
    insertFace: function(item) {
        this.$emit("insertFace", item);
    }
}

 

 

C.当接收方收到表情字符串（如face[微笑]）时，对应的要进行转译，以字符串标识face[]进行替换为对应的img标签（即表情）：

let fa = faceUtils.faces();
content = content
    .replace(/face\[([^\s\\[\]]+?)]/g, function (face: any) {
    // 转义表情
    let alt = face.replace(/^face/g, "");
    return ('<img class="faceImg" width="28" alt="face' + alt + '" src="' + fa[alt] + '">');
})

睿信IM图片及文件是如何实现的呢：

图片及文件发送，通过input标签选择图片或文件

<input type="file" class="fileInput" ref="fileInput" title="发送图片"
       @change="imageChange" placeholder="上传文件" accept="image/*" />
<input type="file" class="fileUpload" ref="fileUpload" title="发送文件"
       @change="fileChange" placeholder="上传文件" accept />

 

接着调用文件发送接口，通过表单的数据格式向后台发送数据，回调函数接收图片或文件路径，

let formData = new FormData();
formData.append("channel_id", this.chatObj.channel_id);
formData.append("user_id", Common.getIMUserIDFromCookie());
formData.append("file", this.fileObj);
apiIMServices.filePost(formData, (progress) => {
    this.uploadProgress = progress;
}).then((res: any) => {
    Popup.closeAll();
    console.log(res);
    this.$store.commit('setFilePath',{
        id: res.metadata.files[0].id,
        filePath: this.fileObj.path,
        exist: true
    });
    this.ifImg = false;
}).catch(error => {
    Popup.closeAll();
    console.log(error);
    Popup.errorMsg(error.errorMsg);
});

 

对方接收到对应的图片或文件，会有如下websocket推送

 

接收方通过字段image和otherFile判断它是图片还是文件，然后把一整个文件信息数组（上图metadata里的files）传递给文件组件处理：

组件接收到文件files信息，通过id去获取文件链接路径，然后把链接FileLinkUrl传递到img标签，即可完成图片的渲染显示：

 

private async getFileLink() {
    this.FileLinkUrl =  await apiIMServices.getFileLink(this.file.id);
    let that: any = this;
    that.filelinkUrls[this.file.id] = this.FileLinkUrl;
    this.$store.commit('setFilelinkUrls',that.filelinkUrls);
}

<img class="image-item" :src="FileLinkUrl ? FileLinkUrl.link: ''" alt />

同理：把链接FileLinkUrl传递到a标签，即可完成文件的下载：

<a class="file-download" v-if="FileLinkUrl" :href="FileLinkUrl ? FileLinkUrl.link : 'javascript:;'" >下载</a>

总结

总体来说将字符串转换为对应的图片是表情实现的关键，而图片和文件的通讯则依赖于后台接口提供的文件链接，将文件链接嵌入对应的标签从而转变为对应的图片或文件，再通过点击文件的标签链接从而实现文件下载功能。以上是IM表情、图片、文件通讯实现基本思路，希望能给大家带来收获。