yaclty/kefu
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加发送图片功能

Browse Source
This commit is contained in:
邰广银 2017-11-01 16:57:40 +08:00
parent aa6b9ec068
commit 8094f191e5
12 changed files with 365 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config.js
View File

@ -1,5 +1,9 @@
const APP = { const APP = {
"KEFUUUID":'chat-kefu-admin' "KEFUUUID":'chat-kefu-admin',
"QINIU":{
"accessKey":"your access key",
"secretKey":"your secret key"
}
}; };
module.exports = APP; module.exports = APP;

10
io/io.js
View File

@ -193,7 +193,7 @@ function ioServer(io) {
//监听客户端发送的信息,实现消息转发到各个其他客户端 //监听客户端发送的信息,实现消息转发到各个其他客户端
socket.on('message',function(msg){ 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){ if(err){
console.error(err); console.error(err);
} }
@ -201,7 +201,9 @@ function ioServer(io) {
if(msg.type == msgType.messageType.public){ if(msg.type == msgType.messageType.public){
var mg = { var mg = {
"uid" : msg.from_uid , "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); socket.broadcast.emit("message",mg);
}else if(msg.type == msgType.messageType.private){ }else if(msg.type == msgType.messageType.private){
@ -214,7 +216,9 @@ function ioServer(io) {
//给指定的客户端发送消息 //给指定的客户端发送消息
var mg = { var mg = {
"uid" : msg.from_uid, "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); io.to(sid).emit('message',mg);
} }

8
model/message.js
View File

@ -6,16 +6,20 @@ var MessageSchema = new Schema({
from_uid : { type:String ,index: true}, from_uid : { type:String ,index: true},
to_uid : { type:String ,index: true}, to_uid : { type:String ,index: true},
content : { type:String }, content : { type:String },
chat_type : { type:String,default:'text'},
image : { type:String,default:''},
time : { type:Date, default:Date.now } time : { type:Date, default:Date.now }
}); });
var MessageModel = mongoose.model("message", MessageSchema); 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 = { var info = {
"from_uid" : from_uid, "from_uid" : from_uid,
"to_uid" : to_uid, "to_uid" : to_uid,
"content" : content "content" : content,
"chat_type" : chat_type,
"image" : image,
}; };
var msgModel = new MessageModel(info); var msgModel = new MessageModel(info);
msgModel.save(function(err, res){ msgModel.save(function(err, res){

3
package.json
View File

@ -16,6 +16,7 @@
"socket.io":"~2.0.4", "socket.io":"~2.0.4",
"socket.io-client":"^2.0.4", "socket.io-client":"^2.0.4",
"redis":"^2.8.0", "redis":"^2.8.0",
"mongoose":"^4.12.5" "mongoose":"^4.12.5",
"qiniu":"^7.1.1"
} }
} }

36
public/css/client.css
View File

@ -157,19 +157,21 @@ a {
} }
.footer .input-holder .text-holder { .footer .input-holder .text-holder {
float: left;
width: calc(100% - 3rem);
position: relative; position: relative;
padding-right: 50px; padding-right: 50px;
padding-left: 4px; padding-left: 4px;
overflow: hidden; overflow: hidden;
zoom: 1; zoom: 1;
height: 100%;
} }
.footer .input-holder .text-holder #textarea { .footer .input-holder .text-holder #textarea {
display: block; display: block;
width: 100%; width: 100%;
height: 32px; height: 100%;
padding: 5px; padding: 15px;
margin-top: 12px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
resize: none; resize: none;
@ -203,3 +205,31 @@ a {
.content-block { .content-block {
margin: 0; 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;
}

BIN
public/images/client/emoji.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/images/client/picture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

132
public/js/client/client.js
View File

@ -5,42 +5,67 @@ $(function(){
}); });
var uuid = ''; var uuid = '';
function insert_client_html(content,datetime){ function insert_client_html(msg){
var time = dateFormat(); var time = dateFormat();
if(datetime){ if(msg.datetime){
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
}
if(!msg.chat_type){
msg.chat_type = 'text';
} }
var tpl = '<div class="msg-box">'+ var tpl = '<div class="msg-box">'+
'<div class="msg-client">'+ '<div class="msg-client">'+
'<div class="date">' + time + ' 我' + '</div>'+ '<div class="date">' + time + ' 我' + '</div>';
'<div class="bubble rich-text-bubble">'+
if(msg.chat_type == "text"){
tpl += '<div class="bubble rich-text-bubble">'+
'<span class="arrow"></span>'+ '<span class="arrow"></span>'+
'<div class="text">' + content + '</div>'+ '<div class="text">' + msg.content + '</div>'+
'<span class="status icon"></span>'+ '<span class="status icon"></span>'+
'</div>'+ '</div>';
'</div>'+ }else if(msg.chat_type == "image"){
tpl += ' <div class="msg-client-img">' +
' <a href="'+ msg.image +'"target="_blank">' +
' <img src="' + msg.image + '" alt="photo">'+
' </a>' +
' </div>';
}
tpl += '</div>'+
'</div>'; '</div>';
$(".msg-container").append(tpl); $(".msg-container").append(tpl);
} }
function insert_agent_html(content,datetime){ function insert_agent_html(msg){
var time = dateFormat(); var time = dateFormat();
if(datetime){ if(msg.datetime){
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
}
if(!msg.chat_type){
msg.chat_type = 'text';
} }
var tpl = '<div class="msg-box">'+ var tpl = '<div class="msg-box">'+
'<div class="msg-agent">'+ '<div class="msg-agent">'+
'<div class="agent-avatar">'+ '<div class="agent-avatar">'+
'<img src="https://s3-qcloud.meiqia.com/pics.meiqia.bucket/avatars/20170929/972a7c64426ed82da1de67ac3f16bd07.png">'+ '<img src="https://s3-qcloud.meiqia.com/pics.meiqia.bucket/avatars/20170929/972a7c64426ed82da1de67ac3f16bd07.png">'+
'</div>'+ '</div>'+
'<div class="date">' + time + ' 客服' + '</div>'+ '<div class="date">' + time + ' 客服' + '</div>';
'<div class="bubble rich-text-bubble">'+
'<span class="arrow-bg"></span>'+ if(msg.chat_type == "text"){
'<span class="arrow"></span>'+ tpl += '<div class="bubble rich-text-bubble">'+
'<div class="text">' + content + '</div>'+ '<span class="arrow-bg"></span>'+
'</div>'+ '<span class="arrow"></span>'+
'</div>'+ '<div class="text">' + msg.content + '</div>'+
'</div>'; '</div>';
}else if(msg.chat_type == "image"){
tpl += ' <div class="msg-agent-img">' +
' <a href="'+ msg.image +'"target="_blank">' +
' <img src="' + msg.image + '" alt="photo">'+
' </a>' +
' </div>';
}
tpl += '</div>'+
'</div>';
$(".msg-container").append(tpl); $(".msg-container").append(tpl);
} }
@ -56,9 +81,9 @@ $(function(){
if(data.code == 200){ if(data.code == 200){
data.data.reverse().forEach(function (msg) { data.data.reverse().forEach(function (msg) {
if(msg.from_uid == uid){ if(msg.from_uid == uid){
insert_client_html(msg.content,msg.time); insert_client_html(msg);
}else{ }else{
insert_agent_html(msg.content,msg.time); insert_agent_html(msg);
} }
scrollToBottom(); scrollToBottom();
@ -75,15 +100,76 @@ $(function(){
"type":'private', "type":'private',
"uid":'chat-kefu-admin', "uid":'chat-kefu-admin',
"content":msg, "content":msg,
"from_uid":uuid "from_uid":uuid,
"chat_type":'text'
}; };
socket.emit('message', msg_sender); socket.emit('message', msg_sender);
insert_client_html(msg); insert_client_html(msg_sender);
scrollToBottom(); scrollToBottom();
$("#textarea").val(''); $("#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 () { socket.on('connect', function () {
//uuid = 'chat'+ guid(); //uuid = 'chat'+ guid();
@ -106,7 +192,7 @@ $(function(){
// content 消息 // content 消息
// */ // */
socket.on('message', function(msg){ socket.on('message', function(msg){
insert_agent_html(msg.content); insert_agent_html(msg);
scrollToBottom(); scrollToBottom();
}); });
}); });

140
public/js/server/index.js
View File

@ -17,11 +17,11 @@ layui.use(['layer', 'form', 'jquery'], function () {
function init() { function init() {
$(".admin-index").addClass("layui-this"); $(".admin-index").addClass("layui-this");
var height = document.body.clientHeight - 262; var height = document.body.clientHeight - 292;
$(".message-container").css("height", height); $(".message-container").css("height", height);
window.onresize = function(){ window.onresize = function(){
var height = document.body.clientHeight - 262; var height = document.body.clientHeight - 292;
$(".message-container").css("height", height); $(".message-container").css("height", height);
}; };
@ -50,39 +50,64 @@ layui.use(['layer', 'form', 'jquery'], function () {
get_message(uid); get_message(uid);
} }
function insert_agent_html(uid,content,datetime){ function insert_agent_html(msg){
var time = dateFormat(); var time = dateFormat();
if(datetime){ if(msg.datetime){
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
}
if(!msg.chat_type){
msg.chat_type = 'text';
} }
var html = ' <div class="message-agent">\n' + var html = ' <div class="message-agent">\n' +
' <div class="message-agent-time-sender message-time-sender">\n' + ' <div class="message-agent-time-sender message-time-sender">\n' +
' <span class="message-agent-time">' + time + '</span>\n' + ' <span class="message-agent-time">' + time + '</span>\n' +
' <span class="">我</span>\n' + ' <span class="">我</span>\n' +
' </div>\n' + ' </div>\n';
' <div class="message-agent-content message-content">\n' +
' <div>' + content + '</div>\n' + if(msg.chat_type == "text"){
' </div>\n' + html += ' <div class="message-agent-content message-content">\n' +
' </div>'; ' <div>' + msg.content + '</div>\n' +
$('#section-'+uid).append(html); ' </div>\n' ;
}else if(msg.chat_type == "image"){
html += ' <div class="msg-agent-img">' +
' <a href="'+ msg.image +'"target="_blank">' +
' <img src="' + msg.image + '" alt="photo">'+
' </a>' +
' </div>';
}
html += ' </div>';
$('#section-'+msg.uid).append(html);
} }
function insert_client_html(uid,content,datetime){ function insert_client_html(msg){
var time = dateFormat(); var time = dateFormat();
if(datetime){ if(msg.datetime){
time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(datetime)); time = dateFormat("yyyy-MM-dd hh:mm:ss",new Date(msg.datetime));
}
if(!msg.chat_type){
msg.chat_type = 'text';
} }
var html = '<div class="message-client">\n' + var html = '<div class="message-client">\n' +
' <div class="message-time-sender">\n' + ' <div class="message-time-sender">\n' +
' <span class="message-client-time">' + time + '</span>\n' + ' <span class="message-client-time">' + time + '</span>\n' +
' <span class="">客户</span>\n' + ' <span class="">客户</span>\n' +
' </div>\n' + ' </div>\n' ;
' <div class="message-client-content message-content">\n' + if(msg.chat_type == "text"){
' <div>' + content + '</div>\n' + html += ' <div class="message-client-content message-content">\n' +
' </div>\n' + ' <div>' + msg.content + '</div>\n' +
' </div>'; ' </div>\n' ;
$('#section-'+uid).append(html); }else if(msg.chat_type == "image"){
html += ' <div class="msg-client-img">' +
' <a href="'+ msg.image +'"target="_blank">' +
' <img src="' + msg.image + '" alt="photo">'+
' </a>' +
' </div>';
}
html += ' </div>';
$('#section-'+msg.uid).append(html);
} }
function insert_user_html(id,name) { function insert_user_html(id,name) {
@ -133,10 +158,11 @@ layui.use(['layer', 'form', 'jquery'], function () {
"type":'private', "type":'private',
"uid":currentUUID, "uid":currentUUID,
"content":msg, "content":msg,
"from_uid":uuid "from_uid":uuid,
"chat_type":'text'
}; };
socket.emit('message', msg_sender); socket.emit('message', msg_sender);
insert_agent_html(currentUUID,msg); insert_agent_html(msg_sender);
scrollToBottom(); scrollToBottom();
$("#msg-send-textarea").val(''); $("#msg-send-textarea").val('');
} }
@ -176,9 +202,11 @@ layui.use(['layer', 'form', 'jquery'], function () {
if(data.code == 200){ if(data.code == 200){
data.data.reverse().forEach(function (msg) { data.data.reverse().forEach(function (msg) {
if(msg.from_uid == uid){ 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{ }else{
insert_agent_html(msg.to_uid,msg.content,msg.time); msg.uid = msg.to_uid;
insert_agent_html(msg);
} }
scrollToBottom(); scrollToBottom();
@ -191,6 +219,64 @@ layui.use(['layer', 'form', 'jquery'], function () {
msg_send(); 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 () { socket.on('connect', function () {
console.log('连接成功...'); console.log('连接成功...');
@ -205,7 +291,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
//后端推送来消息时 //后端推送来消息时
socket.on('message', function(msg){ socket.on('message', function(msg){
insert_client_html(msg.uid,msg.content); insert_client_html(msg);
scrollToBottom(); scrollToBottom();
msg_notification(msg); msg_notification(msg);
}); });
@ -230,12 +316,12 @@ layui.use(['layer', 'form', 'jquery'], function () {
var index = uuids.indexOf(msg.uid); var index = uuids.indexOf(msg.uid);
if( index == -1){ if( index == -1){
uuids.push(msg.uid); uuids.push(msg.uid);
insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1)); insert_user_html(msg);
//创建聊天section //创建聊天section
insert_section(msg.uid); insert_section(msg.uid);
}else{ }else{
if($(".chat-user").find("#"+msg.uid).length == 0){ if($(".chat-user").find("#"+msg.uid).length == 0){
insert_user_html(msg.uid,msg.name + '#'+ (uuids.length + 1)); insert_user_html(msg);
//创建聊天section //创建聊天section
insert_section(msg.uid); insert_section(msg.uid);
} }

13
routes/index.js
View File

@ -1,5 +1,7 @@
var express = require('express'); var express = require('express');
var router = express.Router(); var router = express.Router();
var AppConfig = require('../config');
var qiniu = require('qiniu');
router.get('/', function(req, res, next) { router.get('/', function(req, res, next) {
res.render('./server/index'); res.render('./server/index');
@ -21,4 +23,15 @@ router.get('/admin/setup', function(req, res, next) {
res.render('./server/setup'); 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; module.exports = router;

85
views/client/index.ejs
View File

@ -1,53 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>客服系统</title> <title>客服系统</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="css/client.css"> <link rel="stylesheet" href="css/client.css">
</head> </head>
<body> <body>
<div class="page-group"> <div class="page-group">
<div class="page page-current"> <div class="page page-current">
<!-- 标题栏 --> <!-- 标题栏 -->
<header class="bar bar-nav"> <header class="bar bar-nav">
<a href="tel:10086"><span class="icon icon-phone pull-left open-panel"></span></a> <a href="tel:10086"><span class="icon icon-phone pull-left open-panel"></span></a>
<h1 class="title">客服系统<span id="keleyivisitorip" style="display: none;"></span></h1> <h1 class="title">客服系统<span id="keleyivisitorip" style="display: none;"></span></h1>
</header> </header>
<!-- 这里是页面内容区 --> <!-- 这里是页面内容区 -->
<div class="content"> <div class="content">
<div class="content-block msg-container" id="msg-container"> <div class="content-block msg-container" id="msg-container">
</div>
<footer id="chatFooter" class="footer">
<div class="input-holder">
<div class="text-holder">
<textarea id="textarea" placeholder="请输入"></textarea>
<a id="btnSend">发送</a>
</div> </div>
</div> <footer id="chatFooter" class="footer">
</footer> <div class="input-holder">
</div> <div class="emoji-image docs-icons" id="btn-uploader">
<span class="icon icon-emoji emoji-send"></span>
<span id="pickfiles" class="icon icon-picture picture-upload"></span>
</div>
<div class="text-holder">
<textarea id="textarea" placeholder="请输入"></textarea>
<a id="btnSend">发送</a>
</div>
</div>
</footer>
</div>
</div> </div>
</div> </div>
<script type="text/javascript" src="http://tool.keleyi.com/ip/visitoriphost/"></script>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type="text/javascript" src="http://cdn.staticfile.org/plupload/2.1.9/moxie.min.js"></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type="text/javascript" src="http://cdn.staticfile.org/plupload/2.1.9/plupload.min.js"></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script type="text/javascript" src="http://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
<script src="/js/fingerprint.js"></script> <script type="text/javascript" src="http://tool.keleyi.com/ip/visitoriphost/"></script>
<script src="/socket.io/socket.io.js"></script> <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/client/client.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script src="/js/fingerprint.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='js/client/client.js' charset='utf-8'></script>
</body> </body>

35
views/server/index.ejs
View File

@ -81,14 +81,14 @@
.message-sender{ .message-sender{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 150px; height: 180px;
border-top: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9;
width: 100%; width: 100%;
} }
.sender-editor{ .sender-editor{
height: 100%; height: calc(100% - 40px);
} }
.message-sender textarea{ .message-sender textarea{
@ -152,6 +152,28 @@
display: none; 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;
}
</style> </style>
<div class="layui-fluid"> <div class="layui-fluid">
<div class="friend"> <div class="friend">
@ -169,9 +191,12 @@
<img src="/images/server/tabpage.png"> <img src="/images/server/tabpage.png">
<div class="text">从左侧列表打开对话</div> <div class="text">从左侧列表打开对话</div>
</div> </div>
</div> </div>
<div class="message-sender"> <div class="message-sender">
<div class="message-emoji-picture" id="btn-uploader">
<i class="layui-icon" style="font-size: 25px; color: #969faa;">&#xe60c;</i>
<i id="pickfiles" class="layui-icon picture-upload" style="font-size: 25px; color: #969faa;margin-left: 10px;">&#xe64a;</i>
</div>
<div class="sender-editor"> <div class="sender-editor">
<textarea placeholder="请输入消息内容，Enter快捷发送，Ctrl+Enter换行" id="msg-send-textarea" disabled></textarea> <textarea placeholder="请输入消息内容，Enter快捷发送，Ctrl+Enter换行" id="msg-send-textarea" disabled></textarea>
<div class="layui-btn layui-btn-normal btnMsgSend layui-btn-disabled" title="Enter快捷发送，Ctrl+Enter换行">发送</div> <div class="layui-btn layui-btn-normal btnMsgSend layui-btn-disabled" title="Enter快捷发送，Ctrl+Enter换行">发送</div>
@ -179,7 +204,9 @@
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="http://cdn.staticfile.org/plupload/2.1.9/moxie.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/plupload/2.1.9/plupload.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
<script src="/layui/layui.js"></script> <script src="/layui/layui.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script> <script type='text/javascript' src='js/common.js' charset='utf-8'></script>