real-time update of table with data coming from websocket using angularjs

Question

I need to update a table in real-time with data coming from the web socket.

What I do now is every time I get data on the socket I append it to a string and create a double dimensional array which is used to display the table using ng-repeat.

The performance using this approach is quite slow. Besides this approach assumes that I am getting the message in sequence, however I do not get the data in the correct sequence.

Would it be better to format the data as html or json and send it over web socket or sending the raw data is better?

What would be a better way of doing this?

Answer 1

If you are recreating the two dimensional array each time from this string, a faster way would be to just push new data onto the array instead.

Sending the data as HTML is not the way to go, but formatting the data as JSON on the server will almost certainly help speed things up on the client side. Sending small pieces of data and then incrementally appending them to your array on the client, then re-sorting the data (if needed) will likely be faster.

Another option would be to use something like Underscore.js's throttle function to limit the number of times you cause a digest cycle in AngularJS. You could also grab just throttle if you don't want to include all of underscore into your project.