IM聊天教程:發(fā)送圖片/視頻/語(yǔ)音/表情

經(jīng)常有朋友問(wèn)起，如何在IM即時(shí)通訊中實(shí)現(xiàn)發(fā)送圖片、視頻、語(yǔ)音和表情？

為此，小編特意寫了一個(gè)vue版本的Demo，實(shí)現(xiàn)了圖片視頻文件和表情的的發(fā)送，參考這個(gè)Demo源代碼，相信你就可以輕松的用Uniapp和小程序完成類似的功能。

本文的Demo全套的源碼已經(jīng)開(kāi)源在碼云上，供大家clone或者下載： https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo

一、圖片/視頻/語(yǔ)音發(fā)送

對(duì)于語(yǔ)音、視頻和圖片的發(fā)送，您如果有注意的話，在使用QQ或者微信的時(shí)候，當(dāng)有朋友發(fā)送圖片和視頻給您時(shí)，收到后，需要等一會(huì)兒才能顯示出來(lái)。就是因?yàn)樵诎l(fā)送的時(shí)候，只發(fā)送了文件的路徑，您收到后，需要加載才能顯示出來(lái)。因?yàn)楫?dāng)前主流的IM包括微信，QQ等對(duì)于圖片和視頻的發(fā)送，通常的做法都是：

1. 上傳文件到文件服務(wù)器
2. 推送文件路徑
3. 收到文件路徑
4. 加載文件

并不會(huì)通過(guò)網(wǎng)絡(luò)直接傳送源文件，因?yàn)閷?duì)于大文件的傳輸，會(huì)影響消息的即時(shí)性。

對(duì)于文件的上傳，您可以選擇直接上傳到您自己的服務(wù)器，也可以選擇上傳到各種云服務(wù)的對(duì)象存儲(chǔ)服務(wù)，也就是OSS上。

參考源碼:

DemoService.prototype.sendFileMessage = function (type,content) {
    let uploadResult = restapi.uploadFile(content);
    let message = new Message(type, uploadResult.url);
    uploadResult.promise.then(() => {
        this.publish(message);
    },() =>  {
        var error = new Message(MessageType.TEXT, "文件上傳失敗.");
        this.messages.unshift(error)
    });
    return uploadResult.promise;
};

云服務(wù)的OSS具有更好的穩(wěn)定性和高可用性，上傳的速度也有保證，另外也可以和CDN配合，所以我們建議用GoEasy配合OSS服務(wù)來(lái)實(shí)現(xiàn)圖片和視頻的發(fā)送。

在本文的源碼里，選擇了使用阿里云的OSS作為文件上傳服務(wù)器，您也可以切換為您自己實(shí)現(xiàn)的文件上傳服務(wù)器，或者選擇其他云服務(wù)的OSS，原理都是一樣的。

二、發(fā)送表情

表情的發(fā)送也是非常簡(jiǎn)單的，只是對(duì)于一些第一次實(shí)現(xiàn)表情發(fā)送的同學(xué)來(lái)說(shuō)，需要一個(gè)思路而已。

細(xì)心點(diǎn)的朋友，肯定有發(fā)現(xiàn)，當(dāng)我們?cè)赒Q上聊天的時(shí)候，我們輸入一個(gè)反斜杠+“cy”， 就像這樣：/cy ，QQ就會(huì)立即顯示為一個(gè)呲牙的表情，就像下圖一樣：

哈哈哈，相信你已經(jīng)心里已經(jīng)明白了十之八九了，對(duì)吧？

沒(méi)錯(cuò)，表情在發(fā)送的過(guò)程中其實(shí)就是發(fā)一個(gè)像“/cy”這樣定義好的的字符串，在對(duì)方收到后“翻譯”成表情而已。

那為什么不直接發(fā)圖片，而要進(jìn)行這么復(fù)雜的“翻譯”呢？

因?yàn)樽址葓D片更小，發(fā)送的速度更快，用戶體驗(yàn)更好。一個(gè)系統(tǒng)中的用戶成千上萬(wàn)，用字符串可以節(jié)約大量的帶寬，節(jié)約系統(tǒng)資源。

原理講明白了，我們就開(kāi)始干活兒吧：

第一步、定義表情

定義一個(gè)key value的對(duì)象，key作為表情標(biāo)簽，value則為每個(gè)表情標(biāo)簽對(duì)應(yīng)的圖片：

let expressions = {
    "[risus]": './images/risus.png',
    "[kiss]": './images/kiss.png',
    "[cry]": './images/cry.png',
    "[die]": './images/die.png',
    "[anger]": './images/anger.png',
}

然后畫一個(gè)表情選擇的界面：

第二步、選擇表情

為每個(gè)圖片的onclick事件中傳入這個(gè)表情的字符串標(biāo)簽，當(dāng)用戶點(diǎn)擊的時(shí)候，將表情的標(biāo)簽寫入輸入框，就成為了一個(gè)普通的字符串。在發(fā)送的時(shí)候，發(fā)送的其實(shí)就是這個(gè)表情的標(biāo)簽，也就是一個(gè)字符串。

<div class="goeasy-expression">
            <div :class="[appearanceClass, 'goeasy-appearance']" @click="show = true">{{text}}</div>
            <div class="expression-container" v-show="show">
                <div class="expression-icon-content">
                    <div class="expression-icon__item"
                         v-for="expression in list"
                         :key="expression.id"
                         @click="selectExpression(expression)">
                        <img :src="expressions[expression.tag]">
                    </div>
                </div>
                <div class="close-expression" @click="show = false"></div>
            </div>
        </div>

第三步、收到表情和展示表情

當(dāng)對(duì)方收到一個(gè)字符串后，跟第一步定義的key-value列表去匹配，如果能找到對(duì)應(yīng)的表情，就在頁(yè)面上展示對(duì)應(yīng)的表情圖片，如果找不到，就是一個(gè)普通的文本信息。

原理講清楚了后，具體實(shí)現(xiàn)是不是很簡(jiǎn)單了？

參考我們提供的Demo源代碼，相信你很快就能掌握實(shí)現(xiàn)方法。

Demo源碼： https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo