From 8094f191e5c3457d3120fe8c8176310318bbec56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B0=E5=B9=BF=E9=93=B6?= <273650669@qq.com> Date: Wed, 1 Nov 2017 16:57:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=91=E9=80=81=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.js | 6 +- io/io.js | 10 ++- model/message.js | 8 +- package.json | 3 +- public/css/client.css | 36 +++++++- public/images/client/emoji.png | Bin 0 -> 8502 bytes public/images/client/picture.png | Bin 0 -> 3934 bytes public/js/client/client.js | 132 ++++++++++++++++++++++++----- public/js/server/index.js | 140 +++++++++++++++++++++++++------ routes/index.js | 13 +++ views/client/index.ejs | 85 ++++++++++--------- views/server/index.ejs | 35 +++++++- 12 files changed, 365 insertions(+), 103 deletions(-) create mode 100644 public/images/client/emoji.png create mode 100644 public/images/client/picture.png diff --git a/config.js b/config.js index 3ceb278..27da586 100644 --- a/config.js +++ b/config.js @@ -1,5 +1,9 @@ const APP = { - "KEFUUUID":'chat-kefu-admin' + "KEFUUUID":'chat-kefu-admin', + "QINIU":{ + "accessKey":"your access key", + "secretKey":"your secret key" + } }; module.exports = APP; \ No newline at end of file diff --git a/io/io.js b/io/io.js index 3d6a9c2..234290b 100644 --- a/io/io.js +++ b/io/io.js @@ -193,7 +193,7 @@ function ioServer(io) { //监听客户端发送的信息,实现消息转发到各个其他客户端 socket.on('message',function(msg){ - msgModel.add(msg.from_uid,msg.uid,msg.content,function (err) { + msgModel.add(msg.from_uid,msg.uid,msg.content,msg.chat_type,msg.image,function (err) { if(err){ console.error(err); } @@ -201,7 +201,9 @@ function ioServer(io) { if(msg.type == msgType.messageType.public){ var mg = { "uid" : msg.from_uid , - "content": msg.content + "content": msg.content, + "chat_type" : msg.chat_type?msg.chat_type:'text', + "image":msg.image }; socket.broadcast.emit("message",mg); }else if(msg.type == msgType.messageType.private){ @@ -214,7 +216,9 @@ function ioServer(io) { //给指定的客户端发送消息 var mg = { "uid" : msg.from_uid, - "content": msg.content + "content": msg.content, + "chat_type" : msg.chat_type?msg.chat_type:'text', + "image":msg.image }; io.to(sid).emit('message',mg); } diff --git a/model/message.js b/model/message.js index 3f99fc0..f112adb 100644 --- a/model/message.js +++ b/model/message.js @@ -6,16 +6,20 @@ var MessageSchema = new Schema({ from_uid : { type:String ,index: true}, to_uid : { type:String ,index: true}, content : { type:String }, + chat_type : { type:String,default:'text'}, + image : { type:String,default:''}, time : { type:Date, default:Date.now } }); var MessageModel = mongoose.model("message", MessageSchema); -function add(from_uid,to_uid,content,callback) { +function add(from_uid,to_uid,content,chat_type,image,callback) { var info = { "from_uid" : from_uid, "to_uid" : to_uid, - "content" : content + "content" : content, + "chat_type" : chat_type, + "image" : image, }; var msgModel = new MessageModel(info); msgModel.save(function(err, res){ diff --git a/package.json b/package.json index 66d62d6..888cfdd 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "socket.io":"~2.0.4", "socket.io-client":"^2.0.4", "redis":"^2.8.0", - "mongoose":"^4.12.5" + "mongoose":"^4.12.5", + "qiniu":"^7.1.1" } } diff --git a/public/css/client.css b/public/css/client.css index 4c7904a..16c6afa 100644 --- a/public/css/client.css +++ b/public/css/client.css @@ -157,19 +157,21 @@ a { } .footer .input-holder .text-holder { + float: left; + width: calc(100% - 3rem); position: relative; padding-right: 50px; padding-left: 4px; overflow: hidden; zoom: 1; + height: 100%; } .footer .input-holder .text-holder #textarea { display: block; width: 100%; - height: 32px; - padding: 5px; - margin-top: 12px; + height: 100%; + padding: 15px; overflow-x: hidden; overflow-y: auto; resize: none; @@ -202,4 +204,32 @@ a { } .content-block { margin: 0; +} + +.emoji-image{ + float: left; + width: 3rem; + text-align: center; + margin-top: 0.85rem; +} + +.emoji-image .icon{ + width: 1.2rem; + height: 1.2rem; +} + +.msg-client-img{ + text-align: right; +} + +.msg-client-img img{ + width: 10rem; +} + +.msg-agent-img{ + text-align: left; +} + +.msg-agent-img img{ + width: 10rem; } \ No newline at end of file diff --git a/public/images/client/emoji.png b/public/images/client/emoji.png new file mode 100644 index 0000000000000000000000000000000000000000..2d5343748c711bcb2751320e73258b81e5566faf GIT binary patch literal 8502 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 MMi#_!f;;uU04+Su^#A|> literal 0 HcmV?d00001 diff --git a/public/js/client/client.js b/public/js/client/client.js index 28f03d9..6805211 100644 --- a/public/js/client/client.js +++ b/public/js/client/client.js @@ -5,42 +5,67 @@ $(function(){ }); var uuid = ''; - function insert_client_html(content,datetime){ + function insert_client_html(msg){ var time = dateFormat(); - if(datetime){ - time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); + if(msg.datetime){ + time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime)); + } + if(!msg.chat_type){ + msg.chat_type = 'text'; } var tpl = '
'+ '
'+ - '
' + time + ' 我' + '
'+ - '
'+ + '
' + time + ' 我' + '
'; + + if(msg.chat_type == "text"){ + tpl += '
'+ ''+ - '
' + content + '
'+ + '
' + msg.content + '
'+ ''+ - '
'+ - '
'+ + '
'; + }else if(msg.chat_type == "image"){ + tpl += '
' + + ' ' + + ' photo'+ + ' ' + + '
'; + } + + tpl += '
'+ ''; $(".msg-container").append(tpl); } - function insert_agent_html(content,datetime){ + function insert_agent_html(msg){ var time = dateFormat(); - if(datetime){ - time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); + if(msg.datetime){ + time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime)); + } + if(!msg.chat_type){ + msg.chat_type = 'text'; } var tpl = '
'+ '
'+ '
'+ ''+ '
'+ - '
' + time + ' 客服' + '
'+ - '
'+ - ''+ - ''+ - '
' + content + '
'+ - '
'+ - '
'+ + '
' + time + ' 客服' + '
'; + + if(msg.chat_type == "text"){ + tpl += '
'+ + ''+ + ''+ + '
' + msg.content + '
'+ '
'; + }else if(msg.chat_type == "image"){ + tpl += '
' + + ' ' + + ' photo'+ + ' ' + + '
'; + } + tpl += '
'+ + ''; $(".msg-container").append(tpl); } @@ -56,9 +81,9 @@ $(function(){ if(data.code == 200){ data.data.reverse().forEach(function (msg) { if(msg.from_uid == uid){ - insert_client_html(msg.content,msg.time); + insert_client_html(msg); }else{ - insert_agent_html(msg.content,msg.time); + insert_agent_html(msg); } scrollToBottom(); @@ -75,15 +100,76 @@ $(function(){ "type":'private', "uid":'chat-kefu-admin', "content":msg, - "from_uid":uuid + "from_uid":uuid, + "chat_type":'text' }; socket.emit('message', msg_sender); - insert_client_html(msg); + insert_client_html(msg_sender); scrollToBottom(); $("#textarea").val(''); } }); + $(".picture-upload").click(function () { + var uploader = Qiniu.uploader({ + runtimes: 'html5,flash,html4', // 上传模式，依次退化 + browse_button: 'pickfiles', // 上传选择的点选按钮，必需 + uptoken_url: '/uptoken', // Ajax请求uptoken的Url，强烈建议设置（服务端提供） + get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken + domain: 'http://kefuimg.chinameyer.com/', // bucket域名，下载资源时用到，必需 + container: 'btn-uploader', // 上传区域DOM ID，默认是browser_button的父元素 + max_file_size: '10mb', // 最大文件体积限制 + flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash，相对路径 + max_retries: 3, // 上传失败最大重试次数 + dragdrop: false, // 开启可拖曳上传 + drop_element: 'btn-uploader', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 + chunk_size: '4mb', // 分块上传时，每块的体积 + auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传 + unique_names: true, + init: { + 'FilesAdded': function(up, files) { + plupload.each(files, function(file) { + // 文件添加进队列后，处理相关的事情 + }); + }, + 'BeforeUpload': function(up, file) { + // 每个文件上传前，处理相关的事情 + }, + 'UploadProgress': function(up, file) { + // 每个文件上传时，处理相关的事情 + }, + 'FileUploaded': function(up, file, info) { + // 查看简单反馈 + var domain = up.getOption('domain'); + var res = JSON.parse(info); + var sourceLink = domain +"/"+ res.key; + + var msg_sender = { + "type":'private', + "uid":'chat-kefu-admin', + "content":'图片消息', + "from_uid":uuid, + "chat_type":'image', + "image":sourceLink + }; + socket.emit('message', msg_sender); + insert_client_html(msg_sender); + scrollToBottom(); + + + }, + 'Error': function(up, err, errTip) { + //上传出错时，处理相关的事情 + $.toast("上传失败"); + }, + 'UploadComplete': function() { + //队列文件处理完毕后，处理相关的事情 + } + } + }); + + }); + //连接服务器 socket.on('connect', function () { //uuid = 'chat'+ guid(); @@ -106,7 +192,7 @@ $(function(){ // content 消息 // */ socket.on('message', function(msg){ - insert_agent_html(msg.content); + insert_agent_html(msg); scrollToBottom(); }); }); \ No newline at end of file diff --git a/public/js/server/index.js b/public/js/server/index.js index a2d11c2..b94a749 100644 --- a/public/js/server/index.js +++ b/public/js/server/index.js @@ -17,11 +17,11 @@ layui.use(['layer', 'form', 'jquery'], function () { function init() { $(".admin-index").addClass("layui-this"); - var height = document.body.clientHeight - 262; + var height = document.body.clientHeight - 292; $(".message-container").css("height", height); window.onresize = function(){ - var height = document.body.clientHeight - 262; + var height = document.body.clientHeight - 292; $(".message-container").css("height", height); }; @@ -50,39 +50,64 @@ layui.use(['layer', 'form', 'jquery'], function () { get_message(uid); } - function insert_agent_html(uid,content,datetime){ + function insert_agent_html(msg){ var time = dateFormat(); - if(datetime){ - time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); + if(msg.datetime){ + time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime)); + } + if(!msg.chat_type){ + msg.chat_type = 'text'; } var html = '
\n' + '
\n' + ' ' + time + '\n' + ' 我\n' + - '
\n' + - '
\n' + - '
' + content + '
\n' + - '
\n' + - '
'; - $('#section-'+uid).append(html); + ' \n'; + + if(msg.chat_type == "text"){ + html += '
\n' + + '
' + msg.content + '
\n' + + '
\n' ; + }else if(msg.chat_type == "image"){ + html += '
' + + ' ' + + ' photo'+ + ' ' + + '
'; + } + + html += ' '; + $('#section-'+msg.uid).append(html); } - function insert_client_html(uid,content,datetime){ + function insert_client_html(msg){ var time = dateFormat(); - if(datetime){ - time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); + if(msg.datetime){ + time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime)); + } + if(!msg.chat_type){ + msg.chat_type = 'text'; } var html = '
\n' + '
\n' + ' ' + time + '\n' + ' 客户\n' + - '
\n' + - '
\n' + - '
' + content + '
\n' + - '
\n' + - '
'; - $('#section-'+uid).append(html); + ' \n' ; + if(msg.chat_type == "text"){ + html += '
\n' + + '
' + msg.content + '
\n' + + '
\n' ; + }else if(msg.chat_type == "image"){ + html += '
' + + ' ' + + ' photo'+ + ' ' + + '
'; + } + + html += ' '; + $('#section-'+msg.uid).append(html); } function insert_user_html(id,name) { @@ -133,10 +158,11 @@ layui.use(['layer', 'form', 'jquery'], function () { "type":'private', "uid":currentUUID, "content":msg, - "from_uid":uuid + "from_uid":uuid, + "chat_type":'text' }; socket.emit('message', msg_sender); - insert_agent_html(currentUUID,msg); + insert_agent_html(msg_sender); scrollToBottom(); $("#msg-send-textarea").val(''); } @@ -176,9 +202,11 @@ layui.use(['layer', 'form', 'jquery'], function () { if(data.code == 200){ data.data.reverse().forEach(function (msg) { if(msg.from_uid == uid){ - insert_client_html(msg.from_uid,msg.content,msg.time); + msg.uid = msg.from_uid; + insert_client_html(msg); }else{ - insert_agent_html(msg.to_uid,msg.content,msg.time); + msg.uid = msg.to_uid; + insert_agent_html(msg); } scrollToBottom(); @@ -191,6 +219,64 @@ layui.use(['layer', 'form', 'jquery'], function () { msg_send(); }); + $(".picture-upload").click(function () { + var uploader = Qiniu.uploader({ + runtimes: 'html5,flash,html4', // 上传模式，依次退化 + browse_button: 'pickfiles', // 上传选择的点选按钮，必需 + uptoken_url: '/uptoken', // Ajax请求uptoken的Url，强烈建议设置（服务端提供） + get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken + domain: 'http://kefuimg.chinameyer.com/', // bucket域名，下载资源时用到，必需 + container: 'btn-uploader', // 上传区域DOM ID，默认是browser_button的父元素 + max_file_size: '10mb', // 最大文件体积限制 + flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash，相对路径 + max_retries: 3, // 上传失败最大重试次数 + dragdrop: false, // 开启可拖曳上传 + drop_element: 'btn-uploader', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 + chunk_size: '4mb', // 分块上传时，每块的体积 + auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传 + unique_names: true, + init: { + 'FilesAdded': function(up, files) { + plupload.each(files, function(file) { + // 文件添加进队列后，处理相关的事情 + }); + }, + 'BeforeUpload': function(up, file) { + // 每个文件上传前，处理相关的事情 + }, + 'UploadProgress': function(up, file) { + // 每个文件上传时，处理相关的事情 + }, + 'FileUploaded': function(up, file, info) { + // 查看简单反馈 + var domain = up.getOption('domain'); + var res = JSON.parse(info); + var sourceLink = domain +"/"+ res.key; + + var msg_sender = { + "type":'private', + "uid":currentUUID, + "content":'图片消息', + "from_uid":uuid, + "chat_type":'image', + "image":sourceLink + }; + socket.emit('message', msg_sender); + insert_agent_html(msg_sender); + scrollToBottom(); + }, + 'Error': function(up, err, errTip) { + //上传出错时，处理相关的事情 + $.toast("上传失败"); + }, + 'UploadComplete': function() { + //队列文件处理完毕后，处理相关的事情 + } + } + }); + + }); + //连接服务器 socket.on('connect', function () { console.log('连接成功...'); @@ -205,7 +291,7 @@ layui.use(['layer', 'form', 'jquery'], function () { //后端推送来消息时 socket.on('message', function(msg){ - insert_client_html(msg.uid,msg.content); + insert_client_html(msg); scrollToBottom(); msg_notification(msg); }); @@ -230,12 +316,12 @@ layui.use(['layer', 'form', 'jquery'], function () { var index = uuids.indexOf(msg.uid); if( index == -1){ uuids.push(msg.uid); - insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1)); + insert_user_html(msg); //创建聊天section insert_section(msg.uid); }else{ if($(".chat-user").find("#"+msg.uid).length == 0){ - insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1)); + insert_user_html(msg); //创建聊天section insert_section(msg.uid); } diff --git a/routes/index.js b/routes/index.js index 5b8ea83..ccef424 100644 --- a/routes/index.js +++ b/routes/index.js @@ -1,5 +1,7 @@ var express = require('express'); var router = express.Router(); +var AppConfig = require('../config'); +var qiniu = require('qiniu'); router.get('/', function(req, res, next) { res.render('./server/index'); @@ -21,4 +23,15 @@ router.get('/admin/setup', function(req, res, next) { res.render('./server/setup'); }); +router.get('/uptoken', function(req, res, next) { + var mac = new qiniu.auth.digest.Mac(AppConfig.QINIU.accessKey, AppConfig.QINIU.secretKey); + var options = { + scope: 'kefu', + expires: 7200 + }; + var putPolicy = new qiniu.rs.PutPolicy(options); + var uploadToken=putPolicy.uploadToken(mac); + res.send({"uptoken":uploadToken}); +}); + module.exports = router; diff --git a/views/client/index.ejs b/views/client/index.ejs index 95ac746..5c8bf04 100644 --- a/views/client/index.ejs +++ b/views/client/index.ejs @@ -1,53 +1,60 @@ - - - - 客服系统 - - - - + + + 客服系统 + + + + - - - + + + -
+
- -
- -

客服系统

-
- -
-
+ +
+ +

客服系统

+
+ +
+
- -
- -
+
+
+
+ + +
+ +
+ + 发送 +
+
+
+
-
- - - - - - - - +
+ + + + + + + + + + + + diff --git a/views/server/index.ejs b/views/server/index.ejs index 817bf58..94ec739 100644 --- a/views/server/index.ejs +++ b/views/server/index.ejs @@ -81,14 +81,14 @@ .message-sender{ position: absolute; bottom: 0; - height: 150px; + height: 180px; border-top: 1px solid #e9e9e9; width: 100%; } .sender-editor{ - height: 100%; + height: calc(100% - 40px); } .message-sender textarea{ @@ -152,6 +152,28 @@ display: none; } + .msg-client-img{ + text-align: left; + } + + .msg-client-img img{ + width: 10rem; + } + + .msg-agent-img{ + text-align: right; + } + + .msg-agent-img img{ + width: 10rem; + } + + .message-emoji-picture{ + height: 40px; + line-height: 40px; + padding-left: 20px; + } +
@@ -169,9 +191,12 @@
从左侧列表打开对话
-
+
+ + +
发送
@@ -179,7 +204,9 @@
- + + +