h5在线1v1客服|web在线客服系统|h5即时聊天

网上有很多环信、美恰之类的客服系统,最近也使用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];
    }
});

原文地址:https://www.cnblogs.com/xiaoyan2017/p/9393565.html

时间: 2024-09-30 10:10:16

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

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

前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 图片来自G+ 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍

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

一.与潜在客户实时聊天的神奇-zopim Zopim是一款高效的可嵌入网页中去的即使通讯与网站访客信息追踪的的Web软件.知道谁在访问您的网站吗?想和他们实时交流吗?想更有效的把握商机吗?使用Zopim这款嵌入即时通讯软件,能让你达到如下目的:网站访客只需点击网页中的对话图标,无需安装或者下载任何软件,就能直接和网站客服人员进行即时交流.Zopim将是商家进行网络营销和在线客服支持的好帮手. Zopim是以聊天栏(Chatbar)形式嵌入到网站页面底部的即时通讯Widget.这使得任何正在浏览添

如何缩短淘宝客链接网址 淘客短网址在线生成教程

做过淘宝客的网友们都知道,淘宝客推广的网址都很长的一个网址,因为里面携带了大量的参数,链接过长的话就是导致我们推广起来很麻烦,京东和淘宝的官方短网址又有很多的限制,使用来不是很方便.现在我就给大家推荐几个方法,此方法可以很好的使用.可以将我们的推广链接缩短成新浪短网址?.如里大家使用的感觉满意就,支持一下. 资源地址: 技术人员的话可以直接使用API接口调用生成,非技术人员可以选择下面的在线生成地址.使用在线生成功能!虽然有限制,但是这个接口已经可以满足大部分的朋友了!希望可以帮助到大家.网站上

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

https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档与pdf文档实例, 1.首先我们需要找到可以把office转换成pdf的方法,查找资料发现有openoffice这一软件可以把office转换成pdf,这一软件先下载下来,然后记住自己安装的在那个位置.然后在cmd环境下进入安装目录的program目 云计算 云服务器ECS 大数据 建站 备案 文档

微信公众平台多客服新增自定义客服头像和消息转发接口功能

多客服一般是开放给微信认证服务号的一个便捷功能,可以将消息转发到多客服方便回复.对有些“选择综合症“的客服,看到那一层不变的客服头像就想吐槽.现在好了,多客服新增自定义客服头像和接口功能,也可以自定义昵称 一.开通“多客服”的公众号可为客服工号配置自定义头像. 使用6.0.2版微信的用户在同公众号进行客服沟通时,可以看到配置的客服头像和昵称. 二.为满足公众号个性化客服需求,公众平台为开发者提供了“多客服”相关接口,可将消息转发到多客服 和 消息转发到指定客服. A:如果公众号处于开发模式,普通

Atitit.office&#160;word&#160;&#160;excel&#160;&#160;ppt&#160;pdf&#160;的web在线预览方案与html转换方案&#160;attilax&#160;总结

Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word  excel pdf 的web预览要求1 1.1. 显示效果要好1 1.2. 可以自定义显示界面1 1.3. 不需要控件,兼容性好1 1.4. 支持编辑操作1 2. 纯html预览解决之道(自由的格式)1 3. 转换swf flash方案2 4. 转换pdf方式..更多的浏览器已经直接支持pdf格式查看2 5. 控件方式2 6. Hyb

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

winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕着众多的程序员,或者就是web 打印需要浏览器安装 ActiveX 组件,ActiveX安装不容易成功等等问题. 下面我们来看一种web在线阅览,在线编辑,在线打印的解决方案,Lodop这一款在线打印工具在各版本浏览器的兼容性表现不错,功能方面,我们常用的打印阅览,打印设计,打印机设置等他都提供了,

微信公众平台开发(73) 客服接口发送客服消息

原文:微信公众平台开发(73) 客服接口发送客服消息 微信公众平台开发 客服接口 发送客服消息作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/weixin73-custom-send.html 当用户主动发消息给公众号的时候(包括发送信息.点击自定义菜单clike事件.订阅事件.扫描二维码事件.支付成功事件.用户维权),微信将会把消息数据推送给开发者,开发者在一段时间内(目前为24小时)可以调用客服消息接口,通过POST一个JSON数据包来发送消息给普通

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

atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服务器文件夹挑选文件,在返回... 1 2. 在线文件管理器要实现的基本的功能::指定开始目录,指定getfile回调 1 3. 组件选型:: elFinder (3M) ,,php web ftp 1 4. elFinder 的概念 1 5. elFinder  1.x 的使用过程 2 6. elF