如何實現IM表情、圖片、文件之間的通信？

背景javascript

隨着企業的發展，企業事務管理系統如OA、CRM、PM、KM等將會愈來愈多。企業員工天天須要花大量的時間去各個系統查看與操做相關事務。儘管如此，各項信息仍是沒法第一時間獲得處理，各項工做的執行效率大打折扣。所以，睿信IM產品應運而生，它能夠：java

一、爲企業提供私有的IM系統，防止商業信息泄露web

二、整合企業辦公生態，彙總多端消息通知，防止消息漏接漏審。api

三、便捷企業辦公，在IM中可完成多個辦公系統的操做。簡化辦公流程操做。數組

而通信做爲睿信IM最基本的功能，怎麼少得了表情、圖片、文件之間的通信呢？那麼問題來了，它是如何實現IM表情、圖片、文件之間的通信呢？websocket

睿信IM表情是如何實現的呢：app

在使用IM產品時，咱們接收到的表情不會是一張圖片，而是相似：face[微笑] 、[微笑]、/微笑這樣的字符串，那麼如何將字符串轉換爲對應的表情就是問題的關鍵。毋庸置疑，經過對相應的字符串做匹配替換，從而將對應的表情顯示出來是比較好的一個方法。socket

首先，本地要有一個表情圖片庫，相似睿信IM表情庫：async

本地表情文件的不一樣，對應的處理方法也會不同。有了這樣的一個表情庫文件，接下來就是對相應的表情字符串進行匹配。函數

其次：針對不一樣的表情字符串，須要寫不一樣的匹配規則。如需匹配[微笑]或者/微笑格式的表情，對應的規則以下：

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表情、圖片、文件通信實現基本思路，但願能給你們帶來收穫。