nodejs websocket pagination

Question

I have an interface with javascript that requests connection to a websocket using nodejs. The websocket is frequently sending real time data that it produces to an interface.

What is the best way or best practice to make the pagination for the interface.

Its not like i would append all data that server push to interface, the data is sent through websocket one by one, so its some kind like logging.

This some example of the code

connection.onmessage = function (message) {
  console.log(message.data);
  //var json = JSON.parse(message.data.text);
  content.prepend('<p><span style="color:red"></span> @ '+ message.data + '</p>');
  console.log(message.data.text);     
};

Any reference for this? Sorry for the bad english.

Answer 1

This example has a few more things going on then just the requested information about paging.

• Client Side, we are setting listRequest_Message , and passing the message to the Server's socket event. SessionID is used only to know which user to respond to. UseIndexStart is the current min record, and UseIndexEnd is the current max record.

   listRequest_Message = [[SessionID], [UseIndexStart], [UseIndexEnd]] 

• The example returns 21 records per page

   //Page Back var UseIndexStart = StartIndex - 21 var UseIndexEnd = UseIndexStart + 22 //Page Forward var UseIndexStart = parseInt(StartIndex) + 21; var UseIndexEnd = UseIndexStart + 22; 

Server Application

• Change the response to respond with records between the indexes.
• The socket event that the client calls is dynamic, but I've included the one with paging below called listRequest_news
• The JSON object being parsed is a text file containing a list of Movies, TV Shows, and general media.

code:

socket.on('listRequest_news', function(msg, body){
for(var i = 0; i < mediaObj.length; i++){
  var thisobj = mediaObj[i];

  var JSONmsg = JSON.parse(msg[0]);
  var ClientIndex = clientkeyIndex.indexOf(JSONmsg);

  var startindex = msg[1];
  var endindex = msg[2];

  if (i > startindex && i < endindex)
    {
      clientID = parseInt(ClientIndex);
      client[clientID].emit('list_RequestGenericMedia', thisobj);
    }

  clientID = parseInt(ClientIndex);
  client[clientID].emit('list_RequestGenericMedia', thisobj);

}
});

Client Side

• Store the StartIndex and EndIndex for the selected records
• Attach those values to Previous and Next buttons

code:

$("#listviewcontrolller_prev").on("click", "", function(event){

var selectedOption = localStorage.getItem('selectedOption')

var StartIndex = $("#prevpage").text();
var EndIndex = $("#nextpage").text();

var UseIndexStart = StartIndex - 21
var UseIndexEnd = UseIndexStart + 22

$("#prevpage").text(UseIndexStart);
$("#nextpage").text(UseIndexEnd);

var SessionID = localStorage.getItem('SocketID')
var listRequest_Message = [[SessionID], [UseIndexStart], [UseIndexEnd]];

$("#newsOutPut").empty();
socket.emit(selectedOption, listRequest_Message);
});

$("#listviewcontrolller_next").on("click", "", function(event){

var selectedOption = localStorage.getItem('selectedOption');

var StartIndex = $("#prevpage").text();
var EndIndex = $("#nextpage").text();

var UseIndexStart = parseInt(StartIndex) + 21;
var UseIndexEnd = UseIndexStart + 22;

$("#prevpage").text(UseIndexStart);
$("#nextpage").text(UseIndexEnd);

var SessionID = localStorage.getItem('SocketID')
var listRequest_Message = [[SessionID], [UseIndexStart], [UseIndexEnd]];

$("#newsOutPut").empty();
socket.emit(selectedOption, listRequest_Message);

});