前端聊天工具

最新推荐文章于 2023-06-16 16:42:22 发布
最新推荐文章于 2023-06-16 16:42:22 发布
阅读量786 收藏 2
点赞数
文章标签： 前端 聊天 简单的在线客服 在线客服 前端在线客服
原文链接：https://www.cnblogs.com/libin-1/p/6853662.html
版权

简单的前端客服聊天

html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>客服聊天</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../layui-src/dist/css/layui.css" />
<script src="../js/library/hio.js"></script>
<style>
/*公共样式*/
html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{-webkit-overflow-scrolling:touch;margin:0;}
ul{margin:0;padding:0;list-style:none;outline:none;}
dl,dd{margin:0;}
a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
img{border:0;}
p{margin:0;}
input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
/*页面公共样式*/
body {
    position: relative;
}
.dialogue-wrapper {
    font-size: 14px;
    color: #fff;
}


.dialogue-wrapper .dialogue-support-btn .dialogue-support-icon {
    position: relative;
    display: inline-block;
    margin-bottom: -2px;
    width: 20px;
    height: 16px;
    border-radius: 4px;
    background-color: #fff;
}

.dialogue-wrapper .dialogue-support-btn .dialogue-support-icon:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -3px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #fff;
}

.dialogue-wrapper .dialogue-support-btn .dialogue-support-line {
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.dialogue-wrapper .dialogue-support-btn .dialogue-support-text {
    padding: 5px 0;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    -webkit-user-select: none;
}

/*底部客服对话框*/
.dialogue-wrapper .dialogue-main {
    width: 100%;
    height: 100%;
}

/*客服对话框头部*/
.dialogue-wrapper .dialogue-main .dialogue-header {
    position: relative;
    padding: 10px;
    height: 80px;
    background-color: #09853d;
}

.dialogue-wrapper .dialogue-main .dialogue-service-info {
    margin-top: 8px; 
    height: 40px;
}

.dialogue-wrapper .dialogue-main .dialogue-service-img {
    display: inline-block;
    margin: 0 10px 0 20px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
    color: #000;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    background-image: url("../img/publicImg/icon.png");
    background-size: 200%;
    background-position: 73% 96%;
    background-repeat: no-repeat;
    background-color: #fff;
}

.dialogue-wrapper .dialogue-main .dialogue-service-title {
    display: inline-block;
    vertical-align: middle;
}

.dialogue-wrapper .dialogue-main .dialogue-service-detail {
    font-size: 12px;
}

/*客服对话框内容*/
.dialogue-wrapper .dialogue-main .dialogue-contain {
    overflow-y: auto;
    padding: 30px 10px;
    height: 290px;
    word-wrap: break-word;
    background-color: #f9f9f9;
}

.dialogue-wrapper .dialogue-main .dialogue-text {
    display: inline-block;
    position: relative;
    padding: 10px;
    max-width: 50%;
    line-height: 23px;
    white-space: pre-wrap;
    border: 1px solid #09853d;
    border-radius: 4px;
    background-color: #09853d;
    box-sizing: border-box;
}
.dialogue-wrapper .dialogue-main .dialogue-text2 {
    display: inline-block;
    position: relative;
    padding: 10px;
    max-width: 50%;
    line-height: 23px;
    white-space: pre-wrap;
    border: 1px solid #09853d;
    border-radius: 4px;
    background-color: #eee;
    box-sizing: border-box;
    color: #09853d;
}

.dialogue-wrapper .dialogue-main .dialogue-service-contain {
    margin-bottom: 10px;
    text-align: left;
}

.dialogue-wrapper .dialogue-main .dialogue-service-text {
    margin-left: 20px;
}

.dialogue-wrapper .dialogue-main .dialogue-service-text:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #09853d;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.dialogue-wrapper .dialogue-main .dialogue-customer-contain {
    margin-bottom: 10px;
    text-align: right;
}

.dialogue-wrapper .dialogue-main .dialogue-customer-text {
    margin-right: 20px;
}

.dialogue-wrapper .dialogue-main .dialogue-customer-text:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #09853d;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

/*客服对话框底部与输入*/
.dialogue-wrapper .dialogue-main .dialogue-submit {
    position: relative;
    padding: 10px;
    height: 80px;
    color: #000;
    word-wrap: break-word;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
}
/*输入框*/
.dialogue-wrapper .dialogue-submit .dialogue-input-text {
    overflow-y: auto;
    display: inline-block;
    padding: 5px 10px;
    width: 100%;
    height: 70px;
    vertical-align: middle;
    white-space: pre-wrap;
    word-wrap: break-word;
    resize: none;
    /* border-right: 1px solid #ddd; */
    box-sizing: border-box;
}

.dialogue-wrapper .dialogue-submit .dialogue-input-tools {
    display: inline-block;
    width: 80px;
    height: 80px;
    vertical-align: middle;
}
</style>
</head>
<body>
<div class="dialogue-wrapper">
    <!-- 对话框 -->
    <div class="dialogue-main">
        <div class="dialogue-header">
            <div class="dialogue-service-info">
                <i class="dialogue-service-img" sql="头像"></i>
                <div class="dialogue-service-title">
                    <p class="dialogue-service-name">叮小咚 （在线）</p>
                </div>
            </div>
        </div>
        <div id="dialogue_contain" class="dialogue-contain">
            <p class="dialogue-service-contain"><span class="dialogue-text dialogue-service-text">您好，我是您的人工智能客服叮小咚</span></p>
        </div>
        <div class="dialogue-submit">
            <textarea id="dialogue_input" class="dialogue-input-text" placeholder="请输入您的问题，按Enter键提交（shift+Enter换行）"></textarea>
        </div>
    </div>
</div>
<script src="../layui-src/dist/layui.all.js"></script>
<script src="../js/qq.js"></script>
</body>
</html>
js
var urlVal = sessionStorage.getItem("urlVal");
// 模拟一些后端传输数据

// var serviceData = {
//     'robot': {
//         'name': 'robot001',
//         'dialogue': ['您好，我们官方联系电话023-68629315', '客服繁忙请留言', '您好，我是的您的专属客服'],
//         'welcome': '您好，机器人Odin客服为您服务'
//     }
// };
// 获取到输入框dialogueInput；获取到聊天框dialogueContain；获取到发送内容不能为空dialogueHint；
var dialogueInput = document.getElementById('dialogue_input'),
    dialogueContain = document.getElementById('dialogue_contain'),
    btnOpen = document.getElementById('btn_open'),
    btnClose = document.getElementById('btn_close'),
    timer,
    timerId,
    shiftKeyOn = false;  // 辅助判断shift键是否按住
// 输入框
dialogueInput.addEventListener('keydown', function(e) {
    var e = e || window.event;
    if (e.keyCode == 16) {
        // shiftKeyOn = true;
        shiftKeyOn = false;
    }
    if (shiftKeyOn) {
        return true;
    } else if (e.keyCode == 13 && dialogueInput.value == '') {
        layer.tips('不能为空哦~', '#dialogue_input', {
            tips: [1,"#09853d"],
            anim: 6,
            time:1000
          });
        return true;
    } else if (e.keyCode == 13) {
        var nodeP = document.createElement('p'),
            nodeSpan = document.createElement('span');
        nodeP.classList.add('dialogue-customer-contain');
        nodeSpan.classList.add('dialogue-text2', 'dialogue-customer-text');
        nodeSpan.innerHTML = dialogueInput.value;
        nodeP.appendChild(nodeSpan);
        dialogueContain.appendChild(nodeP);
        // 多条聊天后增加高度
        dialogueContain.scrollTop = dialogueContain.scrollHeight;
        submitCustomerText(dialogueInput.value);
    }
});
// 输入框内的事件
dialogueInput.addEventListener('keyup', function(e) {
    var e = e || window.event;
    if (e.keyCode == 16) {
        shiftKeyOn = false;
        return true;
    }
    if (!shiftKeyOn && e.keyCode == 13) {
        // 输出内容，清空输入框
        dialogueInput.value = null;
    }
});
// 对话框事件
function submitCustomerText(text) {
    console.log(text)
    // AjaxGet("get", "/ask/?text="+text, reService)
    Promise.all([
        $.ajax({
            url: urlVal + "/ask/?text="+text,
            type: "get",
            dataType: "json"
        })
    ]).then(
        resolve => { //成功的时候
            reService(resolve);
        },
        reject => {
            rejectTime(reject)
        }
    );
    // code here 向后端发送text内容

    // 模拟后端回复
    // var num = Math.random() * 10;
    // if (num <= 7) {
    //     getServiceText(serviceData);
    // }
}
//前端模拟回复
// function getServiceText(data) {
//     var serviceText = data.robot.dialogue,
//         i = Math.floor(Math.random() * serviceText.length);
//         // 回复区域
//     var nodeP = document.createElement('p'),
//         nodeSpan = document.createElement('span');
//         // 给样式
//     nodeP.classList.add('dialogue-service-contain');
//     nodeSpan.classList.add('dialogue-text', 'dialogue-service-text');
//     nodeSpan.innerHTML = serviceText[i];
//     nodeP.appendChild(nodeSpan);
//     dialogueContain.appendChild(nodeP);
//     dialogueContain.scrollTop = dialogueContain.scrollHeight;
// }
function reService(data){
    console.log(data);
    let serviceText=data[0].response;
    var nodeP = document.createElement('p'),
    nodeSpan = document.createElement('span');
        // 给样式
    nodeP.classList.add('dialogue-service-contain');
    nodeSpan.classList.add('dialogue-text', 'dialogue-service-text');
    nodeSpan.innerHTML = serviceText;
    nodeP.appendChild(nodeSpan);
    dialogueContain.appendChild(nodeP);
    dialogueContain.scrollTop = dialogueContain.scrollHeight;
}
// 渐隐
function fadeOut(obj) {
    var n = 100;
    var time = setInterval(function() {
        if (n > 0) {
            n -= 10;
            obj.style.opacity = '0.' + n;
        } else if (n <= 30) {
            obj.style.opacity = '0';
            clearInterval(time);
        }
    }, 10);
    return true;
}

// 渐显
function fadeIn(obj) {
    var n = 30;
    var time = setInterval(function() {
        if (n < 90) {
            n += 10;
            obj.style.opacity = '0.' + n;
        } else if (n >= 80) {
            
            obj.style.opacity = '1';
            clearInterval(time);
        }
    }, 100);
    return true;
}
js调用
// 在线客服
$(".icon-kefu").click (function(e) {
    layui.use("layer", function() {
      var layer = layui.layer;
      layer.open({
        type: 2,
        title: "在线客服",
        content: ["../../page/kefu.html", "no"],
        skin: "kefu-class",
        offset: "rb",
        anim: 2,
        area: ["400px", "600px"],
        shade: 0,
        maxmin: true, 
      });
    });
  })
大聂不优秀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
chat-layui:贤心 layui 即时聊天
04-28
yui作者的聊天工具，用于贤心
怎样在零JS代码情况下实现一个实时聊天功能，前端开发经验的有效总结
最新发布
2301_77118221的博客
03-31 1068
前端字节跳动真题解析经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-pdhzJDYw-1711860169638)]前端字节跳动真题解析[外链图片转存中…(img-iQRhcEDY-1711860169638)]
Layim 自定义聊天界面
热门推荐
xingnang2008的专栏
02-21 1万+
自定义需求：给聊天窗口加侧边，内容为公司介绍！ 原窗口： 修改后 修改步骤： 1.更改窗体大小 和 结构 需要修改layim.js中的 【聊天主模板】 elemChatTpl 修改窗体大小，整加侧边 layim-chat-left layim-chat-right layim.css /* 聊天页 右侧加公司信息 */ .layim-chat-left{ width: 400px; ...
django之Layui界面点击弹出个对话框并请求逻辑生成分页的动态表格
茕夜
01-16 1161
1、首先，界面上有个按钮触发操作： <button type="button" class="layui-btn layui-btn-normal" id="user_list">用户列表</button> 2、点击这个按钮触发之后，会弹出一个对话框并请求view，从数据库中得到数据并产生动态表格，其中script代码如下： <script> ...
web版聊天工具
acoder0的博客
06-23 251
springboot+vue实现的简单聊天工具
web聊天框页面
qq_41060065的博客
06-12 1248
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天窗口</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &l
java+websocket+html+layui实现多人分房间聊天
qq_39951524的博客
06-16 588
工作几年，略有心得，然很少整理成文，平常工作中浏览了不少道友的好文章，受益良多。顾也开始写一些文章， 希望能与各位道友分享进步！
layui+php+mysql后台管理系统，带实时聊天功能
07-20 1348
4.角色与权限管理页面。5.导航菜单管理页面。6.组织机构详细页面。
基于layui样式的聊天功能
09-04
基于layui风格实现im聊天功能，亲测无问题。 只需引入layim.js以及layui.css即可，本人写了一篇Springboot + shiro + layui + socketio实现的消息推送以及聊天功能
springboot+websocket+layui制作的实时聊天室，后端开发入门样例
就很有趣的博客
08-09 2425
这里写目录标题前言效果图涉及技术springbootlayuiwebsocket实现思路websocket在springboot下的实现前端实现建立websocket连接前端对应的websocket方法代码实现后端代码建立连接时接收到消息时发送消息总代码前端代码总结 前言 复习感觉无聊的时候就想拿以前学习的东西做几个小案例，这段时间在搭一个博客网站，正好做到私信这个模块，突然想试试看看可不可以做成一个实时通信的私信功能，思路一来就一发不可收拾，开整开征。 效果图 如下图所示，可以实现文字的即时通讯，图片发送
基于Springboot+websocket+layui仿QQ在线聊天系统
11-02
## 后端采用Springboot框架，前端layui界面，前端和后端聊天基于websocket通信！ 注意，目前这个项目没实现注册功能，用户账号和密码都在user表，如果注册添加用户之间打开mysql数据库表操作即可 ## 实现了用户的登录，好友请求添加到分组，未读消息提示，好友之间聊天等常用的聊天功能，界面相当漂亮！ 测试用户账号密码： 李沫熙/123456 测试用户账号密码： 刘亦菲/123456
前端聊天框架 3.7.7
06-20
前端聊天框架3.7.7版本 非常好用的聊天框架 对接json格式的数据就行了
web聊天工具前端vuevuexvueclivuerouteraxiosscss
08-10
后端node(koa2) mysql JWT(Json web token)验证身份 socket.io双向...功能页面借鉴qq，微信，TIM，有登录注册，私聊，群聊，加(删、搜)好友，加(退、建、搜)群，修改备注、个人信息，未读消息提示，机器人智能聊天等。
聊天工具React
02-22
聊天应用 使用Go和React构建一个聊天应用程序。 教程： ： 入门 克隆这个存储库和cd进去。 有关如何从Chatkit获取所需凭据的注释，请参阅教程。 将.env.example重命名为.env并...用于创建应用程序前端 聊天功能 执照
超级聊天前端挑战
02-07
Create React App入门 该项目是通过。 ... 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，ESLi
基于netty去实现websocket 单聊+群聊 前端使用layui模板引擎
qq_42758867的博客
05-14 5388
本项目开发周期比较短 大部分都是围绕业务来去实现 很多需要完善地方这里只是出了一个简短的例子 ps:在此之前没有搞过即时通讯，这个项目也算是入门大佬勿喷 所使用的技术: netty,rabbitMQ,redis,mongoDB,mysql 先上java依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-
使用Layui制作界面及功能
yifei_345678的博客
07-22 5004
Layui入门
前端socket实现基础聊天功能
03-30
前端实现基础聊天功能需要使用Socket.IO库，该库可以在客户端和服务端之间创建实时、双向、基于事件的通信。下面是一个简单的聊天室示例： 1. 安装Socket.IO库 使用npm命令行工具安装： ```bash npm install socket.io ``` 2. 创建聊天室页面 在HTML文件中添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Socket.IO Chat Example</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); $('form').submit(function(e){ e.preventDefault(); // 阻止表单默认提交行为 socket.emit('chat message', $('#m').val()); // 发送消息给服务端 $('#m').val(''); // 清空输入框 return false; }); socket.on('chat message', function(msg){ // 监听服务端发送的消息 $('#messages').append($('<li>').text(msg)); }); }); </script> </body> </html> ``` 3. 创建服务器 创建一个Node.js服务器，使用Socket.IO库进行通信。在服务器端创建一个Socket.IO实例，监听连接事件，当有新的连接时，为连接的客户端绑定事件处理函数，监听客户端发送的消息，并将消息广播给所有连接的客户端。 ```javascript var app = require('http').createServer(handler) var io = require('socket.io')(app) var fs = require('fs') app.listen(3000) function handler (req, res) { fs.readFile(__dirname + '/index.html', function (err, data) { if (err) { res.writeHead(500) return res.end('Error loading index.html') } res.writeHead(200) res.end(data) }) } io.on('connection', function (socket) { console.log('a user connected') socket.on('chat message', function(msg){ io.emit('chat message', msg) // 广播消息给所有连接的客户端 }) socket.on('disconnect', function(){ console.log('user disconnected') }) }) ``` 4. 运行应用程序 在终端中运行以下命令启动应用程序： ```bash node app.js ``` 在浏览器中打开```http://localhost:3000```，即可进入聊天室。在不同的浏览器窗口中打开该链接，即可进行实时聊天。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值