网页客服思路以及QQ截图粘贴到聊天框功能
功能:
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截图粘贴到聊天框功能的更多相关文章
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- QQ客服出现“企业QQ在线咨询无权限在当前场景使用!” 问题
加入了QQ“多客服”功能 会出现这个问题 解决办法: 在平台http://wp.qq.com/ 上设置,只需两步骤 步骤一:在http://wp.qq.com/set.html 里,安全级别选项,选择 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十四)之漏掉的客服消息
前言 不知不觉已经十四篇了,其实已经没有什么可写了.但是突然发现layim中带的客服功能没有用到.于是乎,抽点时间完成吧.其实之前的工作已经把客服功能完成了一大半,剩下的我们稍微调整即可.今天的演示我 ...
- 客服小妹是如何泡到手的——C#定时提醒·语音录制·语音播放·文件转录Demo源码——倾情奉献!
一.需求提出 客服小妹跟我说,每天要统计新加好友数,得先记下昨天的数目,然后查看今天的数目,还要相减,打字,记录——好麻烦! 又说,客户多的时候,忙起这头忘了那头,文字记录备忘又太费劲! 我说,赐你一 ...
- 基于Odoo框架的开源在线客服系统
cs_base 开源客服系统,基于 Odoo 的客服模块 cs_base 是在强大的 Odoo 框架的基础上实现的一个在线客服应用 基础模块包含完整的 Web 在线客服的接入,坐席管理等,通过扩展可方 ...
- 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...
- QQ去除聊天框广告详解——2016.9 版
QQ聊天框广告很烦人,百度出来的一些方法早已过时,下面是博主整理出来的方法,供各位同学参考. 1.按键盘上的 Win+R 快捷键打开运行框,然后复制并粘贴 Application Data\Tence ...
- 一步一步搭建客服系统 (3) js 实现“截图粘贴”及“生成网页缩略图”
最近在做一个客服系统的demo,在聊天过程中,我们经常要发一些图片,而且需要用其它工具截图后,直接在聊天窗口里粘贴,就可以发送:另外用户输入一个网址后,把这个网址先转到可以直接点击的link,并马上显 ...
- QQ在线客服JS代码,自适应漂浮在网页右侧
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
随机推荐
- Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree 题解(贪心+易错)
题目链接 题目大意 给你一课树,要你给每一条边分权值,每条边的权值大于0,他们的乘积等于k,而且要使得n-1条边1的数量尽可能少,定义 f(u,v)为u到v的边权和求 \(\max \sum_{i=1 ...
- 为k8s预留系统资源
为k8s预留系统资源 Kubernetes 的节点可以按照 Capacity 调度.默认情况下 pod 能够使用节点全部可用容量. 这是个问题,因为节点自己通常运行了不少驱动 OS 和 Kuberne ...
- z-index失效原因分析——由一个bug引发的对层叠上下文和z-index属性的深度思考
新年刚开工就被一个bug虐得整个人都不好了,特地记录下. (一)bug描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段提示的特效,所以做了一个提示层,但 ...
- Codeforces Round #677 (Div. 3)
F. Zero Remainder Sum || dp #include <cstdio> #include <algorithm> #include <cstring& ...
- DBeaver连接达梦|虚谷|人大金仓等国产数据库
前言 工作中有些项目可能会接触到「达梦.虚谷.人大金仓」等国产数据库,但通常这些数据库自带的连接工具使用并不方便,所以这篇文章记录一下 DBeaver 连接国产数据库的通用模版,下文以达梦为例(其他国 ...
- PyQt(Python+Qt)学习随笔:containers容器类部件QMdiArea多文档界面的QMdiSubWindow子窗口相关属性和操作方法
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 1.增加子窗口 QMdiArea中的子窗口类型是QMdiSubWind ...
- 第15.23节 PyQt(Python+Qt)入门学习:Model/View架构中QListView视图配套Model的开发使用
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 QListView理论上可以和所有QAbstractItemModel派生的类如QStri ...
- win10系统rational rose 安装后打开弹框显示java.lang.ClassNotFoundException 解决方案
场景复现:安装Rational Rose,按照破解方法完成后,打开程序,会弹出对话框显示java.lang.ClassNotFoundException,在关闭程序时也会弹出一个对话框,并且程序不能关 ...
- 再也不怕 JavaScript 报错了,怎么看怎么处理都在这
在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来.至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理 ...
- 个人项目作业WC
项目github地址 https://github.com/gs735028922gs/wordc 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写 ...