h5客服聊天(線上溝通)|h5微客服系統|web線上聊天

h5客服聊天(線上溝通)|h5微客服系統|web線上聊天

之前有看到網上有很多環信、美恰之類的客服系統,感覺挺不錯的,如是自己想著什麼時候也給整個,最近就使用h5 css3 fontJs swiper wcPop等技術架構開發了一個web線上客服系統(1v1溝通聊天),可以應用到線上臨時聊天、線上諮詢等情景。實現了訊息、表情(含動圖),圖片、附件傳送及商品的推送。

效果如下:

// 傳送資訊
var $chatMsgList = $("#J__chatMsgList");
function isEmpty(){
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/&nbsp;/ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r] )|(?:[ \t\n\r] $)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function(){
// 判斷內容是否為空
if(isEmpty()) return;
var html = $editor.html();
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-) )/g;
html = html.replace(reg, "<a href='$1$2' target='_blank'>$1$2</a>");
var msgTpl = [
'<li class="me">\
<div class="content">\
<p class="author">遊客</p>\
<div class="msg">'  html  '</div>\
</div>\
<a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\
</li>'
].join("");
$chatMsgList.append(msgTpl);
$(".wc__choose-panel").hide();
// 清空聊天框並獲取焦點(處理輸入法和表情 - 聚焦)
if(!$(".wc__choose-panel").is(":hidden")){
$editor.html("");
}else{
$editor.html("").focus().trigger("click");
}
wchat_ToBottom();
});
// ...圖片選擇視窗
$("#J__chooseImg").on("change", function () {
$(".wc__choose-panel").hide();
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var _img = this.result;
var _tpl = [
'<li class="me">\
<div class="content">\
<p class="author">遊客</p>\
<div class="msg picture"><img class="img__pic" src="'  _img   '" /></div>\
</div>\
<a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\
</li>'
].join("");
$chatMsgList.append(_tpl);
wchat_ToBottom();
}
});
// ...檔案選擇視窗
$("#J__chooseFile").on("change", function () {
$(".wc__choose-panel").hide();
var file = this.files[0], fileSuffix = /\.[^\.] /.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.indexOf('.')   1, fileSuffix.length).toLowerCase();
console.log(fileExt);
var fileTypeArr = ['jpg', 'jpeg', 'png', 'gif', 'txt', 'rar', 'zip', 'pdf', 'docx', 'xls'];
if ($.inArray(fileExt, fileTypeArr) < 0) {
wcPop({ content: '附件只支援jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的檔案', time: 2 });
return;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var _file = this.result;
console.log(_file);
var _tpl = [
'<li class="me">\
<div class="content">\
<p class="author">遊客</p>\
<div class="msg attachment">\
<i class="ico-attachment"></i>\
<span class="file-info">\
<p class="filename">'  file.name   '</p>\
<p class="filesize">'  formateSize(file.size)   '</p>\
</span>\
<a class="ico-download" href="'  _file   '" target="_blank" download="'   file.name   '" title="'   file.name   '"></a>\
</div>\
</div>\
<a class="avatar"><img src="img/uimg/u__chat-imgDefault.jpg" /></a>\
</li>'
].join("");
$chatMsgList.append(_tpl);
wchat_ToBottom();
}
/** 格式化檔案大小顯示  value : file檔案的大小值 */
formateSize = function (value) {
if (null == value || value == '') {
return "0 Bytes";
}
var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
var index = 0;
var srcsize = parseFloat(value);
index = Math.floor(Math.log(srcsize) / Math.log(1024));
var size = srcsize / Math.pow(1024, index);
size = size.toFixed(2);		//保留的小數位數
return size   unitArr[index];
}
});

歡迎大家一起來交流學習  QQ:(282310962) WX:(xy190310)