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

2
main.go
Unescape View File

@ -46,7 +46,7 @@ func main() {
//前后聊天 //前后聊天
engine.GET("/chat_server", controller.NewChatServer) engine.GET("/chat_server", controller.NewChatServer)
//获取消息 //获取消息
engine.GET("/messages",middleware.JwtApiMiddleware, controller.GetVisitorMessage) engine.GET("/messages", controller.GetVisitorMessage)
//发送单条消息 //发送单条消息
engine.POST("/message",controller.SendMessage) 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/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/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/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> <script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
<style> <style>
html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;} html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
@ -226,12 +227,27 @@
OnMessage(e) { OnMessage(e) {
const redata = JSON.parse(e.data); const redata = JSON.parse(e.data);
switch (redata.type){ switch (redata.type){
case "getOnlineUsers": case "allUsers":
this.handleOnlineUsers(redata.data); this.handleOnlineUsers(redata.data);
//this.sendKefuOnline(); //this.sendKefuOnline();
break; break;
case "userOnline": case "userOnline":
this.addOnlineUser(redata.data); 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; break;
case "userOffline": case "userOffline":
this.removeOfflineUser(redata.data); this.removeOfflineUser(redata.data);
@ -275,6 +291,20 @@
if (msg.id == this.currentGuest) { if (msg.id == this.currentGuest) {
this.msgList.push(content); 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(); this.scrollBottom();
} }
}, },
@ -352,18 +382,18 @@
if (this.currentGuest == "") { if (this.currentGuest == "") {
this.chatTitle = "连接成功,等待处理中..."; this.chatTitle = "连接成功,等待处理中...";
} }
// this.usersMap=[]; this.usersMap=[];
// for(let i=0;i<retData.length;i++){ for(let i=0;i<retData.length;i++){
// this.usersMap[retData[i].uid]=retData[i].username; this.usersMap[retData[i].uid]=retData[i].username;
// } }
// for(let i=0;i<this.visitors.length;i++){ for(let i=0;i<this.visitors.length;i++){
// let vid=this.visitors[i].visitor_id; let vid=this.visitors[i].visitor_id;
// if(typeof this.usersMap[vid]=="undefined"){ if(typeof this.usersMap[vid]=="undefined"){
// this.visitors[i].status=0; this.visitors[i].status=0;
// }else{ }else{
// this.visitors[i].status=1; this.visitors[i].status=1;
// } }
// } }
}, },
//获取客服信息 //获取客服信息
@ -502,6 +532,8 @@
} }
}, },
created: function () { created: function () {
//push通知
Push.Permission.request();
this.getKefuInfo(); this.getKefuInfo();
//心跳 //心跳
this.ping(); this.ping();

45
static/html/chat_page.html
Unescape View File

@ -97,13 +97,13 @@
type="success"> type="success">
</el-alert> </el-alert>
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}"> <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="3"><el-avatar :src="v.avator"></el-avatar></el-col>
<el-col :span="21"> <el-col :span="21">
<div class="chatUser"><{v.name}></div> <div class="chatUser"><{v.name}></div>
<div class="chatContent"><{v.content}></div> <div class="chatContent"><{v.content}></div>
</el-col> </el-col>
<div class="clear"></div> <div class="clear"></div>
<div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><{v.time}></div>
</el-row> </el-row>
</div> </div>
</div> </div>
@ -137,6 +137,7 @@
msgList:[], msgList:[],
messageContent:"", messageContent:"",
chatTitle:"正在连接...", chatTitle:"正在连接...",
visitor:{},
}, },
methods: { methods: {
//初始化websocket //初始化websocket
@ -231,6 +232,7 @@
obj=this.getCache("guest"); obj=this.getCache("guest");
} }
guest=obj; guest=obj;
this.visitor=obj;
return obj; return obj;
}, },
//加载历史 //加载历史
@ -259,6 +261,43 @@
history.push(row); history.push(row);
this.setCache("history",history); 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(){ scrollBottom:function(){
this.$nextTick(() => { this.$nextTick(() => {
@ -341,8 +380,10 @@
created: function () { created: function () {
this.initCss(); this.initCss();
this.initConn(); this.initConn();
this.getUserInfo();
//加载历史记录 //加载历史记录
this.msgList=this.getHistory(); this.getMesssagesByVisitorId();
//this.msgList=this.getHistory();
//滚动底部 //滚动底部
this.scrollBottom(); this.scrollBottom();
//获取欢迎 //获取欢迎

2
static/html/index.html
Unescape View File

@ -126,7 +126,7 @@
<div class="container"> <div class="container">
<a class="try" href="/docs/index.html" target="_blank">{{.Document}}</a> <a class="try" href="/docs/index.html" target="_blank">{{.Document}}</a>
<a class="try" id="visitorBtn">{{.VisitorBtn}}</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>
<div class="copyright"> <div class="copyright">
{{.Copyright}}&copy; 2020 {{.Copyright}}&copy; 2020

Write Preview
Loading…
Cancel
Save