网上有很多环信、美恰之类的客服系统,最近也使用h5+css3+fontJs+swiper+wcPop等技术架构开发了一个在线客服(1v1沟通聊天),可以应用到在线临时聊天、在线咨询等情景。实现了消息、表情(含动图),图片、附件发送及商品的推送。

项目截图:

如下图:可点击“Apple官方旗舰店”或机器人按钮发起在线聊天,聊天窗口以向上弹出展示;

如下图:长按聊天信息,可出行菜单提示,操作更加方便简洁, 另外聊天背景可以自行设置;

如下图:聊天表情以弹窗定位形式展示,含有表情及动图,让聊天内容更加丰富;

如下图:聊天客服可根据顾客需求,推送一些热门商品;

// 发送信息
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];
}
});

h5在线1v1客服|web在线客服系统|h5即时聊天的更多相关文章

  1. Node.js + Web Socket 打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...

  2. 前端开发之旅-zopim在线即时聊天客服

    一.与潜在客户实时聊天的神奇-zopim Zopim是一款高效的可嵌入网页中去的即使通讯与网站访客信息追踪的的Web软件.知道谁在访问您的网站吗?想和他们实时交流吗?想更有效的把握商机吗?使用Zopi ...

  3. Java实现web在线预览office文档与pdf文档实例

    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...

  4. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  5. Web在线视频方案浅谈

    写在前面 最近因为项目预研,花时间和精力了解并总结了现如今web在线视频的一些解决方案,由于资历薄浅,措辞或是表述难免出现遗漏,还望各位海涵,有好的建议或方案还望赐教,定细心学习品位. 如今的web技 ...

  6. Web在线报表设计器使用指南

    市面上的报表工具有很多,虽说功能大同小异,但每一个报表工具都有各自明确的定位,选择最合适的工具,才能达到事半功倍的效果. 本文将要介绍的ActiveReports报表工具,可全面满足 .NET 报表开 ...

  7. web在线打印,打印阅览,打印维护,打印设计

    winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕 ...

  8. 自己常用的8个Web在线工具

    为什么要用 Web 在线工具呢?有两个原因,第一,它不受限于物理平台,我既可以在自己的电脑上使用,也可以在公司或亲戚朋友的电脑上使用(不管对方的操作系统是什么,只要能上网):第二,可以解放硬盘,减少 ...

  9. atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php

    atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服 ...

随机推荐

  1. ionic实现双击返回键退出功能

    实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让i ...

  2. WP8:Unity3D之间的值传递

    在前面的讨论中,我们介绍了如何在Unity3D for WP8中使用高于.Net 3.5的第三方库,传送门:http://www.cnblogs.com/zhxilin/p/3311240.html ...

  3. 《OD学hadoop》第四周0716

    7.16 一.回顾 二.HDFS Federation(联盟) Hadoop 2.2.0发布新特性 很多的大公司都在使用:BAT HDFS Federation + HDFS HA架构 互相隔开,但是 ...

  4. NSAutoReleasePool

    做iPhone应用开发已经2年多了, 但一些基础的概念性问题只是大致了解, 脑袋中有个模糊的概念. 虽然对平时工作开发没什么影响, 不过时间长了, 心里总是有点虚. 所以从现在开始, 每当我遇到一个模 ...

  5. Unity轻量级依赖注入容器

    一.前言 Unity是一个轻量级的可扩展的依赖注入容器,支持构造函数,属性和方法调用注入.在Nuget里安装unity

  6. JSON(四)——异步请求中前后端使用Json格式的数据进行交互

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. 一,json格式字符串 <input type="button" id=&quo ...

  7. Android开发学习之路--图表实现(achartengine/MPAndroidChart)之初体验

      已经有一段时间没有更新博客了,在上周离开工作了4年的公司,从此不再安安稳稳地工作了,更多的是接受挑战和实现自身价值的提高.离开了嵌入式linux,从此拥抱移动互联网,也许有点为时已晚,但是相信通过 ...

  8. 使用Github来管理的代码片段

    代码片段介绍 xcode4引入了一个新feature: code snippets,在整个界面的右下角,可以通过快捷键:cmd + ctrl + opt + 2 调出来.code snippets是一 ...

  9. James Munkres Topology: Sec 18 Exer 12

    Theorem 18.4 in James Munkres “Topology” states that if a function \(f : A \rightarrow X \times Y\) ...

  10. myeclipse-common 找不到

    1. 首先打开myeclipse 2. 找到myeclipse的顶部导航栏"myclipse"选项然后打开"Installation Summary..."然后 ...