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

已经实现了以下功能：

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

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

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

先展示几张效果图：

实现过程：

首先引入：

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

发送(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路径）

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

      //图片预览框

收到消息提醒：

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

*{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;}

//消息通知

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