在线聊天系统文件(音视频、文档)以及表情的实时发送

已经实现了以下功能:

2

现在主要对QQ聊天表情的发送,以及音视频文档文件的发送实现做个做个总结记录:

PS(为方便演示 我在此在浏览器A登录a用户,在浏览器B登录b用户,然后a与b相互进行消息发送!!)

一:QQ聊天表情发送的实现:

先展示几张效果图:

1

1

实现过程:

首先引入:

 

然后添加js:在这我用可编辑的div替代了textarea的输入框,因为textarea框内的内容不支持html的页面解析 contenteditable=“true” 这个属性是为了这个div可以编辑,并且输入内容。

 

点击触发send()发送事件后,把文本框的内容添加到消息框后,调用以下方法进行解析:

当然还需要在客户端接收到消息后还需要再调一次empares()这个方法解析表情。

1

API:

1

二:音视频文档文件的实时发送:

效果图:文档发送

2

视频发送:可以全屏播放

2

音频发送:

2

图片发送:
2

网上的实现过程大多是把要发送的文件,进行在线压缩,然后发送,或者对一些较大的文件进行分段发送。

以上实现方式感觉有点麻烦,说说我的实现思路:

一、点击选择文件后,先把文件进行上传,存储在数据库并返回存储路径,然后点击发送的时候只进行路径的传送,这样既可避免连接断开,传送失败!

(备注:对于图片我直接转成base64进行传送了,下载的时候用的返回的url路径)

2

点击上传附件直接调用上面截图这个方法就可以了!

直接用了layerUi 方便又好用:重写一下弹框的样式收到消息提醒:

2

附件:QQ表情js网盘地址:结语:撸了好多jQ算是实现功能了,代码确实写的有点乱了,还需要后续的优化,提出使用重复性较高的代码,降低耦合性,还需要很多地方需要改良。。。

链接:https://pan.baidu.com/s/1ruh2ydg1mufUi5QBtwbM0Q

提取码:3ztf

订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请发表评论。x
()
x