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

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

 

已经实现了以下功能：

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

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

 

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

先展示几张效果图：

 

 

 

实现过程：

首先引入：

"lib/css/jquery.mCustomScrollbar.min.css"/> "css/jquery.emoji.css"/> "http://cdn.bootcss.com/jquery/1.11.3/jquery.js"> "lib/script/jquery.mousewheel-3.0.6.min.js"> "lib/script/jquery.mCustomScrollbar.min.js"> "js/jquery.emoji.js">

 

 在这我用可编辑的div替代了textarea的输入框，因为textarea框内的内容不支持html的页面解析contenteditable="true" 这个属性是为了这个div可以编辑，并且输入内容。

"true"tabindex="0"id="text"style="width:100%;height:50%;overflow:auto;overflow-x:hidden;" > "btn-send01"  οnclick="send()">发送(S)

然后添加js：

$(function() {        $("#text").emoji({                button: "#emoji",                showTab: true,                animation: 'slide',                icons: [{                    name: "QQ表情",                    path: "/static/dist/img/qq/",                    maxNum: 91,                    excludeNums: [41, 45, 54],                    file: ".gif",                    placeholder: "#qq_{alias}#"                }],            }); }）

 

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

function emparse(){     $(".panel").emojiParse({//这个panel是文本框内包含消息的class       icons: [{                 path: "/static/dist/img/qq/",                 file: ".gif",                 placeholder: "#qq_{alias}#"             }]         }); }

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

 

API    

icons	表情组。icons group.
icons:{ name }	该组表情名称。the name of the icons group.
icons:{ path }	必填。该组表情路径（表情文件必须是1,2,3...命名）。required.the path of the icons group(icon file must named as 1 ,2 ,3...).
icons:{ maxNum }	必填。该组表情文件名的最大数。required.the max number of the icons group file name.
icons:{ excludeNums }	要排除的表情文件集合。the exclude icon files.
icons:{ file }	表情文件的后缀名。the icon file extension.
icons:{ placeholder }	该组表情插入文本框后的占位标识，必须包含'{alias}'部分，'{alias}'会被自动替换成每个表情的标识。the placeholder for the icon group, must contains '{alias}' in it, it will be replaced with the code of each emoji.
icons:{ alias }	每个表情对应的标识，若未指定，则为表情文件名（1,2,3...），若指定为一个对象， 则会根据对象属性名（1,2,3...）查找属性的值作为表情标识。
icons:{ title }	每个表情指上去显示的文字，格式：fileName:title, 如：1:'good'。the shows title for each emoji, format: fileName:title, such as: 1:'good'.

 

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

效果图：文档发送

 

视频发送：可以全屏播放

 

 

音频发送：

 

 

图片发送：

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

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

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

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

 

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

"input-oper">     "#" class="link-expression" id="emoji" style="z-index:1000">     "#" class="link-file" οnclick="$('#previewImg').click();" id="imghead">    "uploadForm" enctype="multipart/form-data">       "file"  style="display: none;" id="previewImg" name="file">//图片预览框

 

收到消息提醒：

直接用了layerUi 方便又好用：重写一下弹框的样式

 

//消息通知 function alertframe(name,content){ layer.open({   type: 1,//注意这的type值等于1   skin: 'layui-layer-demo', //样式类名   closeBtn: 0, //不显示关闭按钮   anim: 2,   title: false,   closeBtn: 0, //不显示关闭按钮   shade: [0],   area: ['340px', '215px'],   offset: 'rb', //右下角弹出   time: 5000, //2秒后自动关闭   shadeClose: true, //开启遮罩关闭   content: ' 温馨提示 来自'+name+'得消息！ '+content+' 查看 » ' }); }

 

结语：撸了好多jQ算是实现功能了，代码确实写的有点乱了，还需要后续的优化，提出使用重复性较高的代码，降低耦合性，还需要很多地方需要改良。。。

 

附件：QQ表情js网盘地址：

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

提取码：3ztf