javascript - How to display last 10 updates from websocket in div?

Question

I have a web socket streaming data to a webpage and I only want to display the last 10 updates. If i do .innerHTML = result; then the entry gets overridden on every new update and if i do .innerHTML += result; then the incoming messages get appended to the div which ends up crashing the webpage due to the amount of data coming in. Does anyone have any ideas how i might go about achieving this?

Thanks

question from:https://stackoverflow.com/questions/65908234/how-to-display-last-10-updates-from-websocket-in-div

Answer 1

keep an array, each time data is emitted from the socket add the items to the array. When it reaches length of 10 on each emit from the socket use unshift on the array with the new value and pop to remove the last, then, set innerHTML = '' (empty string) and iterate on the array and add the items to innerHTML using +=