Firebase调用动态参考不提供正确的输出

时间:2017-12-26 06:33:21

标签: angularjs firebase firebase-realtime-database chat

我正在使用angular 1和ionic 1

为浏览器创建聊天应用程序

这是我的控制器和视图 问题是当新消息进入所选房间时,这是当前房间监视变量,并且在控制台下面给我正确的输出,但同样的方法被调用两次,在第一次调用时给我正确的输出,但之后他给我主节点输出。 / p>

    $scope.firstLoad='';
    $scope.directLoad='';
    $scope.text = "Tap on name to open chat !";
    $scope.myUid = localStorage.uid;
    $scope.rooms = [];
    $scope.roomsfound = 0;
    $scope.roomswait = 1;

    $scope.name = "";

    $scope.number = "";
    $scope.currentRoomId="";
    $scope.is_select_user = 0;
    $scope.loadDetails = function (roomId, contactName, phone, name) {
        $timeout(function () {
           $scope.firstLoad=false;
        },2000);
    $rootScope.showLoading("loadchat");
    $scope.currentRoomId="";
    $scope.name = "";
    $scope.number = "";
    $scope.name = name;
    $scope.number = phone[0] == '1' ? phone.slice(1) : phone;/*to stipe out 1 from the phone number in view*/
    $scope.is_select_user = 1;
    $scope.roomName = "Chat";
    $scope.chats = [];
    $scope.chats.length = 0;
    $scope.roomId = '';

    $scope.roomId = roomId;
    $scope.roomName = contactName;
    firebase.database().ref('messages/' + $scope.roomId).once('value', function (data) {
        $timeout(function () {
            var tempArr = [];
            data.forEach(function (data) {
                tempArr.push({
                    key: data.key,
                    content: data.val().message,
                    createdAt: data.val().timestamp,
                    from: data.val().sendBy,
                    to: data.val().sentTo,
                    direction: data.val().direction,
                    status: data.val().status,
                    type: data.val().type
                })
            });
            $scope.chats = tempArr;

        });
    });

    $scope.currentRoomId= $scope.roomId;

    console.log("In Load Details "+$scope.currentRoomId);
    if($scope.firstLoad == false){
        firebase.database().ref('rooms/' + $scope.myUid +'/'+$scope.roomId ).update({
            isRead:'true'
        })
    }
    $scope.Scroll_top();
    $rootScope.hideLoading("loadchat");
}
    /*Live Chat Listner for Current Room*/
    $scope.$watch(
                "currentRoomId",
                function handleMessageChange( newValue, oldValue ) {
    $timeout(function () {

    firebase.database().ref('messages/'+$scope.currentRoomId+'/').on('value', function (data) {
    console.log('messages/'+$scope.currentRoomId);
        if($scope.currentRoomId != ""){ 
            var liveChatArr = [];
            $scope.chats = [];


                data.forEach(function (data) {
                    liveChatArr.push({
                        key: data.key,
                        content: data.val().message,
                        createdAt: data.val().timestamp,
                        from: data.val().sendBy,
                        to: data.val().sentTo,
                        direction: data.val().direction,
                        status: data.val().status,
                        type: data.val().type
                    })
                });
                $scope.chats = [];
                $scope.chats.length=0;
                if( $scope.chats.length == 0)
                    $scope.chats=liveChatArr ;
                else{
                    $scope.chats = [];
                    $scope.chats.length=0;
                    $scope.chats=liveChatArr ;
                }
            $scope.Scroll_top();
        }    
    });
},3000);        
});
    /*End Live Chat Listener*/
    /*Send New Message*/
$scope.data = {};
$scope.sendMessage = function (roomId, message, name, phone, contactName) {
    Chats.send(roomId, $scope.myUid, message);
    document.getElementById("mymsg").value = "";
    $scope.data.message='';
};
/* End Send New Message*/
    /* Live Room Listner*/
firebase.database().ref('rooms/' + $scope.myUid).orderByChild('lastMessageAt').on('value', function (data) {
    $scope.liverooms = [];
    $scope.liverooms.length = 0;
    $scope.rooms = [];
    $scope.rooms.length=0;
    $timeout(function () {

        var unique = function(origArr) {
            //console.log(origArr);
            var newArr = [];
            var origLen = origArr.length;
            var found, x, y;

            for (x = 0; x < origLen; x++) {
                //console.log(x);
                found = undefined;
                for (y = 0; y < newArr.length; y++) {
                    if (origArr[x] === newArr[y]) {
                        found = true;
                        break;
                    }
                }
                if (!found) {
                    newArr.push(origArr[x]);
                }
            }
            return newArr;
        }

        data.forEach(function (data) {
            var ref=firebase.database().ref('rooms/' + $scope.myUid);
            var key = data.ref.key;
            var fields = key.split('_');
            var len = fields.length;
            var mobile = fields[len - 1];
            $scope.liverooms.push({
                roomId: key,
                contactName: data.val().contactName,
                contactfName: (data.val().contactName.split(' '))[0],
                lastMessage: data.val().lastMessage,
                lastMessageAt:  data.val().lastMessageAt,
                lastMessageDirection: data.val().lastMessageDirection,
                phone: mobile[0] == '1' ? mobile.slice(1) : mobile, 
                isRead:data.val().isRead
            });
        }); 
        $scope.rooms = [];
        $scope.rooms.length=0;
        if( $scope.rooms.length == 0 ){
            $scope.rooms=unique($scope.liverooms).reverse();
        }else{
            $scope.rooms = [];
            $scope.rooms.length=0;
            $scope.rooms=unique($scope.liverooms).reverse();
        }
        //console.log($scope.rooms);
    });
    $scope.roomswait = 0;
    if ($scope.rooms.length > 0) {
        $scope.roomsfound = 1;
    }
});
/* End Live Room Listner*/

查看

<div class="content-wrapper">
    <div class="container-fluid">

        <div class="col-lg-3 searchmain-box">
            <br>
            <div class="input-group col-sm-6 col-xs-3 col-md-12 mb-2 mr-sm-2 mb-sm-0">
                <div class="input-group-addon radius-left search-box"><i class="fa fa-search"></i></div>
                <input type="text" class="form-control radius-right search-box" ng-model="search" id="inlineFormInputGroup" placeholder="Search">
            </div>
            <br>

            <div class="col-md-12 text-center" ng-show="roomswait == 1">
                <img src="img/loading.gif" width="30">
                <br>
                <h5 class="text-white">Please Wait.. Loading Chats</h5>
            </div>
            <ul class="list-group user-list" ng-show="roomsfound == 0">
                <li class="list-group-item user-list" style="cursor:pointer;outline:none" ng-if="room" ng-repeat="room in rooms| filter:search " ng-init="($first && firstLoad) ? loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName) : ''" type="item-text-wrap" ng-click="loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName)">
                    <!--<li class="list-group-item user-list" ng-repeat="room in rooms| orderBy:'lastMessageAt':true | filter:search"  type="item-text-wrap" ng-click="loadDetails(room.roomId, room.contactName + ' (' + room.phone + ')', room.phone, room.contactName)">-->
                    <div class="user-profile" ng-if="room.contactName == name && room.phone == number">
                        <span><img src="img/liveicon.png"></span>&nbsp;
                    </div>
                    <div class="user-name" >
                        <h4 class="ma-0" ng-class="{'user-live':room.contactName == name && room.phone == number , 'dark-text':(room.contactName != name || room.phone != number) && room.isRead != 'false' , 'not_read':room.isRead == 'false'}" >
                            {{room.contactName}}
                            <span class="live-chaticon"></span>
                        </h4>
                        <span style="float:left"><img src="img/phone.png"/></span>
                        <p class="user-phoneno mb-0" style="padding:5px;margin-left: 16px;" ng-class="{'not_read':room.isRead == 'false'}">
                            {{room.phone| bcTelephone:'format'}}
                        </p> 

                        <p class="user-message mb-0" style="font-size: 12px;" ng-show="room.lastMsg != ''" ng-class="{'not_read':room.isRead == 'false', 'dark-text':room.isRead == 'true'}">
                            <span ng-if="room.lastMessageDirection == 'out'">You:</span> 
                            <span ng-if="room.lastMessageDirection == 'in'">{{room.contactfName}}:</span>
                            {{(room.lastMessage| limitTo: 20) + (room.lastMessage.length  > 20 ? '..' : '')}}
                        </p>
                    </div>
                    <div class="user-time">
                        <p class="dark-text"> 
                            <span class="time2" ng-show="room.lastMessageAt != ''" am-time-ago="room.lastMessageAt"></span>
                        </p>
                    </div>

                </li>
            </ul>
        </div>

        <div class="recent-bg" block-ui="loadchat" style="width:61%;position:fixed;top:0;right:0;background-color:white">
            <div class="recent-order">
                <!--                <div class="recent-text ">
                                    <h4 class="user-name">{{name}} <span class="live-chaticon"></span></h4>
                                    <h5> <span style="float:left"><img src="img/phone.png"  height="20px"/></span> {{number| bcTelephone:'format'}} </h5>
                                </div>-->
                <div class="recent-text ">
                    <div class="row">
                        <div class="col-md-3">
                            <h4 class="user-name">{{name}} <span class="live-chaticon"></span></h4>
                            <!--<h5 class="user-number">{{number}} </h5>-->
                            <!--<h5 class="user-number"> {{number| bcTelephone:'format'}} </h5>-->

                            <h5> <span style="float:left"><img src="img/phone.png"  height="20px"/></span> {{number| bcTelephone:'format'}} </h5>
                        </div>

                        </div>
                    </div>
                </div>
                <div class="col-12 pa-0">
                    <h5 ng-if="text != ''" class="text-center">{{text}}</h5>
                    <div class="table-responsive">
                        <div class="frame">
                            <div ng-show="chats.length != 0">
                                <ul class="message-box">
                                    <li ng-repeat="chat in chats| orderBy:'createdAt':false" ng-if="chat"  ng-class="{'pull-right default-user ': chat.direction == 'out','pull-left client-user':chat.direction != 'out'}">
                                        <p>{{chat.content}}  <br>
                                            <span style="font-size: 10px;" am-time-ago="chat.createdAt" ng-class="{'pull-right default-user': chat.direction == 'out','pull-left client-user':chat.direction != 'out'}"></span>
                                            <br>
                                            <span style="font-size: 10px; float: right" > {{chat.status}}</span>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                            <div class="message-sendbtn" style="position:fixed;width:61%" ng-show="is_select_user">
                                <div class="input-group">
                                    <input type="text" class="form-control message-control" id="mymsg" placeholder="Your message" ng-model="data.message" aria-label="Recipient's username" aria-describedby="basic-addon2" ng-enter="sendMessage(roomId, data.message, name, number, roomName)">
                                    <a href="javascript:void(0)" class="input-group-addon" id="basic-addon2" ng-click="sendMessage(roomId, data.message, name, number, roomName)"  ><img src="img/send-icon.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是我的观点 enter image description here 当节点中出现新消息时,我遇到问题联系人列表是房间阵列得到双重记录,当我发送消息时,它没有显示消息的实时状态,有时候它与错误的节点混淆(当前房间)

通过使用on(&#34; value&#34;)方法被多次调用。

请帮助我,我被困在这里。

0 个答案:

没有答案