|
|
|
|
<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{border-bottom: solid 1px #e6e6e6;overflow: hidden;}
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
.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 .el-col-3{float: right;text-align: right;}
|
|
|
|
|
.chatBoxMe .chatUser{text-align: right}
|
|
|
|
|
.chatBoxMe .chatContent:after{left:auto;right: -10px;}
|
|
|
|
|
.chatArea{margin: 10px 0;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<template>
|
|
|
|
|
<el-row :gutter="5">
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-menu class="chatLeft">
|
|
|
|
|
<el-menu-item 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.uid}></span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<div class="sw-bg chatContext">
|
|
|
|
|
<el-row :gutter="2">
|
|
|
|
|
<el-col :span="3"><el-avatar :size="60" ></el-avatar></el-col>
|
|
|
|
|
<el-col :span="21">
|
|
|
|
|
<div class="chatUser">内容</div>
|
|
|
|
|
<div class="chatContent">内容</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row :gutter="2" class="chatBoxMe">
|
|
|
|
|
<el-col :span="3"><el-avatar :size="60" ></el-avatar></el-col>
|
|
|
|
|
<el-col :span="21">
|
|
|
|
|
<div class="chatUser">内容</div>
|
|
|
|
|
<div class="chatContent">内容</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<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">
|
|
|
|
|
<div class="sw-bg">
|
|
|
|
|
常用功能
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
var app=new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
delimiters:["<{","}>"],
|
|
|
|
|
data: {
|
|
|
|
|
fullscreenLoading:true,
|
|
|
|
|
users:[],
|
|
|
|
|
server:"ws://127.0.0.1:8080/chat_server",
|
|
|
|
|
socket:null,
|
|
|
|
|
messageContent:"",
|
|
|
|
|
currentGuest:"",
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//跳转
|
|
|
|
|
openUrl(url){
|
|
|
|
|
window.location.href=url;
|
|
|
|
|
},
|
|
|
|
|
getOnlineUsers(){
|
|
|
|
|
let _this=this;
|
|
|
|
|
// $.get('/chat_users',function (rs) {
|
|
|
|
|
// _this.users=rs.result
|
|
|
|
|
// _this.fullscreenLoading=false;
|
|
|
|
|
// }).then(()=>{
|
|
|
|
|
// _this.fullscreenLoading=false;
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
//初始化websocket
|
|
|
|
|
initConn(){
|
|
|
|
|
let socket=new ReconnectingWebSocket(this.server);//创建Socket实例
|
|
|
|
|
this.socket = socket
|
|
|
|
|
this.socket.onmessage = this.OnMessage;
|
|
|
|
|
this.socket.onopen = this.OnOpen;
|
|
|
|
|
},
|
|
|
|
|
OnOpen(){
|
|
|
|
|
let data={};
|
|
|
|
|
data.type="kfOnline";
|
|
|
|
|
data.uid="kf_1";
|
|
|
|
|
data.name="客服丽丽";
|
|
|
|
|
data.avatar="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
|
|
|
|
|
data.group="1";
|
|
|
|
|
this.socket.send(JSON.stringify(data));
|
|
|
|
|
},
|
|
|
|
|
OnMessage(e){
|
|
|
|
|
const redata = JSON.parse(e.data);
|
|
|
|
|
if (redata.type=="notice"){
|
|
|
|
|
this.$notify({
|
|
|
|
|
title: "通知",
|
|
|
|
|
message: "新客户访问",
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration: 0,
|
|
|
|
|
});
|
|
|
|
|
this.users=redata.data;
|
|
|
|
|
this.currentGuest=redata.data[0].uid;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//接手客户
|
|
|
|
|
talkTo(guestId){
|
|
|
|
|
this.currentGuest=guestId;
|
|
|
|
|
},
|
|
|
|
|
//发送给客户
|
|
|
|
|
chatToUser(){
|
|
|
|
|
let mes={};
|
|
|
|
|
let data={};
|
|
|
|
|
mes.type="messageType";
|
|
|
|
|
data.content=this.messageContent;
|
|
|
|
|
data.kf_id="kf_1";
|
|
|
|
|
data.guest_id=this.currentGuest;
|
|
|
|
|
data.kf_name="客服丽丽";
|
|
|
|
|
data.avatar="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
|
|
|
|
|
mes.data=data;
|
|
|
|
|
this.socket.send(JSON.stringify(mes));
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created: function () {
|
|
|
|
|
this.getOnlineUsers();
|
|
|
|
|
this.initConn();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
