Real-time infinite data scrolling

Question

I am trying to implement infinite scrolling in a web application, entries can be added or deleted from the server, sorted alphabetically by their identifier, and related data can also change at any time, and I have to show the latest data, I understand how infinite works scrolling and how to show the latest data for a fixed set of objects (in my case, polling on it repeatedly and dumping data in sight), but I can’t figure out how to integrate them. The API uses a cursor and sends me 20 records each time. Please, help

Answer 1

I think I understand what your main problem is. Endless scrolling with real-time updates is very difficult to achieve. You should think about it and find out what you really want to achieve. To simplify, consider a couple of situations, suppose we use a grid with rows:

• Visible line changed (edited)
• Added new line between visible lines (add)
• Existing row has been removed from visible rows (delete)
• Changed loaded line (change)
• A new line has been added between previously loaded lines, but they are not visible - we scroll (add)
• Existing row removed from loaded rows (delete)
• Any change in an unloaded line is trivial - since we still have to load it

, - , . . ? , 10 , /. , , , . . , , , ( // )

Answer 2

. jquery, , API .

javascript, , . css .

   function scrolllist(){


            //get the current width of the screen
            var width = document.body.clientWidth;
            var channelPanelWidth = 120;

            //get the height of the info container of the current video 
            var elem = document.getElementsByClassName("listInfoContainer")[0];


            $('#listContainer').animate({scrollLeft: nextScroll + "px"}, {duration: 1000, specialEasing: { width: 'linear', height: 'easeOutBounce'},
            complete: function (e) {

                //debug print
                //console.log("animation completed");
            }

        }


  #listContainer{
  display: inline-block;
  vertical-align: top;
  width: 196px;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 510px;
  left: 0px;

}

nextscroll , . , nextscroll, API.

Answer 3

Socket.io Google Cloud Messaging

, , , , .

, , , , ( ). ios/android.

socket.io , "", GCM Cloud Cloud Messaging ( Firebase Cloud Messaging FCM).

, , - 20 20 (), , , , . , , , / FCM.

- / , , , , , /, .

I was worried that this would overload FCM, but so far it is incredibly scalable. By the way, Firebase (something) has quite a few gems, but FB DB is very limiting in terms of queries, which is a bit disappointing, so I used other cloud DBs.