From 2f162e5f5289c34ec04499c5fd4d6bc422acce77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B6=E5=A3=AB=E6=B6=B5?= <630892807@qq.com>
Date: Sat, 25 Jul 2020 21:56:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B6=88=E6=81=AF=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E5=92=8C=E6=B5=8F=E8=A7=88=E5=99=A8=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 controller/chat.go         |  4 ++-
 main.go                    |  2 +-
 static/html/chat_main.html | 58 +++++++++++++++++++++++++++++---------
 static/html/chat_page.html | 45 +++++++++++++++++++++++++++--
 static/html/index.html     |  2 +-
 5 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/controller/chat.go b/controller/chat.go
index 9f5fa53..1655c3c 100644
--- a/controller/chat.go
+++ b/controller/chat.go
@@ -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)
diff --git a/main.go b/main.go
index d82a8d9..300ac0b 100644
--- a/main.go
+++ b/main.go
@@ -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)
 	//获取未读消息数
diff --git a/static/html/chat_main.html b/static/html/chat_main.html
index 0dc13f8..d484caf 100644
--- a/static/html/chat_main.html
+++ b/static/html/chat_main.html
@@ -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();
diff --git a/static/html/chat_page.html b/static/html/chat_page.html
index 9055d57..2d40560 100644
--- a/static/html/chat_page.html
+++ b/static/html/chat_page.html
@@ -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();
             //获取欢迎
diff --git a/static/html/index.html b/static/html/index.html
index a2e92a3..59de306 100644
--- a/static/html/index.html
+++ b/static/html/index.html
@@ -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