msb-public
/
go-fly
mirror of https://github.com/taoshihan1991/go-fly.git
1
0
Code Issues Projects Releases Wiki Activity

增加消息记录和浏览器通知

Browse Source
pull/30/head
陶士涵 4 years ago
parent 587a336cc7
commit 2f162e5f52
5 changed files with 93 additions and 18 deletions
Show Stats Download Patch File Download Diff File

4
controller/chat.go
Unescape View File

@ -84,6 +84,7 @@ func NewChatServer(c *gin.Context){
kefuConn.WriteMessage(websocket.TextMessage,str)
}
}
sendPingOnlineUsers()
}
}
log.Println(err)
@ -190,7 +191,7 @@ func sendPingOnlineUsers() {
}
}
msg := TypeMessage{
Type: "getOnlineUsers",
Type: "allUsers",
Data: result,
}
str, _ := json.Marshal(msg)
@ -255,6 +256,7 @@ func singleBroadcaster(){
kefuConn.WriteMessage(websocket.TextMessage,str)
}
}
sendPingOnlineUsers()
//客服上线
case "kfOnline":
json.Unmarshal(msgData, &clientMsg)

2
main.go
Unescape View File

@ -46,7 +46,7 @@ func main() {
//前后聊天
engine.GET("/chat_server", controller.NewChatServer)
//获取消息
engine.GET("/messages",middleware.JwtApiMiddleware, controller.GetVisitorMessage)
engine.GET("/messages", controller.GetVisitorMessage)
//发送单条消息
engine.POST("/message",controller.SendMessage)
//获取未读消息数

58
static/html/chat_main.html
Unescape View File

@ -9,6 +9,7 @@
<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.jsdelivr.net/npm/push.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;}
@ -226,12 +227,27 @@
OnMessage(e) {
const redata = JSON.parse(e.data);
switch (redata.type){
case "getOnlineUsers":
case "allUsers":
this.handleOnlineUsers(redata.data);
//this.sendKefuOnline();
break;
case "userOnline":
this.addOnlineUser(redata.data);
//发送通知
let _this=this;
Push.create(redata.data.username, {
// body 选项是通知的内容
body: "来了",
// icon 选项是通知的图片
icon: redata.data.avator,
// timeout 选项是通知停留时间
timeout: 4000,
onClick: function () {
window.focus();
this.close();
_this.talkTo(redata.data.uid,redata.data.username);
}
});
break;
case "userOffline":
this.removeOfflineUser(redata.data);
@ -275,6 +291,20 @@
if (msg.id == this.currentGuest) {
this.msgList.push(content);
}
//发送通知
Push.create(msg.name, {
// body 选项是通知的内容
body: msg.content,
// icon 选项是通知的图片
icon: msg.avator,
// timeout 选项是通知停留时间
timeout: 4000,
onClick: function () {
window.focus();
this.close();
_this.talkTo(msg.id,msg.name);
}
});
this.scrollBottom();
}
},
@ -352,18 +382,18 @@
if (this.currentGuest == "") {
this.chatTitle = "连接成功,等待处理中...";
}
// this.usersMap=[];
// for(let i=0;i<retData.length;i++){
// this.usersMap[retData[i].uid]=retData[i].username;
// }
// for(let i=0;i<this.visitors.length;i++){
// let vid=this.visitors[i].visitor_id;
// if(typeof this.usersMap[vid]=="undefined"){
// this.visitors[i].status=0;
// }else{
// this.visitors[i].status=1;
// }
// }
this.usersMap=[];
for(let i=0;i<retData.length;i++){
this.usersMap[retData[i].uid]=retData[i].username;
}
for(let i=0;i<this.visitors.length;i++){
let vid=this.visitors[i].visitor_id;
if(typeof this.usersMap[vid]=="undefined"){
this.visitors[i].status=0;
}else{
this.visitors[i].status=1;
}
}
},
//获取客服信息
@ -502,6 +532,8 @@
}
},
created: function () {
//push通知
Push.Permission.request();
this.getKefuInfo();
//心跳
this.ping();

45
static/html/chat_page.html
Unescape View File

@ -97,13 +97,13 @@
type="success">
</el-alert>
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
<div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><{v.time}></div>
<el-col :span="3"><el-avatar :src="v.avator"></el-avatar></el-col>
<el-col :span="21">
<div class="chatUser"><{v.name}></div>
<div class="chatContent"><{v.content}></div>
</el-col>
<div class="clear"></div>
<div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><{v.time}></div>
</el-row>
</div>
</div>
@ -137,6 +137,7 @@
msgList:[],
messageContent:"",
chatTitle:"正在连接...",
visitor:{},
},
methods: {
//初始化websocket
@ -231,6 +232,7 @@
obj=this.getCache("guest");
}
guest=obj;
this.visitor=obj;
return obj;
},
//加载历史
@ -259,6 +261,43 @@
history.push(row);
this.setCache("history",history);
},
//获取信息列表
getMesssagesByVisitorId(){
let _this=this;
$.ajax({
type:"get",
url:"/messages?visitorId="+this.visitor.id,
success: function(data) {
if(data.code==200 && data.result!=null){
let msgList=data.result;
_this.msgList=[];
for(let i=0;i<msgList.length;i++){
let visitorMes=msgList[i];
let content = {}
if(visitorMes["mes_type"]=="kefu"){
content.is_kefu = false;
content.avator = visitorMes["kefu_avator"];
content.name = visitorMes["kefu_name"];
}else{
content.is_kefu = true;
content.avator = visitorMes["visitor_avator"];
content.name = visitorMes["visitor_name"];
}
content.content = visitorMes["content"];
content.time = visitorMes["time"];
_this.msgList.push(content);
_this.scrollBottom();
}
}
if(data.code!=200){
_this.$message({
message: data.msg,
type: 'error'
});
}
}
});
},
//滚动到底部
scrollBottom:function(){
this.$nextTick(() => {
@ -341,8 +380,10 @@
created: function () {
this.initCss();
this.initConn();
this.getUserInfo();
//加载历史记录
this.msgList=this.getHistory();
this.getMesssagesByVisitorId();
//this.msgList=this.getHistory();
//滚动底部
this.scrollBottom();
//获取欢迎

2
static/html/index.html
Unescape View File

@ -126,7 +126,7 @@
<div class="container">
<a class="try" href="/docs/index.html" target="_blank">{{.Document}}</a>
<a class="try" id="visitorBtn">{{.VisitorBtn}}</a>
<a class="try" href="/login" target="_blank">{{.AgentBtn}}</a>
<a class="try" href="/login?lang={{.Lang}}" target="_blank">{{.AgentBtn}}</a>
</div>
<div class="copyright">
{{.Copyright}}&copy; 2020

Write Preview
Loading…
Cancel
Save