- 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的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在做一个关于代码学院的教程,我在这里收到一个错误,说“看起来你的函数没有返回‘唉,你没有资格获得信用卡。资本主义就是这样残酷。’”当收入参数为 75 时。”但是该字符串在控制台中返回(由于某种原因
我正在阅读 Go 的官方教程,但很难理解 Channel 和 Buffered Channels 之间的区别。教程的链接是 https://tour.golang.org/concurrency/2和
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
作为 iOS 新手,有大量书籍可以满足学习基础知识的需求。现在,我想转向一些高级阅读,例如 OAuth 和 SQLite 以及动态 API 派生的 TableView 等。您可以推荐任何资源吗? 最佳
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 8 年前。
前言 很多同学都知道,我们常见的CTF赛事除了解题赛之外,还有一种赛制叫AWD赛制。在这种赛制下,我们战队会拿到一个或多个服务器。服务器的连接方式通常是SSH链接,并且可能一个战队可能会同时有
Memcached是一个自由开源的,高性能,分布式内存键值对缓存系统 Memcached 是一种基于内存的key-value存储,用来存储小块的任意数据(字符串、对象),这些数据可以是数据库调用、A
Perl 又名实用报表提取语言, 是 Practical Extraction and Report Language 的缩写 Perl 是由 拉里·沃尔(Larry Wall)于19
WSDL 是 Web Services Description Language 的缩写,翻译成中文就是网络服务描述语言 WSDL 是一门基于 XML 的语言,用于描述 Web Services 以
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
我正在寻找解释在 WPF 中创建自定义用户控件的教程。 我想要一个控件,它结合了一个文本 block 、一个文本框和一个启动通用文件打开对话框的按钮。我已经完成了布局,一切都连接好了。它有效,但它是三
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我接近 fourth page of the Django tutorial 的开始看着vote查看,最后是这样的: # Always return an HttpResponseRedirect a
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
是否有任何好的 Qt QSS 教程,或者在某个地方我可以看到样式小部件的示例?如果某处可用,我想要一些完整的引用。除了有关如何设置按钮或某些选项卡样式的小教程外,我找不到任何其他内容。 最佳答案 Qt
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我是一名优秀的程序员,十分优秀!