javascript - ¿Cómo implementar Infinite Scrolling con la nueva Firebase(2016)?

node.js firebase-database

Question

PREGUNTA:

¿Cómo implementar el desplazamiento infinito eficiente en Firebase usando javascript (y node.js)?

LO QUE CHEQUE:

¿Implementando Infinite Scrolling con Firebase?

Problema: base de fuego más antigua ^

Desplazamiento infinito con AngularJs y Firebase

CÓDIGO DESDE: desplazamiento infinito con AngularJs y Firebase

"Primero, recomiendo crear un índice en tu Firebase. Para esta respuesta, creo este:

{
   "rules": {
      ".read": true,
      ".write": false,
      "messages": {
         ".indexOn": "id"
      }
   }
}

Entonces, hagamos magia con Firebase:

// @fb: your Firebase.
// @data: messages, users, products... the dataset you want to do something with.
// @_start: min ID where you want to start fetching your data.
// @_end: max ID where you want to start fetching your data.
// @_n: Step size. In other words, how much data you want to fetch from Firebase.
var fb = new Firebase(''https://<YOUR-FIREBASE-APP>.firebaseio.com/'');
var data = [];
var _start = 0;
var _end = 9;
var _n = 10;
var getDataset = function() {
   fb.orderByChild(''id'').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
      data.push(dataSnapshot.val());
   });
   _start = _start + _n;
   _end = _end + _n;
}

Finalmente, un mejor Desplazamiento Infinito (sin jQuery):

window.addEventListener(''scroll'', function() {
  if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
     getDataset();
  } 
});

Estoy usando este enfoque con React y es increíblemente rápido, sin importar qué tan grande sea tu información ".

(respondido 26 de octubre de 15 a 15:02)

(por Jobsamuel)

PROBLEMA

En esa solución, n publicaciones se cargarán cada vez que el desplazamiento llegue al final de la altura de la pantalla.

Dependiendo de los tamaños de pantalla, esto significa que se cargarán muchas más publicaciones de las necesarias en algún momento (la altura de la pantalla solo contiene 2 publicaciones, lo que significa que se cargarán 3 publicaciones más de las necesarias cada vez que lleguemos al final de la altura de la pantalla cuando n = 5 por ejemplo).

Lo que significa que 3*NumberOfTimesScrollHeightHasBeenPassed más publicaciones de las necesarias se cargarán cada vez que lleguemos al final de la altura de desplazamiento.

MI CÓDIGO ACTUAL (carga todas las publicaciones a la vez, sin desplazamiento infinito):

var express = require("express");
var router = express.Router();

var firebase = require("firebase");

router.get(''/index'', function(req, res, next) {

    var pageRef = firebase.database().ref("posts/page");

    pageRef.once(''value'', function(snapshot){
        var page = [];
        global.page_name = "page";
        snapshot.forEach(function(childSnapshot){
            var key = childSnapshot.key;
            var childData = childSnapshot.val();
            page.push({
                id: key,
                title: childData.title,
                image: childData.image
            });
        });
        res.render(''page/index'',{page: page});
    });
});

Answer 1

Aquí hay un código completo para paginación infinita.

La función createPromiseCallback es para admitir promesas y callbacks.

function createPromiseCallback() {
  var cb;
  var promise = new Promise(function (resolve, reject) {
      cb = function (err, data) {
          if (err) return reject(err);
          return resolve(data);
      };
  });
  cb.promise = promise;
  return cb;
}

La función getPaginatedFeed implementa la paginación real

function getPaginatedFeed(endpoint, pageSize, earliestEntryId, cb) {
  cb = cb || createPromiseCallback();

 var ref = database.ref(endpoint);
  if (earliestEntryId) {
    ref = ref.orderByKey().endAt(earliestEntryId);
  }
  ref.limitToLast(pageSize + 1).once(''value'').then(data => {
    var entries = data.val() || {};

    var nextPage = null;
    const entryIds = Object.keys(entries);
    if (entryIds.length > pageSize) {
        delete entries[entryIds[0]];
        const nextPageStartingId = entryIds.shift();
        nextPage = function (cb) {
            return getPaginatedFeed(endpoint, pageSize, nextPageStartingId,                     cb);
        };
    }
    var res = { entries: entries, nextPage: nextPage };
    cb(null, res);
  });
  return cb.promise;
}

Y aquí está cómo usar la función getPaginatedFeed

var endpoint = ''/posts'';
var pageSize = 2;
var nextPage = null;
var dataChunk = null;
getPaginatedFeed(endpoint, pageSize).then(function (data) {
    dataChunk = data.entries;
    nextPage = data.nextPage;

    //if nexPage is null means there are no more pages left
    if (!nextPage) return;

    //Getting second page
    nextPage().then(function (secondpageData) {
        dataChunk = data.entries;
        nextPage = data.nextPage;
        //Getting third page
        if (!nextPage) return;

        nextPage().then(function (secondpageData) {
            dataChunk = data.entries;
            nextPage = data.nextPage;
            //You can call as long as your nextPage is not null, which means as long as you have data left
        });
    });

});

¿Qué pasa con la pregunta de cuántos elementos poner en la pantalla, puede dar una solución como esta, para cada publicación da x altura fija y si requiere más espacio ponga el enlace "leer más" en la parte inferior de la publicación que revelará faltante parte cuando el usuario hace clic. En ese caso, puede mantener un conteo fijo de elementos en su pantalla. Además, puede verificar la resolución de la pantalla para colocar más o menos elementos.