IM聊天教程:发送图片/视频/语音/表情
经常有朋友问起,如何在IM即时通讯中实现发送图片、视频、语音和表情?
为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Uniapp和小程序完成类似的功能。
一、图片/视频/语音发送
对于语音、视频和图片的发送,您如果有注意的话,在使用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,原理都是一样的。
二、发送表情
表情的发送也是非常简单的,只是对于一些第一次实现表情发送的同学来说,需要一个思路而已。
细心点的朋友,肯定有发现,当我们在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聊天教程:发送图片/视频/语音/表情的更多相关文章
- [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收(转)
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是怎样在微信公众平台使用QQ表情, ...
- [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
- 用Python教你微信防撤回(文本、图片、语音、视频、名片等...)
大家在使用微信过程中,有时候消息还没看到,就被撤回了.毕竟好奇心大家都有,明知到消息被撤回了,就更想去看一下是什么内容心里想着万一是女神给我表白了呢.. 今天就用Python来做个微信防撤回的小功能. ...
- 【小梅哥FPGA进阶教程】串口发送图片数据到SRAM在TFT屏上显示
十五.串口发送图片数据到SRAM在TFT屏上显示 之前分享过rom存储图片数据在TFT屏上显示,该方法只能显示小点的图片,如果想显示TFT屏幕大小的图片上述方法rom内存大小不够.小梅哥给了个方案,利 ...
- weChat聊天发送图片带有小尖角的实现
weChat聊天发送图片带有小尖角的实现 1.#import <UIKit/UIKit.h>2.3.@interface JKShapeImage : UIView4.5.@propert ...
- 在类似qq或者微信聊天中。如何根据不同的手机发送图片
原文:在类似qq或者微信聊天中.如何根据不同的手机发送图片 前一段时间,公司自己要求做多客服开发,但是对于发送图片这一块,当时很苦恼,我用自己的手机(米2)测试,不管是本地,还是云相册,最新照片. ...
- 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...
- [Asp.net 开发系列之SignalR篇]专题四:使用SignalR实现发送图片
一.引言 在前一篇博文已经介绍了如何使用SignalR来实现聊天室的功能,在这篇文章中,将实现如何使用SignalR来实现发送图片的功能. 二.实现发送图片的思路 我还是按照之前的方式来讲述这篇文章, ...
- 查看图片插件--Viewer(类似于qq和微信聊天 的查看图片)
Viewer的github地址:https://github.com/fengyuanchen/viewer 下载该插件(在文件夹dist里面) 具有参考价值的几个网站:http://www.dow ...
随机推荐
- 快速从零开始安装Laravel5.2教程
前面 本文默认你Win电脑什么都没装,也就是从零开始安装Laravel,并且环境都由我来指定分配哈! 环境 首先搭建运行环境,先到 PhpStudy官网 下载PhpStudy的Windows版本.然后 ...
- Python之小型信息管理系统
#Author:msq #Time:2019/11/16 import re import os filename = "person.txt" def menu(): #输出菜单 ...
- thinkphp5 --接口实例
这是我自己构思的案例,写的不好请多多指教. 后台接口的代码: public function index() { $res = array(); header("Access-Control ...
- PHPSTORM快捷键On Mac
Command+Shift+O快捷定位文件,需要输入文件名称 Command+鼠标左键点击方法,快捷转到方法实现 Command+Option+方向左键,快捷返回上一步跳转方法之前 Shift+F6统 ...
- TIME_WAIT的危害与避免
time-wait的产生: 在TCP连接中四次挥手关闭连接时,主动关闭连接的一方(上图中时Client)会在发送最后一条ACK报文后维持一段时长2MSL(MSL指的是数据包在网络中的最大生存时间)的等 ...
- PostgreSQL 10.0 preview 性能增强 - 分区表性能增强(plan阶段加速)
标签 PostgreSQL , 10.0 , 分区表 , 子表 , 元信息搜索性能增强 背景 PostgreSQL 10.0 增强了分区表的子表搜索性能,对于涉及分区表包含子表特别多的QUERY,可以 ...
- webpack打包多入口配置
在它的entry入口设置多文件入口即可,例: entry: { core: './src/core.js', design: './src/design.js' }, 单一出口输出: output: ...
- 「每天一道面试题」Java类的生命周期包括哪几个阶段?
一个Java类被加载到虚拟机中,它的生命周期才算开始,直到被从内存中卸载,它的生命周期才算结束.从开始到结束,它的整个生命周期包括加载.验证.准备.解析.初始化.使用和卸载7个阶段,其中验证.准备和解 ...
- 一个页面从输入url到页面加载完成究竟经历了些什么
本人经参考谢希仁著<计算机网络(第 5版)>.<HTTP权威指南>和网络上关于浏览器渲染原理的介绍,结合自己理解,整理出以下结论,如有不正确或者不完善之处欢迎指正: 当用户在浏 ...
- 从零搭建Prometheus监控报警系统
什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统 ...