-1

My code is working perfectly , But i need to refresh my page to get new message . I want the real time message.

Angular controller's function - 

$scope.getAllMessages = function() {
    $scope.messages=[];
    restservice.get('', "api/v1/message/getMessageList").then(function(response) {
        if (response != null) {
            for (var i = 0; i < response.length; i++) {
                $scope.messages.push(response[i]);
            }
        }
    }); 
}

My UI looks like -

<li ng-repeat="message in messages" class="{{(message.me == '1')? 'me' : 'other'}}">
    <div>
        {{message.userMessage}}
    </div>
</li>

Please make it simple for me and give me a proper guideline/tutorial to do it. I'm bad at front end.

ndsmyter
  • 6,535
  • 3
  • 22
  • 37
Shifat
  • 732
  • 1
  • 6
  • 20
  • Why do u need to refresh whole page? Just call **$scope.getAllMessages** function after some interval. Or if you need real time messaging like push notifications then go with service worker. Limitation with service worker is that work on limited browsers. – Arun Shinde Apr 13 '16 at 09:54
  • How to call function after interval?? Can you show me an example?? – Shifat Apr 13 '16 at 10:01
  • Place somewhere in your controller **setTimeout(function(){$scope.getAllMessages()},5000)** . Here 5000 is milliseconds. – Arun Shinde Apr 13 '16 at 10:21
  • Look this Plunkr https://plnkr.co/edit/ew3I88PLuBrm7tCkhq5R?p=preview – Arun Shinde Apr 13 '16 at 10:29

4 Answers4

0

You need to call getAllMessages method on interval basis so that you get live data or real time data

Link here https://docs.angularjs.org/api/ng/service/$interval

check with the above link for Example how to implement

LazyDeveloper
  • 599
  • 3
  • 8
0

Another way is to use WebSockets. Javascript has built-it WebSocket object wich you can use. And you also need to handle websockets on your server side. But for messaging websockets or long polling requests looks as more useful technologies, as for me.

WebSockets are very simple and if you want real-time, they could be useful. But you would have to implement websockets backend on your server. Here is a sample of WS usage from the JS side:

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
exampleSocket.send("Here's some text that the server is urgently awaiting!");
exampleSocket.onmessage = function (event) {
  console.log(event.data);
}

This is example from here: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

Community
  • 1
  • 1
Paul
  • 6,641
  • 8
  • 41
  • 56
0

To avoid getting ALL messages again i will considere do another .get maybe like this:

$interval(getLastMessagesFrom, 1000);


function getLastMessagesFrom () {

    // Extract the last message_ID from $scope.messages, to do this maybe
    // you will need to change your backend code to add the message ID in
    // the message object. This deppends on your backend code & backend
    // message response.

    var last_message_id = $scope.messages[$scope.messages.length-1].id;


    restservice.get('', "api/v1/message/getMessageList/" + last_message_id).then(function(response) {
        if (response != null) {

            // Now make sure that your server only returns messages with
            // ID higher than last_message_id

            for (var i = 0; i < response.length; i++) {
                $scope.messages.push(response[i]);
            }
        }
    }); 
}

Anyways this is still a bad practice if you have a lower time interval (1000 = 1 second) and a lot of concurrent users.

Considere use sockets to avoid repeated and unecessary calls.

nada
  • 972
  • 5
  • 22
0

use nodeJS's sockets where you can achieve real-time experience.

e.g once you inserted to database,you can fire JS command to emit msg realtime

io.sockets.connected[setsocketid].emit("clssifiedMessage", {msg:"Hi!!!how are yyou?" });

hemant raut
  • 171
  • 1
  • 4