http://qs321.pair.com?node_id=11116369

You need to be logged in, then enable the Chatterbox and the Free Nodelet in your Nodelet Settings, and in your Free Nodelet Settings, paste the following, and you get a chatterbox that refreshes itself dynamically, with optional browser notifications! Sending messages also works without reloading the entire page. It now also refreshes the "Other Users" nodelet and the Chatterbox regularly.

Since it was a little quiet in the Monastery when I implemented this, it's currently not 100% tested yet, let me know if you have any issues. (Update: So far, so good...)

<script src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>
<script src="/?node_id=11116369;displaytype=displaycode;part=2"
  type="text/javascript"></script>

[download]

(If you've already got jQuery loaded from another nodelet hack, you don't need to put that <script> tag twice, of course.)

If you don't want the AJAX CB enabled by default, then put this before the above <script> tags: "<script> AJAXCB_DEFAULTOFF=true; </script>".

I've created a Gist to version-control this code. I'll consider this particular node a "living document", as in I'm not going to add an "Updated" tag every time I make a change - if you want the version history, see the Gist.

"use strict";
$(function () {
    var CB_FETCHTIME_MS = 15 * 1000;
    var GERNERAL_REFRESHTIME_MS = 60 * 1000;
    // AJAX CB Refresh
    var refresh = function () {
        $.ajax({ url: '/', dataType: 'html',
            // testing shows the table rendered here is the same as in
+ the nodelet
            data: { node: 'showchatmessages', displaytype: 'raw', tick
+er: 'yes' } })
            .done(function (data) {
                var source = $('<div/>').html(data).find('table.cb_tab
+le, .cb_quiet');
                $('#Chatterbox table.cb_table, #Chatterbox .cb_quiet')
+.replaceWith(source);
                $('#Chatterbox table.cb_table + br, #Chatterbox .cb_qu
+iet + br').remove();
                $('#Chatterbox .cb_quiet').append('<br/>');
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
            });
    };
    // Refresh "Other Users" (followed by CB refresh!)
    var refresh_all = function () {
        $.ajax({ url: '/', dataType: 'html',
            // testing shows the body rendered here is the same as in 
+the nodelet
            data: { node: 'showotherusers', displaytype: 'raw', ticker
+: 'yes' } })
            .done(function (data) {
                // sadly, the <body> tag is not preserved, so we need 
+to do some funky parsing here
                var inSection = false;
                var source = $.grep( $('<div/>').html(data).contents()
+.toArray(), function (obj) {
                    if (inSection) {
                        if ( $(obj).is('.update-time') ) inSection = f
+alse;
                        return true;
                    }
                    else if ( $(obj).is('.other-users-text') )
                        { inSection = true; return true; }
                    return false;
                });
                $('#Other_Users .nodelet_body').empty();
                $('#Other_Users .nodelet_body').append(source);
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
            })
            .always(refresh);
    };
    // AJAX Message Fetching
    var notify_cb = $('<input/>', { type: 'checkbox' });
    var ajax_cb = $('<input/>', { type: 'checkbox', checked: !window["
+AJAXCB_DEFAULTOFF"] });
    var fetch_timer;
    var fetchit;
    var start_fetch = function () {
        if ( ajax_cb[0].checked )
            fetch_timer = setTimeout(fetchit, CB_FETCHTIME_MS);
    };
    var lastid;
    fetchit = function () {
        if (fetch_timer) clearTimeout(fetch_timer);
        fetch_timer = null;
        if ( !ajax_cb[0].checked ) return;
        var query = { node_id: '207304', xmlstyle: 'modern', ticker: '
+yes' };
        if ( lastid ) query['fromid'] = lastid;
        $.ajax({ url: '/', dataType: 'xml', data: query })
            .done(function (data) {
                var count = parseInt($("info", data).attr("count"));
                if ( count>0 ) {
                    refresh();
                    if ( notify_cb[0].checked ) {
                        var authors = {};
                        $('message author', data).each(function () { a
+uthors[ $(this).text() ] = 1; });
                        authors = Object.keys(authors).sort().join(", 
+");
                        var notification = new Notification('New PerlM
+onks Chatter',
                            { body: count+" new messages by "+authors,
                            tag: "PerlMonksChatter", icon: "/favicon.i
+co", badge: "/favicon.ico" });
                    }
                }
                var li = $("info", data).attr("lastid");
                if ( li ) lastid = li;
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.warn("AJAX error: " + textStatus + " / " + jqX
+HR.status + " " + errorThrown);
            })
            .always(start_fetch);
    };
    var all_refresh_timer;
    if ( !window["AJAXCB_DEFAULTOFF"] ) {
        start_fetch();
        all_refresh_timer = setInterval(refresh_all, GERNERAL_REFRESHT
+IME_MS);
    }
    // AJAX Form Submission
    var form = $('#Chatterbox form');
    form.on('submit', function (evt) {
        evt.preventDefault();
        // use the frame from the FullPage Chat as it renders faster
        var thedata = { op: 'message', node_id: '3193',
            displaytype: 'raw', message: $('#talkbox').val() };
        $(":input",form).prop("disabled", true);
        $.ajax({ url: form.attr("action"), method: 'post', data: theda
+ta })
            .done(function (data) {
                $('#talkbox').val("");
                // want to use fetchit() if possible here to update th
+e lastid
                if ( ajax_cb[0].checked ) fetchit(); else refresh();
            })
            .fail(function ( jqXHR, textStatus, errorThrown ) {
                alert("CB submission error: "+textStatus+" / "+jqXHR.s
+tatus+" "+errorThrown);
            })
            .always(function () {
                $(":input",form).prop("disabled", false);
            });
    });
    // Checkboxes
    var cb_div = $('<div/>', { style: "font-size: 12px; display: inlin
+e-block;" });
    cb_div.append( $('<label/>', { text: "AJAX Refresh" }).prepend(aja
+x_cb) );
    form.after($("<br/>"), cb_div);
    ajax_cb.change(function () {
        if ( this.checked ) {
            start_fetch();
            all_refresh_timer = setInterval(refresh_all, GERNERAL_REFR
+ESHTIME_MS);
            refresh_all();
        }
        else {
            if (fetch_timer) clearTimeout(fetch_timer);
            fetch_timer = null;
            if (all_refresh_timer) clearInterval(all_refresh_timer);
            all_refresh_timer = null;
        }
    });
    if ( "Notification" in window ) {
        cb_div.append( $('<label/>', { text: "Notifications" }).prepen
+d(notify_cb) );
        notify_cb.change(function () {
            if ( !this.checked ) return;
            if ( Notification.permission == "default" ) {
                notify_cb.attr("disabled", true);
                Notification.requestPermission(function (result) {
                    notify_cb.removeAttr("disabled");
                    if ( result != "granted" ) notify_cb[0].checked = 
+false;
                });
            }
            else if ( Notification.permission != "granted" ) {
                alert("You've denied this page the ability to send not
+ifications, please change this via your browser's settings.");
                this.checked = false;
            }
        });
    }
});

[download]

Replies are listed 'Best First'.
Re: [Free Nodelet Hack] AJAX Chatterbox
by jo37 (Deacon) on May 03, 2020 at 07:21 UTC

    Thank you! Great stuff!

    Not really related to your post, but: Have there been some changes at PM since Mar 20 2020?

    When I wrote Re^7: Mojolicious refresh, it seemed impossible to include a <script> tag in the text. I always got a server error on preview or in the private scratchpad. And I remember to have read it wouldn't be supported. Now it's working without problems, even for the mentioned node...

    Update: Forget this question. I changed my browser since then. It is just a problem with the old one.

    Greetings,
    -jo

    $gryYup$d0ylprbpriprrYpkJl2xyl~rzg??P~5lp2hyl0p$
[reply]
[d/l]
Re: [Free Nodelet Hack] AJAX Chatterbox (refresh 24)
by Anonymous Monk on May 02, 2020 at 23:18 UTC

    Hi,

    FullPage Chat chatterbox refresh is 24 seconds

    other users refresh 90 seconds

[reply]

Back to Perl Monks Discussion