-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.

Improve this question
4
  • 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. Commented Apr 13, 2016 at 9:54
  • How to call function after interval?? Can you show me an example?? Commented Apr 13, 2016 at 10:01
  • Place somewhere in your controller setTimeout(function(){$scope.getAllMessages()},5000) . Here 5000 is milliseconds. Commented Apr 13, 2016 at 10:21
  • Look this Plunkr plnkr.co/edit/ew3I88PLuBrm7tCkhq5R?p=preview Commented Apr 13, 2016 at 10:29

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

Comments

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.

Improve this answer

Comments

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?" });

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.