How to display real-time push messages on Kendo UI mobile ListView?

[joshua]

I'm able to display real time push messages from [RabbitMQ SockJS Server] on a browser using JQuery append whenever a new message arrives.  However, I'm not able to figure out how to display the messages on Kendo UI mobile ListView (Kendo version 2013.3.1119) in descending order - newer messages at the top.  This should be done without the user intervening to refresh the ListView.

I've created a test and posted on JSBin - [link]

Notes on JSBin example:

1). Stomp.js ([STOMP over websocket] and sockjs.js ([SockJS Javascript client]) is used to create the websocket client that captures messages from RabbitMQ SockJS Server.

For the JSBin example, I've appended my Javascript code that works with STOMP (listener-app.js - see - [http://pastebin.com/6qLxH8R6]) into the SockJS Javascript client (sockjs.js) as I'm not able to get the JSBin to work with listener-app.js in a separate file.  The combined script is now stomp-listener-app.js.  A note that I didn't have this problem when testing locally.

2). There are 2 nav buttons, "Real-time ListView" and "Debug Log".  Debug Log captures stomp.js debug messages which will be displayed on "Debug Log" view using JQuery append.  Real-time ListView view is suppose to display the STOMP messages in a listview - for which I'm unable to do so.

3). Although the JSBin example doesn't link to a live SockJS server, the STOMP library will still generate some error messages which can be captured by Kendo UI.

I'm a beginner in JS and Kendo UI.  Please let me know if I had missed out anything.  Any pointer will be very much appreciated.  Thank you.

[Petyo]

Hello Joshua,

If I understand your case correctly, you can use the listview prepend/append methods to put newer messages at the top - pretty much like you would do it with jQuery. 

Regards,
Petyo
Telerik

[joshua]

Hi Petyo, thanks for your quick reply.  I'm now able to prepend newer messages at the top by adding the following code to index.html.

$("#datalistlistView").data("kendoMobileListView").prepend([{message: 'test'}]);

However, I'm not able to do this from the external SockJS client file, listener-app.jsdding to Connect() function as follows but this returns an error:

Uncaught TypeError: Cannot call method 'prepend' of null stomp-listener-app.js:422
Connect.client.debug stomp-listener-app.js:422
Client.connect stomp-listener-app.js:167
Connect stomp-listener-app.js:426
(anonymous function)

function Connect() {
    console.log('Connecting...');
    // Connect
    var ws = new SockJS(mq_url);
    client = Stomp.over(ws);
    client.heartbeat.outgoing = 0;
    client.heartbeat.incoming = 0;
    client.debug = function (str) {
        $("#debug").append(str + "<br>");
        varmessage = "message:" + str;

  $("#datalistlistView").data("kendoMobileListView").prepend([{message: 'test!'}]);

    };

By the way, I saw this post on adding a new item to data source.  Will this method also work for me?  I'm concerned that if I'm receiving 10 messages a second, refreshing the ListView each time a message is received may cause a problem?
http://www.kendoui.com/forums/kendo-ui-web/listview/listview-add-new-item-s.aspx

[Petyo]

Hello joshua,

I am not sure why the error occurs. Perhaps the socket performs this action before the listview is initialized. In any case, you can debug it and verify that by yourself. 

Using a datasource should work too, but prepending items to the listview widget is simpler. It won't cause a refresh, either. 

Regards,
Petyo
Telerik

[joshua]

Hi Petyo, as you had suspect, it's because the socket was created before listview was initialized.  Thanks.

[joshua]

Hi Petyo, I'm now having a problem if the messages comes before listview is loaded - RabbitMQ has the ability to cache messages while the client is offline.

Uncaught TypeError: Cannot call method 'prepend' of undefined

*Note: The code is slightly delayed - previously the error was "Cannot call method 'prepend' of null"

Moving the js that invokes prepend, stomp-listener-app.js, right to the bottom just before </body> doesn't appear to help.

        function onDeviceReady() {
            app = new kendo.mobile.Application(document.body, {
                initial: "datalist",
                transition: "slide",
                loading: "<h1>Please wait...</h1>",
                skin: "flat"
                //platform: "ios"
            });

        }
    </script>
    <script src="stomp-listener-app.js">
    </script>
</body>

[Petyo]

Hello Joshua,

I am not familiar with the library in question, but in general, what I may recommend is to initiate the connection (and the logging which utilizes the listview) in the containing mobile view init event handler. This will ensure that the widget is properly initialized. 

Another workaround would be to simply not log anything if the listview is not initialized (and the reference is null/undefined).

Regards,
Petyo
Telerik