测试登录页加客服

controller/chat.go

@@ -43,6 +43,7 @@ type KfMessage struct {
 	Kf_name string `json:"kf_name"`
 	Avatar  string `json:"avatar"`
 	Kf_id   string `json:"kf_id"`
+	Kf_group string `json:"kf_group"`
 	Time    string `json:"time"`
 	Guest_id string `json:"guest_id"`
 	Content string `json:"content"`
@@ -84,44 +85,25 @@ func ChatServer(w *websocket.Conn) {
 			json.Unmarshal(msgData,&userMsg)
 			//用户id对应的连接
 			clientList[userMsg.From_id] = w
-			SendUserAllNotice()
+			clientNameList[userMsg.From_id]=userMsg.From_name
-
 		//客服上线
 		case "kfOnline":
 			json.Unmarshal(msgData,&kfMsg)
 			//客服id对应的连接
 			kefuList[kfMsg.Kf_id] = w
-			sendMsg := TypeMessage{
-				Type: "kfOnline",
-				Data: KfMessage{
-					Kf_name: kfMsg.Kf_name,
-					Avatar:  kfMsg.Avatar,
-					Kf_id:   kfMsg.Kf_id,
-					Time:    time.Now().Format("2006-01-02 15:04:05"),
-					Content: "客服上线",
-				},
-			}
-			jsonStrByte, _ := json.Marshal(sendMsg)
 			//发送给客户
 			if len(clientList)==0{
 				break
 			}
 			for _, conn := range clientList {
-				websocket.Message.Send(conn, string(jsonStrByte))
+				SendKefuOnline(kfMsg,conn)
 			}
 			//发送给客服通知
-			result := make([]map[string]string, 0)
+			SendOnekfuAllNotice(w)
-			for uid, _ := range clientList {
+		//客服接手
-				userInfo := make(map[string]string)
+		case "kfConnect":
-				userInfo["uid"] = uid
+			json.Unmarshal(msgData,&kfMsg)
-				result = append(result, userInfo)
+			SendKefuOnline(kfMsg,clientList[kfMsg.Guest_id])
-			}
-			msg:=NoticeMessage{
-				Type: "notice",
-				Data:result,
-			}
-			str,_:=json.Marshal(msg);sendStr:=string(str)
-			websocket.Message.Send(w,sendStr)
 		case "kfChatMessage":
 			json.Unmarshal(msgData,&kfMsg)
 			conn:=clientList[kfMsg.Guest_id]
@@ -158,6 +140,7 @@ func ChatServer(w *websocket.Conn) {
 		}
 	}
 }
+//发送给所有客服客户上线
 func SendUserAllNotice(){
 	if len(kefuList)!=0{
 		//发送给客服通知
@@ -166,6 +149,7 @@ func SendUserAllNotice(){
 			for uid, _ := range clientList {
 				userInfo := make(map[string]string)
 				userInfo["uid"] = uid
+				userInfo["username"]=clientNameList[uid]
 				result = append(result, userInfo)
 			}
 			msg:=NoticeMessage{
@@ -177,8 +161,40 @@ func SendUserAllNotice(){
 		}
 	}
 }
-func SendKefuOnline(){}
+//发送给客户客服上线
+func SendKefuOnline(kfMsg KfMessage,conn *websocket.Conn){
+	sendMsg := TypeMessage{
+		Type: "kfOnline",
+		Data: KfMessage{
+			Kf_name: kfMsg.Kf_name,
+			Avatar:  kfMsg.Avatar,
+			Kf_id:   kfMsg.Kf_id,
+			Kf_group: kfMsg.Kf_group,
+			Time:    time.Now().Format("2006-01-02 15:04:05"),
+			Content: "客服上线",
+		},
+	}
+	jsonStrByte, _ := json.Marshal(sendMsg)
+	websocket.Message.Send(conn, string(jsonStrByte))
+}
+//发送给所有客服客户上线
+func SendOnekfuAllNotice(conn *websocket.Conn){
+	result := make([]map[string]string, 0)
+	for uid, _ := range clientList {
+		userInfo := make(map[string]string)
+		userInfo["uid"] = uid
+		userInfo["username"]=clientNameList[uid]
+		result = append(result, userInfo)
+	}
+	msg:=NoticeMessage{
+		Type: "notice",
+		Data:result,
+	}
+	str,_:=json.Marshal(msg);sendStr:=string(str)
+	websocket.Message.Send(conn,sendStr)
+}
 func SendUserChat(){}
 func SendKefuChat(){}
 var clientList = make(map[string]*websocket.Conn)
+var clientNameList = make(map[string]string)
 var kefuList = make(map[string]*websocket.Conn)

static/html/chat_main.html

@@ -60,7 +60,7 @@
                     <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>
+                            <span slot="title"><{v.username}></span>
                         </el-menu-item>
                     </el-menu>
                 </el-col>
@@ -91,7 +91,7 @@
     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.group = "1";
+    kfConfig.kf_group = "1";
 
     var app=new Vue({
         el: '#app',
@@ -182,7 +182,7 @@
 
                 //发送给客户我在线
                 let mes = {}
-                mes.type = "kfOnline";
+                mes.type = "kfConnect";
                 kfConfig.guest_id=guestId;
                 mes.data = kfConfig;
                 this.socket.send(JSON.stringify(mes));

static/html/login.html

@@ -39,6 +39,52 @@
             -webkit-box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);
             box-shadow: 0 1px 2px 0 rgba(101,129,156,.08);
         }
+
+
+        .chatContext{
+            background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;
+            position: fixed;
+            right: 2px;
+            bottom: 10px;
+            min-height: 300px;
+        }
+        .chatBox{
+            min-height: 200px;
+        }
+        .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>
@@ -95,12 +141,39 @@
         </el-tabs>
 
         <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
+
+        <!--客服代码-->
+        <div class="chatContext">
+            <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>
+        <!--//客服代码-->
+
 </template>           
 </div>
 </body>
+
+<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
 <script>
+    var guest={};
+    guest.from_id = "";
+    guest.from_name = "小明";
+    guest.from_avatar = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
+    guest.from_group = "1";
+    guest.to_id="";
+
 	new Vue({
 		el: '#app',
+        delimiters:["<{","}>"],
 		data: {
             window:window,
             activeName:"first",
@@ -128,6 +201,10 @@
                     { required: true, message: '密码不能为空', trigger: 'blur' },
                 ],
             },
+            server:"ws://127.0.0.1:8080/chat_server",
+            socket:null,
+            msgList:[],
+            messageContent:"",
 		},
 		methods: {
             //提交表单
@@ -195,8 +272,80 @@
                     }
                 });
             },
+            //初始化websocket
+            initConn() {
+                let socket = new ReconnectingWebSocket(this.server);//创建Socket实例
+                this.socket = socket
+                this.socket.onmessage = this.OnMessage;
+                this.socket.onopen = this.OnOpen;
+            },
+            OnOpen() {
+                let mes = {}
+                mes.type = "userInit";
+                let obj=this.getCache("guest");
+                if(!obj){
+                    guest.from_id=this.generateUUID();
+                    this.setCache("guest",guest)
+                    obj=guest;
+                }
+                mes.data = obj;
+                this.socket.send(JSON.stringify(mes));
+            },
+            OnMessage(e) {
+                const redata = JSON.parse(e.data);
+                if (redata.type == "kfOnline") {
+                    let msg = redata.data
+                    guest.to_id=msg.kf_id;
+                }
+                if (redata.type == "kfChatMessage") {
+                    let msg = redata.data
+                    let content = {}
+                    content.avatar = msg.avatar;
+                    content.name = msg.from_name;
+                    content.content = msg.content;
+                    content.is_kefu = false;
+                    content.time = msg.time;
+                    this.msgList.push(content);
+                }
+            },
+            //发送给客户
+            chatToUser() {
+                let mes = {};
+                mes.type = "chatMessage";
+                guest.content = this.messageContent;
+                mes.data = this.getCache("guest");;
+                this.socket.send(JSON.stringify(mes));
+                this.messageContent = "";
+
+                let content = {}
+                content.avatar=guest.from_avatar;
+                content.content = guest.content;
+                content.is_kefu = true;
+                content.time = '';
+                this.msgList.push(content);
+            },
+            setCache : function (key,obj){
+                if(typeof(Storage) !== "undefined"){
+                    localStorage.setItem(key, JSON.stringify(obj));
+                }
+            },getCache : function (key){
+                return JSON.parse(localStorage.getItem(key));
+            },
+            generateUUID:function () {
+                var d = new Date().getTime();
+                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                    var r = (d + Math.random()*16)%16 | 0;
+                    d = Math.floor(d/16);
+                    return (c=='x' ? r : (r&0x3|0x8)).toString(16);
+                });
+                return uuid;
+            },
+		},
+        created: function () {
+            this.initConn();
         }
 	})
 
 </script>
+
 </html>