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

7 posts, 1 answers
  1. joshua
    joshua avatar
    4 posts
    Member since:
    Dec 2013

    Posted 08 Jan 2014 Link to this post

    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.
  2. Answer
    joshua
    joshua avatar
    4 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. joshua
    joshua avatar
    4 posts
    Member since:
    Dec 2013

    Posted 10 Jan 2014 Link to this post

    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

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 10 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. joshua
    joshua avatar
    4 posts
    Member since:
    Dec 2013

    Posted 11 Jan 2014 Link to this post

    Hi Petyo, as you had suspect, it's because the socket was created before listview was initialized.  Thanks.
  7. joshua
    joshua avatar
    4 posts
    Member since:
    Dec 2013

    Posted 11 Jan 2014 Link to this post

    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>
  8. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 13 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready