|
|
|
|
<html lang="cn">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
<meta name="author" content="陶士涵">
|
|
|
|
|
<title>聊天界面</title>
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
|
|
|
|
|
<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
|
|
|
|
|
.el-row{width:100%}#app{margin-top: 10px;}
|
|
|
|
|
.chatLeft{min-height: 100%;border-bottom: solid 1px #e6e6e6;overflow: hidden;border-top: solid 1px #e6e6e6;}
|
|
|
|
|
.sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
|
|
|
|
|
.chatContext .el-row{margin-bottom: 5px;}
|
|
|
|
|
.chatUser{
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
.chatContent{
|
|
|
|
|
text-align: left;
|
|
|
|
|
background-color: rgb(166,212,242);
|
|
|
|
|
color: #000;
|
|
|
|
|
border: 1px solid rgb(152, 199, 230);
|
|
|
|
|
padding: 8px 15px;
|
|
|
|
|
min-height: 35px;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.chatContent:after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -10px;
|
|
|
|
|
top: 13px;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-style: dashed;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-width: 10px;
|
|
|
|
|
border-top-style: solid;
|
|
|
|
|
border-top-color: rgb(166,212,242);
|
|
|
|
|
}
|
|
|
|
|
.chatBoxMe .chatContent{background-color: rgb(152,225,101);border: 1px solid rgb(145, 215, 96);}
|
|
|
|
|
.chatBoxMe .chatContent:after{border-top-color: rgb(152,225,101);}
|
|
|
|
|
.chatBoxMe .el-col-3{float: right;text-align: right;}
|
|
|
|
|
.chatBoxMe .chatUser{text-align: right}
|
|
|
|
|
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
|
|
|
|
|
.chatArea{margin: 10px 0;}
|
|
|
|
|
.chatBox{max-height: 350px;overflow-y: auto;overflow-x: hidden;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<template>
|
|
|
|
|
<el-row :gutter="5">
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-menu class="chatLeft" :default-active="currentGuest">
|
|
|
|
|
<el-menu-item>
|
|
|
|
|
<i class="el-icon-s-promotion"></i>
|
|
|
|
|
<span slot="title">在线用户</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item :index="v.uid" v-for="v in users" v-bind:key="v.uid" v-on:click="talkTo(v.uid)">
|
|
|
|
|
<i class="el-icon-user"></i>
|
|
|
|
|
<span slot="title"><{v.username}></span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<div class="sw-bg chatContext">
|
|
|
|
|
<el-alert
|
|
|
|
|
:title="chatTitle"
|
|
|
|
|
type="success">
|
|
|
|
|
</el-alert>
|
|
|
|
|
<div class="chatBox">
|
|
|
|
|
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
|
|
|
|
|
<el-col :span="3"><el-avatar :size="60" :src="v.avatar"></el-avatar></el-col>
|
|
|
|
|
<el-col :span="21">
|
|
|
|
|
<div class="chatUser"><{v.name}></div>
|
|
|
|
|
<div class="chatContent"><{v.content}></div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<el-input type="textarea" class="chatArea" v-model="messageContent"></el-input>
|
|
|
|
|
<el-button type="primary" v-on:click="chatToUser">发送</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-menu class="chatLeft">
|
|
|
|
|
<el-menu-item>
|
|
|
|
|
<i class="el-icon-s-tools"></i>
|
|
|
|
|
<span slot="title">常用工具</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
|
|
|
|
</el-menu>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
var kfConfig={};
|
|
|
|
|
kfConfig.kf_id = "kf_1";
|
|
|
|
|
kfConfig.kf_name = "客服丽丽";
|
|
|
|
|
kfConfig.avatar = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
|
|
|
|
|
kfConfig.kf_group = "1";
|
|
|
|
|
kfConfig.guest_id = "";
|
|
|
|
|
|
|
|
|
|
var app=new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
delimiters:["<{","}>"],
|
|
|
|
|
data: {
|
|
|
|
|
fullscreenLoading:true,
|
|
|
|
|
users:[],
|
|
|
|
|
usersMap:[],
|
|
|
|
|
server:"ws://127.0.0.1:8080/chat_server",
|
|
|
|
|
socket:null,
|
|
|
|
|
messageContent:"",
|
|
|
|
|
currentGuest:"",
|
|
|
|
|
msgList:[],
|
|
|
|
|
msgListUser:[],
|
|
|
|
|
chatTitle:"暂时未处理咨询",
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//跳转
|
|
|
|
|
openUrl(url) {
|
|
|
|
|
window.location.href = url;
|
|
|
|
|
},
|
|
|
|
|
getOnlineUsers() {
|
|
|
|
|
let mes = {}
|
|
|
|
|
mes.type = "getOnlineUsers";
|
|
|
|
|
mes.data = kfConfig;
|
|
|
|
|
this.socket.send(JSON.stringify(mes));
|
|
|
|
|
},
|
|
|
|
|
sendKefuOnline(){
|
|
|
|
|
let mes = {}
|
|
|
|
|
mes.type = "kfOnline";
|
|
|
|
|
mes.data = kfConfig;
|
|
|
|
|
this.socket.send(JSON.stringify(mes));
|
|
|
|
|
},
|
|
|
|
|
//初始化websocket
|
|
|
|
|
initConn() {
|
|
|
|
|
let socket = new ReconnectingWebSocket(this.server);//创建Socket实例
|
|
|
|
|
this.socket = socket
|
|
|
|
|
this.socket.onmessage = this.OnMessage;
|
|
|
|
|
this.socket.onopen = this.OnOpen;
|
|
|
|
|
},
|
|
|
|
|
OnOpen() {
|
|
|
|
|
this.getOnlineUsers();
|
|
|
|
|
},
|
|
|
|
|
OnMessage(e) {
|
|
|
|
|
const redata = JSON.parse(e.data);
|
|
|
|
|
switch (redata.type){
|
|
|
|
|
case "getOnlineUsers":
|
|
|
|
|
this.handleOnlineUsers(redata.data);
|
|
|
|
|
this.sendKefuOnline();
|
|
|
|
|
break;
|
|
|
|
|
case "notice":
|
|
|
|
|
// if(!this.usersMap[redata.data.uid]){
|
|
|
|
|
// this.$notify({
|
|
|
|
|
// title: "通知",
|
|
|
|
|
// message: "新客户访问",
|
|
|
|
|
// type: 'success',
|
|
|
|
|
// duration: 0,
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
this.getOnlineUsers();
|
|
|
|
|
this.sendKefuOnline();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
// if (redata.type == "notice") {
|
|
|
|
|
// this.$notify({
|
|
|
|
|
// title: "通知",
|
|
|
|
|
// message: "新客户访问",
|
|
|
|
|
// type: 'success',
|
|
|
|
|
// duration: 0,
|
|
|
|
|
// });
|
|
|
|
|
//发送给客户我在线
|
|
|
|
|
// let mes = {}
|
|
|
|
|
// mes.type = "kfConnect";
|
|
|
|
|
// kfConfig.guest_id=redata.data[0].uid;
|
|
|
|
|
// mes.data = kfConfig;
|
|
|
|
|
// this.socket.send(JSON.stringify(mes));
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
if (redata.type == "chatMessage") {
|
|
|
|
|
let msg = redata.data
|
|
|
|
|
let content = {}
|
|
|
|
|
content.avatar = msg.from_avatar;
|
|
|
|
|
content.name = msg.from_name;
|
|
|
|
|
content.content = msg.content;
|
|
|
|
|
content.is_kefu = false;
|
|
|
|
|
content.time = msg.time;
|
|
|
|
|
if (msg.from_id == this.currentGuest) {
|
|
|
|
|
this.msgList.push(content);
|
|
|
|
|
}
|
|
|
|
|
if (typeof (this.msgListUser[msg.from_id]) == "undefined") {
|
|
|
|
|
this.msgListUser[msg.from_id] = [];
|
|
|
|
|
}
|
|
|
|
|
this.msgListUser[msg.from_id].push(content);
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//接手客户
|
|
|
|
|
talkTo(guestId) {
|
|
|
|
|
this.currentGuest = guestId;
|
|
|
|
|
this.chatTitle=this.usersMap[guestId]+guestId+",正在处理中...";
|
|
|
|
|
this.msgList = [];
|
|
|
|
|
let buf = [];
|
|
|
|
|
var i = this.msgListUser[guestId].length;
|
|
|
|
|
while (i--) {
|
|
|
|
|
buf[i] = this.msgListUser[guestId][i];
|
|
|
|
|
}
|
|
|
|
|
this.msgList = buf;
|
|
|
|
|
|
|
|
|
|
//发送给客户
|
|
|
|
|
let mes = {}
|
|
|
|
|
mes.type = "kfConnect";
|
|
|
|
|
kfConfig.guest_id=guestId;
|
|
|
|
|
mes.data = kfConfig;
|
|
|
|
|
this.socket.send(JSON.stringify(mes));
|
|
|
|
|
},
|
|
|
|
|
//发送给客户
|
|
|
|
|
chatToUser() {
|
|
|
|
|
if(this.messageContent==""||kfConfig.guest_id==""){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let mes = {};
|
|
|
|
|
mes.type = "kfChatMessage";
|
|
|
|
|
kfConfig.content = this.messageContent;
|
|
|
|
|
mes.data = kfConfig;
|
|
|
|
|
this.socket.send(JSON.stringify(mes));
|
|
|
|
|
this.messageContent = "";
|
|
|
|
|
|
|
|
|
|
let content = {}
|
|
|
|
|
content.avatar = kfConfig.avatar;
|
|
|
|
|
content.name = kfConfig.kf_name;
|
|
|
|
|
content.content = kfConfig.content;
|
|
|
|
|
content.is_kefu = true;
|
|
|
|
|
content.time = '';
|
|
|
|
|
this.msgList.push(content);
|
|
|
|
|
if (typeof (this.msgListUser[this.currentGuest]) == "undefined") {
|
|
|
|
|
this.msgListUser[this.currentGuest] = [];
|
|
|
|
|
}
|
|
|
|
|
this.msgListUser[this.currentGuest].push(content);
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
$('.chatBox').scrollTop($(".chatBox")[0].scrollHeight);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//处理当前在线用户列表
|
|
|
|
|
handleOnlineUsers:function (retData) {
|
|
|
|
|
this.users = retData;
|
|
|
|
|
if (this.currentGuest == "") {
|
|
|
|
|
this.chatTitle = "连接成功,等待处理中...";
|
|
|
|
|
}
|
|
|
|
|
for(let i=0;i<retData.length;i++){
|
|
|
|
|
this.usersMap[retData[i].uid]=retData[i].username;
|
|
|
|
|
if (typeof (this.msgListUser[retData[i].uid]) == "undefined") {
|
|
|
|
|
this.msgListUser[retData[i].uid] = [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created: function () {
|
|
|
|
|
this.initConn();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
