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


in reply to Re^2: Free Nodelet Hack: AJAX-enabled Chatterbox
in thread Free Nodelet Hack: AJAX-enabled Chatterbox

++ Really neat. You could instead of tying to it 10 minutes after talk tie it to page interaction. Put a listener on the body or something(?) and only refresh every x while there is page activity. Click or scroll, something. Might be the lightest server-load way to go.

Replies are listed 'Best First'.
Re^4: Free Nodelet Hack: AJAX-enabled Chatterbox
by bellaire (Hermit) on Mar 20, 2009 at 11:42 UTC
    Yeah, I wanted to do something like that but I was having trouble figuring out what the best approach would be for "quiet" interaction detection. Since it occurred to me that people might actually start applying the thing in their free nodelets right away, I just implemented the first solution that came to mind so that tye's concerns would be addressed sooner rather than later. I'm not sure if binding a page-wide event would work that well? I haven't done that before, so if someone with experience here wants to give me a hint, it'd be appreciated.

    As to server load, I don't think the "talk" solution adds any appreciable load. If you aren't talking anyway, the server has to load the contents of the CB every 10 seconds for those 10 minutes, or about 60 times. Clicking "talk" triggers one extra round trip. That extra trip vs. the 60 that are already happening is hopefully not a big deal.

    Of course, the difference is that the CB update loads the chatterbox sidebar upper node, which (hopefully? maybe?) takes less server effort because it only renders the CB contents and any direct messages for the user. On the other hand, as far as I can tell, submitting a talk request might be doing more work, even if it's empty. Someone with more knowledge of the CB might be able to give me better information on what nodes to request/submit to make this nicer to the server in general.

      This is a first stab, not rigorously tested so it might have pitfalls but it seems to work and cover the correct bases. The layout could be used to restart the CB refresh (on a 10 second timer in the dummy code) as long as the user is interacting with the page; no clicky, no mousy, no chatty. If they go away for 2 hours, or 2 weeks for that matter, and come back it would start working again as soon as they triggered one of the bound events. Working sample to play with-

      <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Body listener + timeOut test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery. +js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ // This would be the function that refreshes CB. function ohHaiCB () { $("body").prepend("<h1>It'll be just like starting over</h1>"); // Clear our place holder so any page even will restart // timeOut to call this function again. $(".myperfectlyuniqueid").remove(); } jQuery(function($) { // Bind to some interaction-y events. $("body").bind("focus resize scroll click mouseover keypress", function(evt){ $("body").prepend("<span> Got a " + evt.type + " </span>"); // We keep a placeholder element/node to know // if we're already in a setTimeOut. if ( $(".myperfectlyuniqueid").size() ) return true; // It wasn't there so refresh the CB. setTimeout(ohHaiCB, 10000); // Create our place holder element. // Why class instead of id? It's less likely to be // buggy x-browser which can do weird/different things // with DOM node removal. var placeHolder = $("<div class='myperfectlyuniqueid'/>"); // Hide it even though it's empty. placeHolder.hide(); // Tack it into the body. $("body").append(placeHolder); }); }); //]]> </script> </head> <body> <p>Something here to start.</p> </body></html>

      To do the selectors for PM something like-

      <script type="text/javascript">//<![CDATA[ jQuery(function($) { $("td.main_content, td.nodelets").bind("focus resize scroll click mo +useover keypress", function(){ // et cetera }); }); //]]> </script>
        Gotcha, thanks for the suggestion! It looks like binding to the body works just fine, since by default the other bound events will "propagate" up to the body unless explicitly stopped. I think that's the point I was missing on how to implement this before. New version includes these changes, so now to keep your CB alive or to resume, just wave your mouse around on the page.