正文

im聊天教程:发送图片/视频/语音/表情(代码片段)

author  author  2023-03-17  268

关键词：

经常有朋友问起，如何在IM即时通讯中实现发送图片、视频、语音和表情？

为此，小编特意写了一个vue版本的Demo，实现了图片视频文件和表情的的发送，参考这个Demo源代码，相信你就可以轻松的用Uniapp和小程序完成类似的功能。

技术图片

本文的Demo全套的源码已经开源在码云上，供大家clone或者下载：https://gitee.com/goeasy-io/GoEasyDemo-vue-AudioPictureVideo

一、图片/视频/语音发送

对于语音、视频和图片的发送，您如果有注意的话，在使用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聊天教程:发送图片/视频/语音/表情

经常有朋友问起，如何在IM即时通讯中实现发送图片、视频、语音和表情？为此，小编特意写了一个vue版本的Demo，实现了图片视频文件和表情的的发送，参考这个Demo源代码，相信你就可以轻松的用Uniapp和... 查看详情

网页聊天室发送表情包(代码片段)

前言本示例使用的是eclipse，其他编辑器也一样。将资源放到相应目录即可。使用的都是html/css/js等，所以后端使用什么语言都没有关系1.layui的富文本编辑器发送表情在layui官网（ http://www.layui.com）下载layui的包 ... 查看详情

html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

之前有开发过一个h5微直播项目，当时里面也用到过聊天模块部分，今天就在之前聊天部分的基础上重新抽离模块，开发了这个h5趣聊项目，功能效果比较类似微信聊天界面。采用html5+css3+Zepto+swiper+wcPop+flex等技术融合开发，实现... 查看详情

语音一对一聊天(代码片段)

功能简介:　　不需要借助百度的语音SDK即可完成，只需要通过前端语言利用页面获取用户语音直接将语音数据发送给后端保存，之后通过条件判断再将保存好的语言文件地址发送给目标用户，借此即可完成用户之间的单点通信fr... 查看详情

如何在与 agora RTC WEB 视频聊天期间发送消息（呼叫反应）

】如何在与agoraRTCWEB视频聊天期间发送消息（呼叫反应）【英文标题】：Howtosendmessages(callreactions)duringvideochatwithagoraRTCWEB【发布时间】：2021-04-1608:45:58【问题描述】：我正在尝试使用AgoraRtcWEBapi进行语音/视频聊天。这将只是1:1通... 查看详情

基于融云的im通讯(代码片段)

...择了融云IM通讯，项目要实现的功能这要是单聊、群聊、聊天室、发送的内容为文字、图片、文件、语音通话与视频通话。听起来挺复杂的我们一起来实现一下，先从一个demo开始，文章会一直维护下去，知道项目本期项目开发结... 查看详情

vue实现web端多人语音视频聊天(代码片段)

1多人语音聊天功能介绍本文展示了如何使用ZEGOExpressSDK构造多人音视频通话场景，即实现多对多实时音视频聊天互动。用户可在房间内与其余用户进行实时音视频通话，互相推拉流。该场景可用于多人实时音视频聊天、... 查看详情

微信聊天框测试用例

微信聊天框测试用例功能测试性能测试兼容性测试界面测试场景组合测试微信聊天框的主要功能就是发送消息和接收别人发过来的消息。消息的分类：纯文字，图片，文件，表情，语音、视频，文字+表... 查看详情

腾讯云通讯im接入小程序（二）收发消息

参考技术A*发送消息：1、发送普通文字消息。2、发送表情。3、发送图片。4、发送语言。(常用的就这)*接收消息：文字、表情、图片、语言等包括最近七天之内的历史消息等查看详情

java图片或视频生成gif动图，发送微信(代码片段)

...前言GIF简介代码生成图片合成GIF自定义GIF动图视频生成GIF发送微信小结前言别人的博客文章中有动态显示这是怎么做到的呢？别人的微信发送的表情动态为什么是自己鬼畜视频？这些都是别人做到的，本文就是让自己... 查看详情

jsp聊天室实现发送表情功能

我在做jsp聊天室，想在在线聊天中添加发送表情的功能，不知怎么搞，请大家多多帮忙啊。。。思路我有点懂了，最好能不能给我具体的代码啊。。。我实在不会写代码，很急用啊！！！悬赏积分不多，意思下啊：）<inputtype=&... 查看详情

flutter上线项目实战——环信客服插件(代码片段)

...里包含的同kefu-android-demo、kefu-ios-demo一样的功能:android:选图片、拍照片、选视频、发文件、发语音、文字、表情ios:选照片、拍照片、拍视频、发定位、发语音、文字、表情3.语音、视频通话尝试均不可用2.Setup//环信自带的uiflutter... 查看详情

js聊天项目-删除输入聊天的emoji表情(代码片段)

Js聊天软件-删除输入文字中emoji表情的处理1.问题描述当我们点击右下角的删除键，希望删去这个表情时，会出现这种情况这种情况是，当我们点击删除按钮时，就删除最后一个字符，但emoji表情占位可不止一个字符，但如果删... 查看详情

微信小程序-模仿绘制聊天界面(代码片段)

参考文章1、小程序模仿微信聊天界面2、微信小程序实现仿微信聊天界面(各种细节处理)3、微信小程序之页面中关于聊天框三角形的制作和使用4、仿微信聊天记录时间显示5、微信小程序-同时获取麦克风、相机权限、获取多个权... 查看详情

html5仿微信聊天界面微信朋友圈实例

这几天使用H5开发了一个仿微信聊天前端界面，尤其微信底部编辑器那块处理的很好，使用HTML5来开发，虽说功能效果并没有微信那么全，但是也相当不错了，可以发送消息、表情，发送的消息自动回滚定位到底部，另外可以对... 查看详情

自己搞个聊天工具，爽！(代码片段)

...分享各领域优质开源项目。微信或QQ是我们大家很常用的聊天工具，其实还有很多即时通讯的地方，比如某宝的客服啥的。说起这个开源君想起一个故事。朋友小C有一次和女朋友吵架，结果女朋友把他微信，QQ全... 查看详情

laravel+swoole打造im简易聊天室(代码片段)

Laravel+Swoole打造IM简易聊天室应用场景：实现简单的即时消息聊天室(一)扩展安装(二)webSocket服务端代码(三)客户端实现应用场景：实现简单的即时消息聊天室(一)扩展安装peclinstallswoole安装完成后可以通过以下命令检测Sw... 查看详情