濮阳杆衣贸易有限公司

主頁 > 知識(shí)庫 > IM聊天教程之發(fā)送圖片/視頻/語音/表情

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

熱門標(biāo)簽:銀川語音外呼系統(tǒng)中心 suitecrm 地圖標(biāo)注 高德地圖標(biāo)注常顯 臨沂ai電銷機(jī)器人招商 華創(chuàng)e路航彩票銷售點(diǎn)地圖標(biāo)注 鶴壁外呼系統(tǒng)公司 外呼系統(tǒng)號(hào)顯示星號(hào)怎么看 承德地圖標(biāo)注公司收費(fèi) 揭陽電腦外呼系統(tǒng)公司

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

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

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

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

  • 上傳文件到文件服務(wù)器
  • 推送文件路徑
  • 收到文件路徑
  • 加載文件

并不會(huì)通過網(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ù)來實(shí)現(xiàn)圖片和視頻的發(fā)送。

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

二、發(fā)送表情

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

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

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

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

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

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

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

第一步、定義表情

定義一個(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)的表情,就在頁面上展示對(duì)應(yīng)的表情圖片,如果找不到,就是一個(gè)普通的文本信息。

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

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

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

總結(jié)

到此這篇關(guān)于IM聊天教程之發(fā)送圖片/視頻/語音/表情的文章就介紹到這了,更多相關(guān)IM聊天發(fā)送視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:
  • Websocket IM聊天教程 教你用GoEasy快速實(shí)現(xiàn)IM聊天
  • 使用Python AIML搭建聊天機(jī)器人的方法示例
  • Android中基于XMPP協(xié)議實(shí)現(xiàn)IM聊天程序與多人聊天室
  • 基于Python如何使用AIML搭建聊天機(jī)器人
  • php版小黃雞simsimi聊天機(jī)器人接口分享
  • JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序

標(biāo)簽:棗莊 三沙 咸寧 許昌 萊蕪 七臺(tái)河 忻州 汕尾

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《IM聊天教程之發(fā)送圖片/視頻/語音/表情》,本文關(guān)鍵詞  聊天,教程,之,發(fā)送,圖片,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《IM聊天教程之發(fā)送圖片/視頻/語音/表情》相關(guān)的同類信息!
  • 本頁收集關(guān)于IM聊天教程之發(fā)送圖片/視頻/語音/表情的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    顺昌县| 南溪县| 鱼台县| 达拉特旗| 克东县| 上犹县| 新密市| 武夷山市| 松江区| 高淳县| 墨脱县| 唐海县| 陆良县| 霍林郭勒市| 宁津县| 三原县| 塘沽区| 吉安市| 和田县| 北碚区| 黄龙县| 澄城县| 化德县| 永和县| 邢台县| 米泉市| 铜梁县| 扶绥县| 潢川县| 昆山市| 正定县| 孝感市| 林口县| 临西县| 夹江县| 辽源市| 松桃| 迁安市| 鹤峰县| 沐川县| 巴林右旗|