IM 聊天教程:傳送圖片 / 影片 / 語音 / 表情

GoEasy發表於2020-05-19

經常有朋友問起,如何在IM即時通訊中實現傳送圖片、影片、語音和表情?

為此,小編特意寫了一個vue版本的Demo,實現了圖片影片檔案和表情的的傳送,參考這個Demo原始碼,相信你就可以輕鬆的用Uniapp和小程式完成類似的功能。

GoEasy已推出全新的IM SDK,原生支援傳送圖片/影片/語音/表情,並提供相關的demo,這裡是文件地址:www.goeasy.io/cn/im/index.html

演示Demo

一、圖片/影片/語音傳送

對於語音、影片和圖片的傳送,您如果有注意的話,在使用QQ或者微信的時候,當有朋友傳送圖片和影片給您時,收到後,需要等一會兒才能顯示出來。就是因為在傳送的時候,只傳送了檔案的路徑,您收到後,需要載入才能顯示出來。因為當前主流的IM包括微信,QQ等對於圖片和影片的傳送,通常的做法都是:

  1. 上傳檔案到檔案伺服器
  2. 推送檔案路徑
  3. 收到檔案路徑
  4. 載入檔案

並不會透過網路直接傳送原始檔,因為對於大檔案的傳輸,會影響訊息的即時性。

對於檔案的上傳,您可以選擇直接上傳到您自己的伺服器,也可以選擇上傳到各種雲服務的物件儲存服務,也就是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;
};

雲服務的OSS具有更好的穩定性和高可用性,上傳的速度也有保證,另外也可以和CDN配合,所以我們建議用GoEasy配合OSS服務來實現圖片和影片的傳送。

在本文的原始碼裡,選擇了使用阿里雲的OSS作為檔案上傳伺服器,您也可以切換為您自己實現的檔案上傳伺服器,或者選擇其他雲服務的OSS,原理都是一樣的。

二、傳送表情

表情的傳送也是非常簡單的,只是對於一些第一次實現表情傳送的同學來說,需要一個思路而已。

細心點的朋友,肯定有發現,當我們在QQ上聊天的時候,我們輸入一個反斜槓+“cy”, 就像這樣:/cy ,QQ就會立即顯示為一個呲牙的表情,就像下圖一樣:

表情

哈哈哈,相信你已經心裡已經明白了十之八九了,對吧?

沒錯,表情在傳送的過程中其實就是發一個像“/cy”這樣定義好的的字串,在對方收到後“翻譯”成表情而已。

那為什麼不直接發圖片,而要進行這麼複雜的“翻譯”呢?

因為字串比圖片更小,傳送的速度更快,使用者體驗更好。一個系統中的使用者成千上萬,用字串可以節約大量的頻寬,節約系統資源。

原理講明白了,我們就開始幹活兒吧:

第一步、定義表情

定義一個key value的物件,key作為表情標籤,value則為每個表情標籤對應的圖片:

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

然後畫一個表情選擇的介面:

表情列表

第二步、選擇表情

為每個圖片的onclick事件中傳入這個表情的字串標籤,當使用者點選的時候,將表情的標籤寫入輸入框,就成為了一個普通的字串。在傳送的時候,傳送的其實就是這個表情的標籤,也就是一個字串。

<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>

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

當對方收到一個字串後,跟第一步定義的key-value列表去匹配,如果能找到對應的表情,就在頁面上展示對應的表情圖片,如果找不到,就是一個普通的文字資訊。

原理講清楚了後,具體實現是不是很簡單了?

參考我們提供的Demo原始碼,相信你很快就能掌握實現方法。

Demo原始碼:gitee.com/goeasy-io/GoEasyDemo-vue...

GoEasy系列教程:

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章