功能:

1、客服需登录进入客服页面。用户无需登录,进入用户页面,直接获取sessionId作为id值。

2、用户进入页面并且发送消息时,客服才会获取到该用户,并在左侧列表显示。

3、点击用户名即可切换聊天对象,正在聊天的用户,用户名为选中状态。

4、每条消息的时间显示在本条消息上方(水平居中)。消息时间间隔不足1分钟,则此不显示时间。

5、每次读取的消息均为最新消息。

6、客服未与其正在聊天的用户发送新消息时应有新消息提示。

7、用户关闭浏览器或长时间无回应时,将用户置为下线。

客服界面将清空与下线用户的聊天窗口,且下线用户不显示在左侧列表中。

8、用户长时间无回应置为下线后,刷新可继续在线与客服聊天。

9、发送:1)输入框未输入消息时,提示“发送内容不能为空”。

2)未选择用户时,提示“请选择用户”。

数据库表:

三张表:客服(user),用户(customer),聊天记录(cs_chat_record)。

客服表主要字段:id,name,password,online,currentPeople;

用户表主要字段:id,name,online,headImg;

聊天记录表主要字段:id,userId,customerId,userContent,customerContent,time;

主要思路:

1、用户进入页面:查看当前用户有没有正在被客服人员接待

①正在被接待:设置用户为在线状态(因为刷新会有下线操作)。

②未被接待:获取所有在线客服每个人正在接待的用户人数,并给该用户分配一个当前接待人数少的客服。

修改此客服正在接待的人数,将用户添加到用户表中(设置为在线状态)。

将用户和客服均存到session中。

2、客服进入页面:常规验证。

4、用户和客服发送消息时,都先将信息保存到数据库。

5、用户和客服界面,都是一秒刷新一次获取最新消息。

6、客服页面:当前正在沟通的用户列表,每秒获取一次,将不在线的用户在列表清除。

7、长时间无回复的用户置为下线,用到数据库定时器。

8、用户关闭浏览器置为下线,用到的是window.onbeforeunload方法。

9、新消息提醒:保存用户消息将用户头像设置成有红点的,获取消息时将用户头像设置为无红点的。

QQ截图在网页聊天中不能直接粘贴,要实现像QQ微信一样能直接粘贴成图片需要做一些操作
利用paste事件捕获粘贴事件,clipboardData获取剪切板中的内容将文件用filereader接口读取出来

function paseImg()
{
var imgReader = function (item) {
var blob = item.getAsFile(),
reader = new FileReader(); reader.onloadend = function (e) { //显示图像
var msg = "<img src='"+e.target.result+"' style='max-width:60%;max-height:250px;'/>";
$('#textarea').append(msg);
}; reader.readAsDataURL(blob);
}; document.getElementById("textarea").addEventListener("paste",function(e){
var clipboardData = e.clipboardData,
i = 0,
items, item, types;
if (clipboardData) {
items = clipboardData.items; if (!items) {
return;
} item = items[0];
types = clipboardData.types || []; for (; i < types.length; i++) {
if (types[i] === 'Files') {
item = items[i];
break;
}
} if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
imgReader(item);
}
}
});
}
paseImg();

网页客服思路以及QQ截图粘贴到聊天框功能的更多相关文章

  1. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  2. QQ客服出现“企业QQ在线咨询无权限在当前场景使用!” 问题

    加入了QQ“多客服”功能 会出现这个问题 解决办法: 在平台http://wp.qq.com/ 上设置,只需两步骤 步骤一:在http://wp.qq.com/set.html 里,安全级别选项,选择 ...

  3. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十四)之漏掉的客服消息

    前言 不知不觉已经十四篇了,其实已经没有什么可写了.但是突然发现layim中带的客服功能没有用到.于是乎,抽点时间完成吧.其实之前的工作已经把客服功能完成了一大半,剩下的我们稍微调整即可.今天的演示我 ...

  4. 客服小妹是如何泡到手的——C#定时提醒·语音录制·语音播放·文件转录Demo源码——倾情奉献!

    一.需求提出 客服小妹跟我说,每天要统计新加好友数,得先记下昨天的数目,然后查看今天的数目,还要相减,打字,记录——好麻烦! 又说,客户多的时候,忙起这头忘了那头,文字记录备忘又太费劲! 我说,赐你一 ...

  5. 基于Odoo框架的开源在线客服系统

    cs_base 开源客服系统,基于 Odoo 的客服模块 cs_base 是在强大的 Odoo 框架的基础上实现的一个在线客服应用 基础模块包含完整的 Web 在线客服的接入,坐席管理等,通过扩展可方 ...

  6. 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...

  7. QQ去除聊天框广告详解——2016.9 版

    QQ聊天框广告很烦人,百度出来的一些方法早已过时,下面是博主整理出来的方法,供各位同学参考. 1.按键盘上的 Win+R 快捷键打开运行框,然后复制并粘贴 Application Data\Tence ...

  8. 一步一步搭建客服系统 (3) js 实现“截图粘贴”及“生成网页缩略图”

    最近在做一个客服系统的demo,在聊天过程中,我们经常要发一些图片,而且需要用其它工具截图后,直接在聊天窗口里粘贴,就可以发送:另外用户输入一个网址后,把这个网址先转到可以直接点击的link,并马上显 ...

  9. QQ在线客服JS代码,自适应漂浮在网页右侧

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

随机推荐

  1. Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree 题解(贪心+易错)

    题目链接 题目大意 给你一课树,要你给每一条边分权值,每条边的权值大于0,他们的乘积等于k,而且要使得n-1条边1的数量尽可能少,定义 f(u,v)为u到v的边权和求 \(\max \sum_{i=1 ...

  2. 为k8s预留系统资源

    为k8s预留系统资源 Kubernetes 的节点可以按照 Capacity 调度.默认情况下 pod 能够使用节点全部可用容量. 这是个问题,因为节点自己通常运行了不少驱动 OS 和 Kuberne ...

  3. z-index失效原因分析——由一个bug引发的对层叠上下文和z-index属性的深度思考

    新年刚开工就被一个bug虐得整个人都不好了,特地记录下. (一)bug描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段提示的特效,所以做了一个提示层,但 ...

  4. Codeforces Round #677 (Div. 3)

    F. Zero Remainder Sum || dp #include <cstdio> #include <algorithm> #include <cstring& ...

  5. DBeaver连接达梦|虚谷|人大金仓等国产数据库

    前言 工作中有些项目可能会接触到「达梦.虚谷.人大金仓」等国产数据库,但通常这些数据库自带的连接工具使用并不方便,所以这篇文章记录一下 DBeaver 连接国产数据库的通用模版,下文以达梦为例(其他国 ...

  6. PyQt(Python+Qt)学习随笔:containers容器类部件QMdiArea多文档界面的QMdiSubWindow子窗口相关属性和操作方法

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 1.增加子窗口 QMdiArea中的子窗口类型是QMdiSubWind ...

  7. 第15.23节 PyQt(Python+Qt)入门学习:Model/View架构中QListView视图配套Model的开发使用

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 QListView理论上可以和所有QAbstractItemModel派生的类如QStri ...

  8. win10系统rational rose 安装后打开弹框显示java.lang.ClassNotFoundException 解决方案

    场景复现:安装Rational Rose,按照破解方法完成后,打开程序,会弹出对话框显示java.lang.ClassNotFoundException,在关闭程序时也会弹出一个对话框,并且程序不能关 ...

  9. 再也不怕 JavaScript 报错了,怎么看怎么处理都在这

    在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来.至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理 ...

  10. 个人项目作业WC

    项目github地址 https://github.com/gs735028922gs/wordc 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写 ...