- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章IM聊天教程之发送图片/视频/语音/表情由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
经常有朋友问起,如何在im即时通讯中实现发送图片、视频、语音和表情?
为此,小编特意写了一个vue版本的demo,实现了图片视频文件和表情的的发送,参考这个demo源代码,相信你就可以轻松的用uniapp和小程序完成类似的功能.
1、图片/视频/语音发送 。
对于语音、视频和图片的发送,您如果有注意的话,在使用qq或者微信的时候,当有朋友发送图片和视频给您时,收到后,需要等一会儿才能显示出来。就是因为在发送的时候,只发送了文件的路径,您收到后,需要加载才能显示出来。因为当前主流的im包括微信,qq等对于图片和视频的发送,通常的做法都是:
并不会通过网络直接传送源文件,因为对于大文件的传输,会影响消息的即时性.
对于文件的上传,您可以选择直接上传到您自己的服务器,也可以选择上传到各种云服务的对象存储服务,也就是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,原理都是一样的.
2、发送表情 。
表情的发送也是非常简单的,只是对于一些第一次实现表情发送的同学来说,需要一个思路而已.
细心点的朋友,肯定有发现,当我们在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源码:https://gitee.com/goeasy-io/goeasydemo-vue-audiopicturevideo 。
总结 。
到此这篇关于im聊天教程之发送图片/视频/语音/表情的文章就介绍到这了,更多相关im聊天发送视频内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。
最后此篇关于IM聊天教程之发送图片/视频/语音/表情的文章就讲到这里了,如果你想了解更多关于IM聊天教程之发送图片/视频/语音/表情的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我有一个说一些短语的音板应用程序,但是现在我希望能够从男声/女声中改变出来,问题是我不知道该怎么做。任何帮助,将不胜感激。 我正在使用AVFoundation/AVAudioPlayer播放声音。 谢
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 4 年前。
因为我想在后台录制音频,所以我使用了服务..但是我无法在服务中录制音频。 我在 Activity 中尝试了相同的代码,它对我有用。但是如何在输入语音/语音时在后台进行录音,这意味着如果有语音输入就应该
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 6 年前。
我有一个音频流,我会从中提取单词(语音)。因此,例如使用 audio.wav 我会得到 001.wav、002.wav、003.wav 等,其中每个 XXX.wav 是一个词。 我正在寻找一个库或程序
不幸的是,我只能说四种语言,那么如果我知道文本的语言,我如何知道我必须使用哪种 OS X 语音?我在Apple的文档中找不到任何有关它的信息。至少有一张有语音/语言的 table 吗? 最佳答案 您可
有没有办法从命令行使用 MS Speech 实用程序?我可以在 Mac 上完成,但在 Windows XP 上找不到任何引用。 最佳答案 我在这个主题上的 2 美分,命令行单行: 在 Win 上使用
所以我开始了我的不和谐机器人的音乐部分。现在,正如我在上一个问题中所做的那样,这里只是音乐命令的片段:Pastebin #1 在显示 if (msg.member.voiceConnection ==
有谁知道有什么好的 API 或库可以听(语音)文本。我尝试听三种语言的(语音)文本,我想知道最好从哪里开始以及如何开始。我可以对所有三种语言使用通用语音吗?我将使用 eclipse 和 java 作为
首先,我只是一个爱好者,如果这是一个愚蠢的问题或者我太天真了,我很抱歉。 (这也意味着我买不起昂贵的库) 情况是这样的:我正在使用 C#.NET 构建一个简单的语音聊天应用程序(类似于 Ventril
我正在制作一个模块,可以生成和传输语音 IP 数据包。我知道我必须为服务类型字段设置一些值。这个值是多少? 最佳答案 该值应该是x。 关于c - 语音 ip 的服务类型字段集,我们在Stack Ove
有人能帮帮我吗?我使用 SAPI 语音文本,但我不能设置女声,这是代码,它用男声说话,但我想改变它,我想要女声 #include "stdafx.h" using namespace std; voi
我正在寻找一种方法来为一个项目在 Java 中识别预注册的语音命令,但我还没有想出一个好的方法,我研究了快速傅里叶 和处理 wave 文件 的不同方法,但我无法决定我应该如何实现它。 这个想法很简单,
我在 android 的语音识别 API 工作。 我是 Speech Recognition Api 的新手,我的要求是西类牙语语音,并从 Android 的语音识别 API 中获得西类牙语的最佳匹配
我在 Java 中使用一组名为(MaryTTS[实际上还有更多])的库来将 text to speech 转换为该目的,使用以下代码: public class TextToSpeech {
我正在尝试使用webRTC和php作为服务器端来实现单向语音传输。 查看samples ,我无法理解webRTC机制。 在我看来,流程应该是这样的: 调用者和接收者在服务器上注册 接收者监听来电 调用
我的名字是 Joey,我想知道是否有一种在 C++ 中使用语音的方法,如果有人可以给我指出引用资料和书籍,非常感谢...... 最佳答案 你应该看看 Windows Text-To-Speech AP
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我正在使用 Java 语音识别 API - Jarvis,位于 https://github.com/lkuza2/java-speech-api 但是,当我运行应用程序时,出现错误:服务器返回 HT
我们正在做一个需要讲阿拉伯语的项目,我们找到了一个开源工具,Mbrola project , 可以做到这一点。 但是,我还需要一些方法将阿拉伯语文本转换为 SAMPA 语音。那么有人可以帮助我将阿拉伯
我是一名优秀的程序员,十分优秀!