CODEWITHSUNDEEP
javascriptangularjssocketsweb
Daniel Rueda
Daniel Rueda

Reputation: 35

Real time table AngularJS

I'm working with the Twitter stream API. My server gets tweets from a concretes hashtags. For this I use a IO socket. The client receives the messages from the socket:

socket.on('tweet', function(msg) {
  console.log(msg);
  $scope.streaming.push(msg);
});

You can see that also I push the messages in a table called streaming. In the HTML I have the ng-repeat directive:

<table class="table table-bordered table-hover table-striped">
   <tr ng-repeat="tweet in streaming">
      <td>
         <div class="col-lg-2">
            <i class="fa fa-twitter" aria-hidden="true"></i>
         </div>
         <div class="col-lg-10">
            {{tweet}}
         </div>
      </td>
   </tr>
</table>

The table starts empty and fills as the tweets come in. But in the page there aren't changes. The tweets only appear when I stop the server.

Why does it happen this?

Upvotes: 2

Views: 460

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

socket.on callback runs out od angular digest cycle therefore you do not see results.

So you need to trigger digest cycle by calling $apply or $timeout.

For example:

socket.on('tweet', function(msg){
    console.log(msg);
    $timeout(function(){
       $scope.streaming.push(msg);
    });        
});

Upvotes: 1

Related Questions