前言：本篇讲述的是小刘当初使用websocket写客服功能创建的页面。本篇只贴了前端代码，如有需要后台功能代码，请联系我。如果你恰好在写会话交流，希望能帮助你!
页面效果如下：
代码Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/kefu.css" type="text/css" />
<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<div class="chat_box">
<div class="chat_box_left">
<div class="chat_box_left_header">
<div class="header_left">
<img src="../img/13.jpg" />
</div>
<div class="header_right">愤怒的小蜗牛</div>
</div>
<div class="chat_box_left_reminder">
................ ................ ................
</div>
<ul class="chat_box_left_bottom">
<li>
<div class="li_left">
<img src="../img/2.jpg" />
</div>
<div class="li_right">
<span class="account">
账户1
<i style="color: brown;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
<li>
<div class="li_left">
<img src="../img/4.jpg" />
</div>
<div class="li_right">
<span class="account">
账户2
<i style="color: goldenrod;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
<li>
<div class="li_left">
<img src="../img/5.jpg" />
</div>
<div class="li_right">
<span class="account">
账户3
<i style="color: greenyellow;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
<li>
<div class="li_left">
<img src="../img/6.jpg" />
</div>
<div class="li_right">
<span class="account">
账户4
<i style="color: hotpink;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
<li>
<div class="li_left">
<img src="../img/7.jpg" />
</div>
<div class="li_right">
<span class="account">
账户5
<i style="color: rosybrown;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
<li>
<div class="li_left">
<img src="../img/9.jpg" />
</div>
<div class="li_right">
<span class="account">
账户6
<i style="color: blueviolet;" class="messageColor glyphicon glyphicon-envelope"></i>
</span>
<span class="account_accept_message">该用户接收的信息</span>
</div>
</li>
</ul>
</div>
<div class="chat_box_right">
<div class="chat_box_right_header">
<!-- 正在与账户<span>用户一</span>的用户进行在线会话-->
</div>
<div class="chat_box_right_center">
<div class="content">
<!--
作者：offline
时间：2019-02-15
描述：发送信息后要清除浮动
-->
<div class="sent_image_header">
<img src="../img/2.jpg" height="60px" width="60px" />
</div>
<div class="send_content">生命的美丽，永远展现在她的进取之中;就像大树的美丽，是展现在它负势向上高耸入云的蓬勃生机中;像雄鹰的美丽，是展现在它搏风击雨如苍天之魂的翱翔中;像江河的美丽，是展现在它波涛汹涌一泻千里的奔流中</div>
<div style="clear: both;"></div>
<!--
作者：offline
时间：2019-02-15
描述：回复信息也要清除浮动
-->
<div class="answer_image_header">
<img src="../img/5.jpg" height="60px" width="60px" />
</div>
<div class="answer_content">生活里，有很多转瞬即逝，像在车站的告别，刚刚还相互拥抱，转眼已各自天涯。很多时候，你不懂，我也不懂，就这样，说着说着就变了，听着听着就倦了，看着看着就厌了，跟着跟着就慢了，走着走着就散了，爱着爱着就淡了，想着想着就算了。</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="chat_box_right_bottom">
<textarea id="textarea"></textarea>
<button class="sendBtn">发送</button>
</div>
</div>
</div>
<script>
var color = new Array('brown', 'goldenrod', 'goldenrod', 'greenyellow', 'hotpink', 'rosybrown');
var i = Math.ceil(Math.random() * color.length); //取1到10的随机整数
/**
* 指定用户的函数
*/
$('.chat_box_left_bottom li').on('click', function() {
$(this).addClass('bg').siblings().removeClass('bg');
var accountName = $(this).children('.li_right').children('.account').text();
$('.chat_box_right_header').text('正在和'+accountName+'会话');
})
/**
* 发送消息的函数
*/
$('.sendBtn').on('click', function() {
var bg = $(".chat_box_left_bottom").children(".bg");
if(bg.length == 0) {
alert("请点击选择交流的账户!");
} else {
var sendMessage = $('#textarea').val();
var sendImage = $(".header_left").children("img").attr("src");
if(sendMessage == '') {
alert("请输入要发送的信息");
} else {
var str = '';
str += '<div class="sent_image_header"><img src=' + sendImage + '/></div>' +
'<div class="send_content">' + sendMessage + '</div>' +
'<div style="clear:both;">' + '</div>';
$('.content').append(str);
$(".bg").children(".li_right").children(".account_accept_message").text(sendMessage.substring(0, 8) + '......');
$("#textarea").val(''); //清空textarea
setTimeout(answers, 1000);
$('.content').scrollTop($('.content')[0].scrollHeight); //滑动轮直接到底部
}
}
});
/**
* 回复消息的函数
*/
function answers() {
var answerImage = $(".bg").children(".li_left").children("img").attr("src");
var str = '生活里，有很多转瞬即逝，像在车站的告别，刚刚还相互拥抱，转眼已各自天涯。很多时候，你不懂，我也不懂，就这样，说着说着就变了，听着听着就倦了，看着看着就厌了，跟着跟着就慢了，走着走着就散了，爱着爱着就淡了，想着想着就算了。';
var answer = '';
answer += '<div class="answer_image_header"><img src=' + answerImage + '/></div>' +
'<div class="answer_content">' + str + '</div>' +
'<div style="clear:both;">' + '</div>';
$('.content').append(answer);
$('.content').scrollTop($('.content')[0].scrollHeight);
}
</script>
</body>
</html>CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: rgb(210, 212, 224);
}
.bg {
background: #292b2e;
border-right: 2px #ff8f2c solid;
}
/**
* 整个聊天box
*/
.chat_box {
width: 900px;
height: 650px;
margin: 50px auto;
/* border: 1px solid red;*/
}
/**
* 聊天左边
*/
.chat_box .chat_box_left {
width: 30%;
height: 100%;
float: left;
border: 1px solid black;
/*background: #333;*/
background: rgb(51, 53, 58);
color: white;
}
/**
* 对话左边的列表头部
*/
.chat_box .chat_box_left .chat_box_left_header {
height: 10%;
width: 100%;
background: #292b2e;
}
.chat_box .chat_box_left .chat_box_left_header .header_left {
height: 100%;
float: left;
width: 35%;
/* border: 2px solid white;*/
display: flex;
justify-content: center;
align-items: Center;
}
.chat_box .chat_box_left .chat_box_left_header img {
height: 100%;
width: 65%;
border-radius: 50%;
}
.chat_box .chat_box_left .chat_box_left_header .header_right {
height: 100%;
float: right;
width: 65%;
/* border: 2px solid cyan;*/
line-height: 60px;
font-size: 20px;
}
.chat_box .chat_box_left .chat_box_left_reminder {
width: 100%;
height: 8%;
/* background: red;*/
line-height: 50px;
padding-left: 20px;
border-bottom: 1px lightgrey solid;
}
/**
* 对话框左边的聊天列表
*/
.chat_box .chat_box_left .chat_box_left_bottom {
list-style-type: none;
padding: 0px;
margin: 0px;
height: 82%;
width: 100%;
overflow: auto;
}
.chat_box .chat_box_left .chat_box_left_bottom li {
width: 100%;
height: 80px;
border-top: 1px #2c2e31 solid;
}
.chat_box .chat_box_left .chat_box_left_bottom li:hover {
background: #292b2e;
cursor: pointer;
}
.chat_box .chat_box_left .chat_box_left_bottom li .li_left {
height: 100%;
float: left;
width: 35%;
/* border: 2px solid white;*/
display: flex;
justify-content: center;
align-items: Center;
}
.chat_box .chat_box_left .chat_box_left_bottom li .li_left img {
height: 85%;
width: 65%;
border-radius: 50%;
}
.chat_box .chat_box_left .chat_box_left_bottom li .li_right {
height: 100%;
float: right;
width: 65%;
/* border: 2px solid blueviolet;*/
padding: 0px;
}
.chat_box .chat_box_left .chat_box_left_bottom li .li_right span:first-of-type {
display: block;
height: 20px;
margin-top: 10px;
font-size: 18px;
color: lightgray;
}
.chat_box .chat_box_left .chat_box_left_bottom li .li_right span:last-of-type {
display: block;
height: 20px;
margin-top: 6px;
font-size: 15px;
color: gray;
}
/**
* 对话框右边边头部
*/
.chat_box .chat_box_right {
width: 70%;
height: 100%;
float: right;
/* border: 1px solid darkblue;*/
/* background: #d4d5e0;*/
background: rgb(238, 238, 238);
}
.chat_box .chat_box_right .chat_box_right_header {
height: 10%;
width: 100%;
border-bottom: 1px solid #9D9D9D;
text-align: center;
line-height: 60px;
font-size: 20px;
font-weight: bold;
color: #9ACFEA;
}
.chat_box .chat_box_right .chat_box_right_header span {
font-size: 24px;
color: grey;
}
/**
* 对话内容显示栏
*/
.chat_box .chat_box_right .chat_box_right_center {
height: 80%;
width: 100%;
/*border: 1px solid black;*/
}
.chat_box .chat_box_right_center .content {
width: 100%;
height: 100%;
overflow: auto;
}
.chat_box .content .sent_image_header {
width: 10%;
height: 60px;
float: left;
margin-top: 10px;
margin-right: 3px;
margin-left: 3px;
}
.chat_box .content .sent_image_header img {
height: 60px;
width: 60px;
}
.chat_box .content .send_content {
width: 60%;
height: auto;
float: left;
background: #fff;
margin-top: 10px;
padding: 3px;
border-radius: 5%;
min-height: 60px;
text-indent: 20px;
}
.chat_box .content .answer_image_header {
width: 10%;
height: 60px;
float: right;
margin-top: 10px;
margin-right: 3px;
margin-left: 3px;
}
.chat_box .content .answer_image_header img {
height: 60px;
width: 60px;
}
.chat_box .content .answer_content {
width: 60%;
min-height: 40px;
height: auto;
float: right;
background: #e5f3fd;
;
margin-top: 10px;
padding: 3px;
border-radius: 5%;
text-indent: 20px;
}
/**
* 对话底部发送栏
*/
.chat_box .chat_box_right .chat_box_right_bottom {
height: 10%;
width: 100%;
/* border: 1px solid gold;*/
position: relative;
}
.chat_box .chat_box_right .chat_box_right_bottom textarea {
width: 90%;
height: 100%;
resize: none;
/*禁止textarea拉伸*/
border: 1px solid #9D9D9D;
}
.chat_box .chat_box_right .chat_box_right_bottom button {
position: absolute;
right: 0px;
bottom: 0px;
height: 100%;
width: 10%;
background: olivedrab;
font-size: 20px;
font-weight: bold;
color: white;
}
.messageColor{
margin-left: 10px;
}
如果你写会话交流，这个页面可能帮助你！
如有不解，请加java爱好群大家交流：852665736；群里都是热心好客的小伙伴，大家一同进步。
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注公众号：gh_817962068649
扫一扫
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
