展示正在输入

static/html/chat_main.html

@@ -75,7 +75,7 @@
                                             <el-avatar :size="40" :src="item.avator"></el-avatar>
                                         </el-col>
                                         <el-col :span="16">
-                                            <div><{item.username}></div>
+                                            <div style="height:20px;overflow: hidden"><{item.username}></div>
                                             <div class="lastNewMsg"><{item.last_message}></div>
                                         </el-col>
                                     </div>
@@ -87,7 +87,7 @@
                                         <el-col :span="4">
                                             <el-avatar v-bind:class="{'imgGray': item.status==0 }" :size="40" :src="item.avator"></el-avatar>
                                         </el-col>
-                                        <el-col :span="16" v-bind:class="{'imgGray': item.status==0 }">
+                                        <el-col style="height:40px;overflow: hidden" :span="16" v-bind:class="{'imgGray': item.status==0 }">
                                             <{item.name}>
                                         </el-col>
                                     </div>
@@ -128,6 +128,13 @@
                                 </el-col>
                             </el-row>
                         </div>
+                        <el-alert
+                                v-show="chatInputing!=''"
+                                :closable="false"
+                                show-icon
+                                :title="chatInputing"
+                        >
+                        </el-alert>
                         <div class="iconBtnsBox">
                             <div class="faceBox kefuFaceBox">
                                 <ul class="faceBoxList">
@@ -302,4 +309,4 @@
 </div>
 </body>
 <script src="/static/js/chat-main.js?v=0.4.1"></script>
-</html>
+</html>

static/html/chat_page.html

@@ -50,7 +50,7 @@
                 <div class="folderBtn visitorFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div>
                 <div class="clear"></div>
             </div>
-            <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
+            <el-input type="textarea" class="chatArea" v-model="messageContent"  @keyup.native="inputNextText" v-on:keyup.enter.native="chatToUser"></el-input>
             <div class="faceBox visitorFaceBox">
                 <ul class="faceBoxList">
                     <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>

static/js/chat-main.js

@@ -15,6 +15,7 @@ var app=new Vue({
         currentGuest:"",
         msgList:[],
         chatTitle:"暂时未处理咨询",
+        chatInputing:"",
         kfConfig:{
             id : "kf_1",
             name : "客服丽丽",
@@ -85,6 +86,10 @@ var app=new Vue({
         OnMessage(e) {
             const redata = JSON.parse(e.data);
             switch (redata.type){
+                case "inputing":
+                    this.handleInputing(redata.data);
+                    //this.sendKefuOnline();
+                    break;
                 case "allUsers":
                     this.handleOnlineUsers(redata.data);
                     //this.sendKefuOnline();
@@ -170,6 +175,7 @@ var app=new Vue({
                     _this.talkTo(msg.id,msg.name);
                 });
                 _this.alertSound();
+                _this.chatInputing="";
             }
         },
         //接手客户
@@ -284,6 +290,12 @@ var app=new Vue({
             }
 
         },
+        //处理正在输入
+        handleInputing:function (retData) {
+            if(retData.from==this.visitor.visitor_id){
+                this.chatInputing="正在输入："+retData.content+"...";
+            }
+        },
         //获取客服信息
         getKefuInfo(){
             let _this=this;

static/js/chat-page.js

@@ -136,6 +136,21 @@ new Vue({
             });
 
         },
+        //正在输入
+        inputNextText(){
+            if(this.socketClosed||!this.socket){
+                return;
+            }
+            console.log(this.messageContent);
+            var message = {}
+            message.type = "inputing";
+            message.data = {
+                from : this.visitor.visitor_id,
+                to : this.visitor.to_id,
+                content:this.messageContent
+            };
+            this.socket.send(JSON.stringify(message));
+        },
         OnClose:function() {
             this.chatTitle="连接关闭!请重新打开页面";
             $(".chatBox").append("<div class=\"chatTime\">"+this.chatTitle+"</div>");
@@ -155,6 +170,7 @@ new Vue({
                             message: res.msg,
                             type: 'error'
                         });
+                        _this.sendDisabled=true;
                         return;
                     }
                     _this.visitor=res.result;

ws/ws.go

@@ -128,6 +128,22 @@ func WsServerBackend() {
 			Mux.Lock()
 			conn.WriteMessage(websocket.TextMessage, str)
 			Mux.Unlock()
+		case "inputing":
+			//msg := TypeMessage{
+			//	Type: "pong",
+			//}
+			//str, _ := json.Marshal(msg)
+			//var data SimpleMessage
+			//json.Unmarshal([]byte(typeMsg.Data.(string)),&data)
+			//log.Println(data)
+			//from:=typeMsg.Data["from"]
+			to:=typeMsg.Data.(map[string]interface{})["to"].(string)
+			//content:=typeMsg.Data["content"]
+			log.Println(to)
+			Mux.Lock()
+			//conn.WriteMessage(websocket.TextMessage, str)
+			OneKefuMessage(to,message.content)
+			Mux.Unlock()
 		}
 
 	}