在线聊天系统的文件(音视频、文档)以及表情的实时发送:
已经实现了以下功能:
现在主要对QQ聊天表情的发送,以及音视频文档文件的发送实现做个做个总结记录:
PS(为方便演示 我在此在浏览器A登录a用户,在浏览器B登录b用户,然后a与b相互进行消息发送!!)
一:QQ聊天表情发送的实现:
先展示几张效果图:
实现过程:
首先引入:
<head> <link rel="stylesheet" href="lib/css/jquery.mCustomScrollbar.min.css"/> <link rel="stylesheet" href="css/jquery.emoji.css"/> </head> <body> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script src="lib/script/jquery.mousewheel-3.0.6.min.js"></script> <script src="lib/script/jquery.mCustomScrollbar.min.js"></script> <script src="js/jquery.emoji.js"></script> </body> |
在这我用可编辑的div替代了textarea的输入框,因为textarea框内的内容不支持html的页面解析contenteditable="true" 这个属性是为了这个div可以编辑,并且输入内容。
<div contenteditable="true"tabindex="0"id="text"style="width:100%;height:50%;overflow:auto;overflow-x:hidden;" > </div> <button class="btn-send01" οnclick="send()">发送(S)</button> |
然后添加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路径)
点击上传附件直接调用上面截图这个方法就可以了!
<div class="input-oper"> <a href="#" class="link-expression" id="emoji" style="z-index:1000"></a> <a href="#" class="link-file" οnclick="$('#previewImg').click();" id="imghead"></a> </div> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" style="display: none;" id="previewImg" name="file">//图片预览框 </form> |
收到消息提醒:
直接用了layerUi 方便又好用:重写一下弹框的样式
<style type="text/css"> *{margin:0;padding:0;} #pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;} #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;} #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} #popHead #popClose{position:absolute;right:10px;top:1px;} #popHead a#popClose:hover{color:#f00;cursor:pointer;} #popContent{padding:5px 10px;} #popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;} #popTitle a:hover{color:#f60;} #popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;} #popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;} #popMore a{color:#f60;} #popMore a:hover{color:#f00;} </style> //消息通知 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: '<div id="popHead"><h2>温馨提示</h2></div><div id="popContent"><dl><dt id="popTitle"><a href="#" target="_blank">来自'+name+'得消息!</a></dt><dd id="popIntro">'+content+'</dd></dl><p id="popMore"><a href="#" target="_blank">查看 »</a></p></div>' }); } |
结语:撸了好多jQ算是实现功能了,代码确实写的有点乱了,还需要后续的优化,提出使用重复性较高的代码,降低耦合性,还需要很多地方需要改良。。。
附件:QQ表情js网盘地址:
链接:https://pan.baidu.com/s/1ruh2ydg1mufUi5QBtwbM0Q
提取码:3ztf