Beefy Boxes and Bandwidth Generously Provided by pair Networks
Pathologically Eclectic Rubbish Lister
 
PerlMonks  

[Free Nodelet Hack] AJAX Chatterbox

by haukex (Bishop)
on May 02, 2020 at 22:44 UTC ( #11116369=monkdiscuss: print w/replies, xml ) Need Help??

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>

(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; } }); } });

Replies are listed 'Best First'.
Re: [Free Nodelet Hack] AJAX Chatterbox
by jo37 (Pilgrim) 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$
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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://11116369]
Approved by kcott
Front-paged by marto
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others examining the Monastery: (5)
As of 2020-08-09 21:19 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Which rocket would you take to Mars?










    Results (55 votes). Check out past polls.

    Notices?