新的改动

src/components/videoChat/video-chat.vue

@@ -165,7 +165,21 @@ export default {
            participants: {},
            mainVideo: '',
            chatMembers1: [],
            modalBoxOffset: {}
            modalBoxOffset: {},
            heartCheck: {
              //视频websocket心跳检测器
              timeout: 5000,
              timeoutObj: null,
              serverTimeoutObj: null,
              // reset: function(){
              //   clearTimeout(this.timeoutObj);
              //   clearTimeout(this.serverTimeoutObj);
              //   return this;
              // },
              // start: function(){
              // }
            }
        }
    },
    components:{
@@ -218,7 +232,7 @@ export default {
                }
                return o;
            })
            console.log(this.chatMembers1);
            // console.log(this.chatMembers1);
        },
        async createNewChat(){
            let list = this.chatMembers1.concat(this.selectArr),
@@ -249,6 +263,10 @@ export default {
        },
        initWS(){
            var vm = this;
            vm.ws.onopen = function () {
              //心跳检测重置
              vm.heartCheck.reset().start();
            };
            vm.ws.onmessage = function(message) {
                var parsedMessage = JSON.parse(message.data);
                switch (parsedMessage.id) {
@@ -278,6 +296,31 @@ export default {
                default:
                    console.error('Unrecognized message', parsedMessage);
                }
                // vm.heartCheck.reset().start();
            }
            vm.heartCheck.reset = function(){
              console.log("reset");
              clearInterval(vm.heartCheck.timeoutObj);
              return vm.heartCheck;
            }
            vm.heartCheck.start = function(){
              var self = vm.heartCheck;
              self.timeoutObj = setInterval(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                var aa={
                  id : 'heartbeat'
                }
                var bb = JSON.stringify(aa);
                console.log("send heartbeat");
                vm.ws.send(bb);
                // self.serverTimeoutObj = setTimeout(function(){
                //   //如果超过一定时间还没重置，说明后端主动断开了
                //   vm.ws.close();
                // }, self.timeout)
              }, self.timeout)
            }
        },
        register(){
@@ -309,18 +352,18 @@ export default {
        },
        sendMessage(message) {
            var jsonMessage = JSON.stringify(message);
            console.log('Senging message: ' + jsonMessage);
            // console.log('Senging message: ' + jsonMessage);
            this.ws.send(jsonMessage);
            console.log(22)
        },
        onNewParticipant(request) {
            debugger
            console.log("onNewParticipant", request);
            // console.log("onNewParticipant", request);
            this.receiveVideo(request.userId);
        },
        receiveVideoResponse(result) {
            debugger
            console.log("receiveVideoResponse", result);
            // console.log("receiveVideoResponse", result);
            this.participants[result.userId].rtcPeer.processAnswer (result.sdpAnswer, function (error) {
                if (error) return console.error (error);
            });
@@ -338,7 +381,7 @@ export default {
        },
        onExistingParticipants(msg) {
            debugger
            console.log("onExistingParticipants");
            // console.log("onExistingParticipants");
            var constraints = {
                audio : true,
                video : {
@@ -372,8 +415,8 @@ export default {
        },
        receiveVideo(sender) {
            debugger
            console.log("receiveVideo");
            console.log("sender = "+sender);
            // console.log("receiveVideo");
            // console.log("sender = "+sender);
            var participant1 = new this.participant(sender, this);
            this.participants[sender] = participant1;
            var video = participant1.getVideoElement();
@@ -393,7 +436,7 @@ export default {
        },
        onParticipantLeft(request) {
            debugger
            console.log('onParticipantLeft Participant ' + request.userId + ' left');
            // console.log('onParticipantLeft Participant ' + request.userId + ' left');
            var participant1 = this.participants[request.userId];
            participant1.dispose();
            delete this.participants[request.userId];
@@ -416,7 +459,7 @@ export default {
                offerToReceiveVideo(error, offerSdp, wp){
                    debugger
                    if (error) return console.error ("sdp offer error")
                    console.log('Invoking SDP offer callback function');
                    // console.log('Invoking SDP offer callback function');
                    var msg =  { id : "receiveVideoFrom",
                            sender : code,
                            sdpOffer : offerSdp
@@ -425,7 +468,7 @@ export default {
                },
                onIceCandidate(candidate, wp) {
                    debugger
                    console.log("Local candidate" + JSON.stringify(candidate));
                    // console.log("Local candidate" + JSON.stringify(candidate));
            
                    var message = {
                        id: 'onIceCandidate',
@@ -436,7 +479,7 @@ export default {
                },
                dispose () {
                    debugger
                    console.log('Disposing participant ' + this.codes);
                    // console.log('Disposing participant ' + this.codes);
                    this.rtcPeer.dispose();
                    // container.parentNode.removeChild(container);
                }
@@ -455,7 +498,7 @@ export default {
            //     area:['500px','400px'],
            //     title: '邀请加入视频通话'
            // });
            console.log("chatMembers1 = ", this.chatMembers1);
            // console.log("chatMembers1 = ", this.chatMembers1);
            this.$modal.show(addMembers, {
                chatMembers: this.chatMembers1
            }, {