add

src/components/LemonUI/components/index.vue

@@ -189,6 +189,8 @@ export default {
       let unread = "+1";
       let messageList = allMessages[message.toContactId];
       // 如果是自己的消息需要push，发送的消息不再增加未读条数
+      let conversation=this.findConversation(message.toContactId);
+      unread=!!conversation.unread?(conversation.unread+1):1;
       if (message.type == 'event' || this.user.id == message.fromUser.id) unread = "+0";
       if (messageList === undefined) {
         this.updateContact({
@@ -508,7 +510,7 @@ export default {
       const curactNew = this.currentNewContact;
       let defIsShow = true;
       for (const name in this.CacheContactContainer.get()) {
-        const show = curact.id == name && this.currentIsDefSidebar;
+        const show = curactNew.id == name && this.currentIsDefSidebar;
         if(show)defIsShow = !show;
         nodes.push(
           <div class={cls} v-show={show}>
@@ -517,14 +519,14 @@ export default {
         );
       }
       for (const name in this.CacheMenuContainer.get()) {
-        nodes.push(
-          <div
-            class={cls}
-            v-show={this.activeSidebar == name && !this.currentIsDefSidebar}
-          >
-            {this.CacheMenuContainer.get(name)}
-          </div>,
-        );
+          nodes.push(
+            <div
+              class={cls}
+              v-show={this.activeSidebar == name && !this.currentIsDefSidebar}
+            >
+              {this.CacheMenuContainer.get(name)}
+            </div>,
+          );
       }
       
       //聊天消息View
@@ -680,9 +682,9 @@ export default {
      */
     setDraft(cid, editorValue) {
       if (isEmpty(cid) || isEmpty(editorValue)) return false;
-      const contact = this.findContact(cid);
-      let lastContent = contact.lastContent;
-      if (isEmpty(contact)) return false;
+      const conversation = this.findConversation(cid);
+      let lastContent = conversation.lastContent;
+      if (isEmpty(conversation)) return false;
       if (this.CacheDraft.has(cid)) {
         lastContent = this.CacheDraft.get(cid).lastContent;
       }
@@ -690,6 +692,10 @@ export default {
         editorValue,
         lastContent,
       });
+      
+      var tempDraft=this.CacheDraft.get(cid);
+        console.log("qxj editorValue:"+editorValue+",tempDraft:"+JSON.stringify(tempDraft)+"lastContent:"+lastContent);
+
       this.updateContact({
         id: cid,
         lastContent: `<span style="color:red;">[草稿]</span><span>${this.lastContentRender(
@@ -703,15 +709,14 @@ export default {
     clearDraft(contactId) {
       const draft = this.CacheDraft.get(contactId);
       if (draft) {
-        const currentContent = this.findContact(contactId).lastContent;
-        if (
-          currentContent.indexOf('<span style="color:red;">[草稿]</span>') === 0
-        ) {
+        const currentContent = this.findConversation(contactId).lastContent;
+        console.log("qxj currentContent:"+currentContent+",lastContent:"+JSON.stringify(draft));
+        //if (currentContent.indexOf('<span style="color:red;">[草稿]</span>') === 0) {
           this.updateContact({
             id: contactId,
-            lastContent: draft.lastContent,
+            lastContent: draft.lastContent
           });
-        }
+        //}
         this.CacheDraft.remove(contactId);
       }
     },
@@ -720,7 +725,6 @@ export default {
      * @param contactId 联系人 id
      */
     async changeContact(contactId, menuName) {
-      console.log("qxj changeContact");
       if (menuName) {
            this.changeMenu(menuName);
       } else {
@@ -822,7 +826,6 @@ export default {
      * @param {String} name 按钮 name
      */
     changeMenu(name) {
-      console.log("qxj name:"+name);
       this.$emit("change-menu", name);
       this.activeSidebar = name;
     },
@@ -1009,19 +1012,35 @@ export default {
       this.conversations.unshift(conversation);
     },
     /**
-     * 修改联系人数据
+     * 修改会话数据
      * @param {Contact} data 修改的数据，根据 Contact.id 查找联系人并覆盖传入的值
      */
     updateContact(data) {
       const contactId = data.id;
       delete data.id;
-      const index = this.findContactIndexById(contactId);
+      const index = this.findConversationIndexById(contactId);  
+      if (index !== -1) {
+        const { unread } = data;
+        if (isString(unread)) {
+          if (unread.indexOf("+") === 0 || unread.indexOf("-") === 0) {
+            data.unread =parseInt(unread) + parseInt(this.conversations[index].unread);
+          }
+        }
+        this.$set(this.conversations, index, {
+          ...this.conversations[index],
+          ...data,
+        });
+      }
+    },
+    updateContact1(data) {
+      const contactId = data.id;
+      delete data.id;
+      const index = this.findContactIndexById(contactId);  
       if (index !== -1) {
         const { unread } = data;
         if (isString(unread)) {
           if (unread.indexOf("+") === 0 || unread.indexOf("-") === 0) {
-            data.unread =
-              parseInt(unread) + parseInt(this.contacts[index].unread);
+            data.unread =parseInt(unread) + parseInt(this.contacts[index].unread);
           }
         }
         this.$set(this.contacts, index, {
@@ -1061,7 +1080,7 @@ export default {
     findContact(contactId) {
       return this.getContacts().find(({ id }) => id == contactId);
     },
-    findConversations(currentContactId) {
+    findConversation(currentContactId) {
        return this.conversations.find(item =>  item.conversationId == currentContactId) || {};
     },
     /**

src/components/VideoPlayer/VueAliplayer.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="prism-player" :id="playerId" :style="playStyle"></div>
+  <div class="prism-player" :id="playerId" :style="playStyle">
+      <img  v-show="isShowPlay" @click="play()" :src="playIcon" class="btnPlay" />
+  </div>
 </template>
 
 <script>
+import image from '../LemonUI/components/message/image.vue';
   export default {
+  components: { image },
     name: "Aliplayer",
     props: {
       source: {
@@ -402,7 +406,9 @@
         playerId: "aliplayer_" + Math.random().toString(36).substr(2),
         scriptTagStatus: 0,
         isReload: false,
-        instance: null
+        instance: null,
+        isShowPlay:false,
+        playIcon:require('@/assets/image/video.png')
       };
     },
     created() {
@@ -526,6 +532,7 @@
             });
 
             _this.instance.on("play", () => {
+              this.isShowPlay=false;
               this.$emit("play", _this.instance);
             });
 
@@ -534,6 +541,7 @@
             });
 
             _this.instance.on("ended", () => {
+              this.isShowPlay=true;
               this.$emit("ended", _this.instance);
             });
 
@@ -715,3 +723,36 @@
 <style>
   @import url(//g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css);
 </style>
+
+
+
+<style scoped>
+  .btnPlay {
+    /* width: 40px;
+    height: 40px;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    z-index: 10;
+    position: absolute;
+    left: calc(50% - 20px);
+    top: calc(50% - 30px); */
+
+    z-index: 10;
+    background: rgba(0,0,0,0);
+
+
+    width: 64px;
+    height: 64px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+
+
+}
+</style>

src/layout/index.vue

@@ -44,6 +44,7 @@
           <img class="img" @click="callClose()" src="../assets/image/calloff.svg"/>
         </div>
       </div>
+
     </div>
   </div>
 </template>
@@ -109,7 +110,6 @@ export default {
     delNumber(){
         this.mobile= this.mobile.substring(0,this.mobile.length-1);
     },
-    
     openCall(){
       this.call.open=true;
     },
@@ -136,13 +136,11 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
-
     &.mobile.openSidebar {
       position: fixed;
       top: 0;
     }
   }
-
   .drawer-bg {
     background: #000;
     opacity: 0.3;

src/utils/WebsocketHeartbeat.js

@@ -0,0 +1,114 @@
+/**
+ * `WebsocketHeartbeat` constructor.
+ *
+ * @param {Object} opts
+ * {
+ *  url                  websocket链接地址
+ *  pingTimeout 未收到消息多少秒之后发送ping请求，默认15000毫秒
+    pongTimeout  发送ping之后，未收到消息超时时间，默认10000毫秒
+    reconnectTimeout
+    pingMsg
+ * }
+ * @api public
+ */
+
+    function WebsocketHeartbeat({
+        url, 
+        pingTimeout = 15000,
+        pongTimeout = 10000,
+        reconnectTimeout = 2000,
+        pingMsg = 'heartbeat'
+    }){
+        this.opts ={
+            url: url,
+            pingTimeout: pingTimeout,
+            pongTimeout: pongTimeout,
+            reconnectTimeout: reconnectTimeout,
+            pingMsg: pingMsg
+        };
+        this.ws = null;//websocket实例
+    
+        //override hook function
+        this.onclose = () => {};
+        this.onerror = () => {};
+        this.onopen = () => {};
+        this.onmessage = () => {};
+        this.onreconnect = () => {};
+    
+        this.createWebSocket();
+    }
+    WebsocketHeartbeat.prototype.createWebSocket = function(){
+        try {
+            this.ws = new WebSocket(this.opts.url);
+            this.initEventHandle();
+        } catch (e) {
+            this.reconnect();
+            throw e;
+        }     
+    };
+    
+    WebsocketHeartbeat.prototype.initEventHandle = function(){
+        this.ws.onclose = () => {
+            this.onclose();
+            this.reconnect();
+        };
+        this.ws.onerror = () => {
+            this.onerror();
+            this.reconnect();
+        };
+        this.ws.onopen = () => {
+            this.onopen();
+            //心跳检测重置
+            this.heartCheck();
+        };
+        this.ws.onmessage = (event) => {
+            this.onmessage(event);
+            //如果获取到消息，心跳检测重置
+            //拿到任何消息都说明当前连接是正常的
+            this.heartCheck();
+        };
+    };
+    
+    WebsocketHeartbeat.prototype.reconnect = function(){
+        if(this.lockReconnect || this.forbidReconnect) return;
+        this.lockReconnect = true;
+        this.onreconnect();
+        //没连接上会一直重连，设置延迟避免请求过多
+        setTimeout(() => {
+            this.createWebSocket();
+            this.lockReconnect = false;
+        }, this.opts.reconnectTimeout);
+    };
+    WebsocketHeartbeat.prototype.send = function(msg){
+        this.ws.send(msg);
+    };
+    //心跳检测
+    WebsocketHeartbeat.prototype.heartCheck = function(){
+        this.heartReset();
+        this.heartStart();
+    };
+    WebsocketHeartbeat.prototype.heartStart = function(){
+        if(this.forbidReconnect) return;//不再重连就不再执行心跳
+        this.pingTimeoutId = setTimeout(() => {
+            //这里发送一个心跳，后端收到后，返回一个心跳消息，
+            //onmessage拿到返回的心跳就说明连接正常
+            this.ws.send(this.opts.pingMsg);
+            //如果超过一定时间还没重置，说明后端主动断开了
+            this.pongTimeoutId = setTimeout(() => {
+                //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+                this.ws.close();
+            }, this.opts.pongTimeout);
+        }, this.opts.pingTimeout);
+    };
+    WebsocketHeartbeat.prototype.heartReset = function(){
+        clearTimeout(this.pingTimeoutId);
+        clearTimeout(this.pongTimeoutId);
+    };
+    WebsocketHeartbeat.prototype.close = function(){
+        //如果手动关闭连接，不再重连
+        this.forbidReconnect = true;
+        this.heartReset();
+        this.ws.close();
+    };
+    if(window) window.WebsocketHeartbeat = WebsocketHeartbeat;
+    export default WebsocketHeartbeat;

src/utils/common.js

@@ -349,6 +349,7 @@ export function formatTime(timer) {
 				 
 				
 // 			// });
+
 // 			that.$notify.success({
 // 				title: '正在呼叫'+mobile,
 // 				showClose: false

src/utils/webSocket.js

@@ -1,22 +1,12 @@
 
-//var server = "ws://localhost:7012/imserver/r:";
-var server = "wss://company.yjf.runtzh.com/imserver/r:";  
-
-// function init() {
-//     if(typeof(WebSocket) === "undefined"){
-//         alert("您的浏览器不支持socket")
-//     }else{
-//         // 实例化socket
-//         socket = new WebSocket(server)
-//         // 监听socket连接
-//         socket.onopen = this.open
-//         // 监听socket错误信息
-//         socket.onerror = this.error
-//         // 监听socket消息
-//         socket.onmessage = this.getMessage
-//     }
-// };
+import WebsocketHeartbeat from "./WebsocketHeartbeat";
 
+var server = "";  
+if (process.env.NODE_ENV === 'development') {
+    server = "ws://localhost:7012/imserver/r:";
+}else{
+    server = "wss://company.yjf.runtzh.com/imserver/r:";  
+}
 
 export default {
     socket: {},
@@ -28,7 +18,27 @@ export default {
             // 实例化socket
             if(!this.socket || reset){
                 console.log("实例化socket");
-                this.socket = new WebSocket(server+uid);
+                //this.socket = new WebSocket(server+uid);
+                this.socket=new WebsocketHeartbeat({
+                    url: server+uid,
+                    pingTimeout: 25000,
+                    pongTimeout: 20000
+                });
+                let that=this;
+                // this.socket.onopen = function () {
+                //     console.log('connect success');
+                //     console.log('send massage: test');
+                //     websocketHeartbeatJs.send('test');
+                //     setTimeout(() => {
+                //         console.log(`wait ${websocketHeartbeatJs.opts.pingTimeout} ms will hava '${websocketHeartbeatJs.opts.pingMsg}'`);
+                //     }, 1500);
+                // }
+
+                // that.$notify.success({
+                //     title: '正在呼叫'+mobile,
+                //     showClose: false
+                // });
+
                 this.hasLogin=true;
             }
             

src/views/qw/qwChat/qq.vue

@@ -105,10 +105,12 @@
        <el-dialog :visible.sync="dialogVideoVisible"
                :close-on-click-modal="false"
                :destroy-on-close="true"
+               :width="aplayer.pWidth"
+               :height="aplayer.height" 
                @close="dialogVideoVisible=false"
                ref="player"
                >
-          <videoPlayer :width="aplayer.width" :height="aplayer.height"  :vid="aplayer.vid"  :autoplay="true" 
+          <videoPlayer  :width="aplayer.width" :height="aplayer.height"  :videoWidth="aplayer.videoWidth"  :videoHeight="aplayer.videoHeight"   :vid="aplayer.vid"  :autoplay="true" 
             :source="dialogVideoUrl" :cover="dialogVideoCover" ref="player"></videoPlayer>
       </el-dialog>
 
@@ -289,8 +291,12 @@ export default {
       pickUploadImgData:null,
       aplayer: {
         vid: "bf9b7e4a36d84aea8cee769765fbc28b",
-        videoHeight:"1000px",
-        videoWidth:"800px"
+        pWidth:"1040px",
+        width:"1000px",
+        height:"900px",
+        videoWidth:"1000px",
+        videoHeight:"900px"
+        
       },
       player: null,
       roomMembers:[],
@@ -400,7 +406,7 @@ export default {
             <div class="article">
               <ul>
                 <li class="article-item">
-                  <h2>人民日报谈网红带货：产品真的值得买吗？</h2>
+                  <h2>网红带货：产品真的值得买吗？</h2>
                 </li>
                 <li class="article-item">
                   甘肃夏河县发生5.7级地震 暂未接到人员伤亡报告
@@ -443,12 +449,12 @@ export default {
   methods: {
     initSocket(userId) {
                let that=this;
-               console.log("qxj socket:"+this.qwIm.socket);
+              
                if(!!this.qwIm.socket){
                   this.qwIm.initSocket(userId,true);
                   // 监听socket连接
                   this.qwIm.socket.onopen = function() {
-                          console.log("socket连接成功");
+                      console.log("socket 连接成功...");
                   };
                   this.qwIm.socket.onerror = function() {
                       console.log("连接错误")
@@ -458,6 +464,9 @@ export default {
                   this.qwIm.socket.onmessage = function(res) {
                        var data=JSON.parse(res.data);
                         console.log("收到服务端内容", JSON.stringify(data));
+                        if(data.cmd=="heartbeat"){ //收到心跳数据不处理
+                            console.log("收到心跳数据 heartbeat");
+                        }
                         if(data.cmd=="offline"){
                             that.$message.error('企微号已下线');
                             that.$store.dispatch('qwLoginOut').then(() => {
@@ -498,9 +507,9 @@ export default {
                              }
                         }
                   };
-                    // 监听socket消息
-                  this.qwIm.socket.onclose = function(res) {
-                        console.log("socket已经关闭")
+                  // 监听socket重连
+                  this.qwIm.socket.onreconnect = function(res) {
+                      console.log("socket 断线重连...")
                   };
               }
     },
@@ -570,7 +579,6 @@ export default {
     },
     handlePullMessages(contact, next,instance) {
        const { IMUI } = this.$refs;
-      //console.log("qxj instance:"+instance.getMessages(instance.currentContactId));
        let isEnd = false;
        getMessageList(this.queryParams).then(response => {
           if(response.code==200){
@@ -587,16 +595,18 @@ export default {
       // }, 2000);
 
     },
-    handleChangeConversation(contact, instance) {
-        console.log("qxj ChangeConversation:"+JSON.stringify(contact));
-        if (!pages[contact.conversationId]){
-            pages[contact.conversationId] =1;
+    handleChangeConversation(conversation, instance) {
+        //console.log("qxj ChangeConversation:"+JSON.stringify(conversation));
+        if (!pages[conversation.conversationId]){
+            pages[conversation.conversationId] =1;
         }
-       this.queryParams.pageNum=pages[contact.conversationId];
-       this.queryParams.conversationId=contact.conversationId;
-        //instance.updateContact(contact);
-        
-        instance.closeDrawer();
+       this.queryParams.pageNum=pages[conversation.conversationId];
+       this.queryParams.conversationId=conversation.conversationId;
+       if(conversation.unread>0){
+          conversation.unread==0;
+          instance.updateContact(conversation);
+       }
+       instance.closeDrawer();
     },
     handleChangeContact(contact, instance) {
         
@@ -654,7 +664,7 @@ export default {
           params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"content":message.content};
           sendTextMsg(params).then(response => {
               if(response.code==200){
-                  var conversation=IMUI.findConversations(message.toContactId);
+                  var conversation=IMUI.findConversation(message.toContactId);
                   conversation.lastSendTime=message.sendTime;
                   conversation.lastContent=message.content;
                   IMUI.topPopConversations(conversation);
@@ -666,7 +676,7 @@ export default {
           params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"materialId":this.pickUploadImgData.id};
           sendImageMsg(params).then(response => {
               if(response.code==200){
-                  var conversation=IMUI.findConversations(message.toContactId);
+                  var conversation=IMUI.findConversation(message.toContactId);
                   conversation.lastSendTime=message.sendTime;
                   conversation.lastContent="[图片]";
                   IMUI.topPopConversations(conversation);

src/views/qw/qwLogin/index.vue

@@ -51,7 +51,7 @@ export default {
       showVerifyCode:false,
       loginTips:"获取二维码",
       qwForm: {
-          account:"1261818888",
+          account:"",
           verifyCode:null
       },
        // 表单校验
@@ -88,9 +88,8 @@ export default {
     getQrCode(){
             // 获取二维码
            getQrCode(this.deviceId).then(response => {
-                console.log("qxj getQrCode:"+JSON.stringify(response));
                 this.loading=false;  
-                  if(response.code==200){
+                if(response.code==200){
                         this.qrCode = response.data.qrcode; 
                         const base64Data = this.qrCode; // Base64 编码
                         const image = new Image();
@@ -139,7 +138,7 @@ export default {
                   this.qwIm.initSocket(userId,true);
                     // 监听socket连接
                   this.qwIm.socket.onopen = function() {
-                          console.log("socket连接成功");
+                        console.log("socket 连接成功");
                   };
                   // 监听socket错误信息
                   this.qwIm.socket.onerror = function() {
@@ -147,8 +146,11 @@ export default {
                   };
                   // 监听socket消息
                   this.qwIm.socket.onmessage = function(res) {
-                       var data=JSON.parse(res.data);
+                        var data=JSON.parse(res.data);
                         console.log("收到服务端内容", JSON.stringify(data));
+                        if(data.cmd=="heartbeat"){ //收到心跳数据不处理
+                            console.log("收到心跳数据 heartbeat");
+                        }
                         if(data.cmd=="loginSucc"){
                             var qwUserInfo=JSON.parse(data.msg);
                             Notification.success({title: "登录成功!" });
@@ -168,13 +170,12 @@ export default {
                             that.showQRCode=true;
                             that.showVerifyCode=false;
                             that.$store.dispatch('qwLoginOut').then(() => {
-                               
                             });
                         }
                   };
-                    // 监听socket消息
-                  this.qwIm.socket.onclose = function(res) {
-                        console.log("socket已经关闭")
+                  // 监听socket重连
+                  this.qwIm.socket.onreconnect = function(res) {
+                      console.log("socket 断线重连...")
                   };
               }
       },