已经实现了以下功能：
现在主要对QQ聊天表情的发送，以及音视频文档文件的发送实现做个做个总结记录：
PS(为方便演示 我在此在浏览器A登录a用户，在浏览器B登录b用户，然后a与b相互进行消息发送！！)
一：QQ聊天表情发送的实现：
先展示几张效果图：
实现过程：
首先引入：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
|
1 2 3 |
<div contenteditable="true"tabindex="0"id="text"style="width:100%;height:50%;overflow:auto;overflow-x:hidden;" ></div> <button class="btn-send01" onclick="send()">发送(S)</button> |
然后添加js：在这我用可编辑的div替代了textarea的输入框，因为textarea框内的内容不支持html的页面解析 contenteditable=“true” 这个属性是为了这个div可以编辑，并且输入内容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(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()发送事件后,把文本框的内容添加到消息框后，调用以下方法进行解析：
当然还需要在客户端接收到消息后还需要再调一次empares()这个方法解析表情。
API：
二：音视频文档文件的实时发送：
效果图：文档发送
视频发送：可以全屏播放
音频发送：
图片发送：
网上的实现过程大多是把要发送的文件，进行在线压缩，然后发送，或者对一些较大的文件进行分段发送。
以上实现方式感觉有点麻烦，说说我的实现思路：
一、点击选择文件后，先把文件进行上传，存储在数据库并返回存储路径，然后点击发送的时候只进行路径的传送，这样既可避免连接断开，传送失败！
（备注：对于图片我直接转成base64进行传送了,下载的时候用的返回的url路径）
点击上传附件直接调用上面截图这个方法就可以了！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="input-oper"> <a href="#" class="link-expression" id="emoji" style="z-index:1000"></a> <a href="#" class="link-file" onclick="$('#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 方便又好用：重写一下弹框的样式收到消息提醒：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<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>' }); } |
附件：QQ表情js网盘地址：结语：撸了好多jQ算是实现功能了，代码确实写的有点乱了，还需要后续的优化，提出使用重复性较高的代码，降低耦合性，还需要很多地方需要改良。。。
链接：https://pan.baidu.com/s/1ruh2ydg1mufUi5QBtwbM0Q
提取码：3ztf