A new chatterbox flavour

Hi all,

I spent the last two days whipping up a new chatterbox client written in Javascript because I was sick of FullPage Chat and didn't like any of the standalone clients so far.

Obviously, a lot of icing is still missing before it can be used as one's mainstay client (no private message handling and PM markup parsing as of yet), but given the pace at which development has went so far, I'd say it can likely be complete in a couple days. That mostly depends on how much time I find during the week ahead, as I've also got a few other things on my plate at the moment. I wanted to toss it out there for others to ooh and aah at, though. :-) And of course, I need people prodding and poking at it to uncover any boneheaded bugs I build into it.

Even if you don't intend to use this, if you think that web interfaces have to be clunky and cumbersome to use, what with all those roundtrips to the server and the refreshes, you should give it a spin.

This is developed in Firefox 1.0 and tested only in that browser for now; adjusting to other browsers has lower priority and won't be hard. It cannot work in any version Opera and might have issues in Safari as XMLHttpRequest support in these browsers is broken/partial (respectively).

Update to answer FAQ: pressing Enter in the talk box does not send your line by design. I plan to have it react to Ctrl-Enter at some point. For now, tab over to the send button — the cursor back will jump back to the talk box by itself once the submission has gone through. FAQ 2: since I had a hard time making the chat buffer fill the window and have scrollbars on it when the content grows, I just made it a fixed size in the interim. If it's too large for you, just change the 480px in the CSS for now.

Download the code, save the file to your harddisk and load it locally. If loaded remotely the script cannot ask for the relaxed security restrictions on loading external content that it needs to function. These issues should eventually vanish as I intend to push this as a favoured alternative over FullPage Chat. There won't be any need to log in separately either then, obviously, as the script will be able to just read your regular PM cookie.

Update: cookie parsing mistake spotted by The Mad Hatter fixed.

Update: XMLHttpRequest instantiation is now crossbrowser, though I don't know if the script actually works in anything but Firefox because of that.

Update: auto-scrolling will no longer bump you to the bottom on refresh if you've manually scrolled the chat buffer. Scroll back to the bottom and it will resume auto-scrolling.

Update: code moved to reply with readmore at tye's request.

Update: labelled the username and password boxes.

Update: another cookie fix.

Update: chatter input box limited to 255 characters.

Makeshifts last the longest.

Comment on A new chatterbox flavour

Replies are listed 'Best First'.
Re: A new chatterbox flavour by The Mad Hatter (Priest) on Dec 19, 2004 at 13:37 UTC
Nice, but you'll need to change how you compare the username in login.callback: `cookie.get( 'userpass' ).indexOf( document.getElementById( ' +user' ).value ) != 0` [download] should un-URL-encode the cookie's value. For a quick (local) fix so I could log in, I changed it to: `cookie.get( 'userpass' ) .replace(/%25/g, '%') .replace(/%20/g, ' ') .indexOf( document.getElementById( 'user' ).value ) != 0` [download] You'll want to do more than just that though for future releases.	[reply] [d/l] [select]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 16:07 UTC
Duh, of course. Thanks for catching that. Doing it at the comparison point is wrong though, the real fix is to de-escape the URI encoding for cookie data when it's parsed. That means simply: `--- pmchatter.html.old 2004-12-19 17:05:59.000000000 +0100 +++ pmchatter.html 2004-12-19 17:05:13.000000000 +0100 @@ -17,3 +17,3 @@ var kv = record[ i ].split( /=/ ); - this.data[ kv[ 0 ] ] = kv[ 1 ]; + this.data[ decodeURIComponent( kv[ 0 ] ) ] = d +ecodeURIComponent( kv[ 1 ] ); } @@ -63,3 +63,3 @@ if( userpass.length ) { - req.setRequestHeader( 'Cookie', 'userpass=' + userpass + ); + req.setRequestHeader( 'Cookie', 'userpass=' + encodeUR +IComponent( userpass ) ); }` [download] I updated the root node. Update: it wasn't quite as trivial — need to re-escape the cookie to send it, of course. Makeshifts last the longest.	[reply] [d/l]
Re^3: A new chatterbox flavour by The Mad Hatter (Priest) on Dec 19, 2004 at 16:16 UTC
Good point. I hadn't really studied it much other than looking for where the login "failed" for me.	[reply]
Re^4: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 16:41 UTC
Re^5: A new chatterbox flavour by The Mad Hatter (Priest) on Dec 20, 2004 at 01:14 UTC
Some notes below your chosen depth have not been shown here
Re: A new chatterbox flavour by ysth (Canon) on Dec 19, 2004 at 11:31 UTC
It really needs a name, so when somebody says they are using foobar as a chat client we know what they mean. /msg ~~editors~~SiteDocClan when you think it's ready to be added to Other CB Clients. Update: Correct braino :(, I meant SDC, not editors	[reply]
Re^2: A new chatterbox flavour by jdporter (Paladin) on Dec 19, 2004 at 22:38 UTC
Or, even better, /msg SiteDocClan; they have nominal custody of sitefaqlet nodes.	[reply]
Re: A new chatterbox flavour by bradcathey (Prior) on Dec 19, 2004 at 13:30 UTC
Nice and clean looking, Aristotle. I'm sure the Perlmonk's "branding" will be added when it gets uploaded to Other CB clients. One thing I noticed is that is was not showing the node title in a referenced node. So... "Look at this root node: What is modern Perl?, all follow-ups have the word "anyway" appended in the title. I think that should be made consequent." appears in your alternative as: "Look at this root node: id://415933, all follow-ups have the word "anyway" appended in the title. I think that should be made consequent. I don't know enough about javascript or the chatterbox to see how this might be remedied. Thanks for your efforts. —Brad "Don't ever take a fence down until you know the reason it was put up." G. K. Chesterton	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 16:04 UTC
It doesn't attempt to interpret any markup in messages yet besides respecting `/me` emotes. You'll notice that HTML tags and entities show up verbatim too. That's part of the icing I mentioned. Makeshifts last the longest.	[reply]
Code: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 18:22 UTC
Read more... (10 kB)	[reply] [d/l]
Re: A new chatterbox flavour by samtregar (Abbot) on Dec 19, 2004 at 19:18 UTC
Nicely done. Two beefs: 1) sending on enter would make it easier to use and 2) the chat box is too big and makes me scroll to see the bottom. I'm running Firefox 0.9.1 on Linux if that helps tracking down #2. -sam	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 21:32 UTC
I had a hard time making the chat buffer fill the window and have scrollbars on it when the content grows, so I just made it a fixed size. Change the `480px` in the CSS if you need something smaller for now. Thanks for the compliments and feedback. `:-)` Makeshifts last the longest.	[reply]
Re^3: A new chatterbox flavour by samtregar (Abbot) on Dec 19, 2004 at 22:22 UTC
Yeah, that's a pain. I did it for the Krang website for an iframe. Here's how: `function reSize() { var iframe = document.getElementById("ifrm"); if (window.innerHeight) { // Netscape compatible iframe.height = window.innerHeight - 150; } else if( document.documentElement && document.documentElement.clientHeight ) { //IE 6+ in 'standards compliant mode' iframe.height = document.documentElement.clientHeight - 150; } else if( document.body && ocument.body.clientHeight ) { //IE 4 compatible iframe.height = document.body.clientHeight - 150; } }` [download] I called that function like this: `<body onload="reSize()" onresize="reSize()">` [download] I don't remember where I got this voodoo from but I sure as heck didn't come up with it myself! -sam	[reply] [d/l] [select]
Re: A new chatterbox flavour by jZed (Prior) on Dec 19, 2004 at 22:09 UTC
By setting ticker=yes and using the same cookie as the rest of PM, use of this client makes a person invisible on the Other Users lists :-(. Nice job, though, thanks.	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 23:22 UTC
Well yes. I trust you can trivially fix that. `:-)` Makeshifts last the longest.	[reply]
Re: A new chatterbox flavour by BUU (Prior) on Dec 19, 2004 at 14:30 UTC
A tad offtopic towards your root node but I'm going to take this space and ask: has anyone made a CB->IRC gateway yet? Or is there a module someplace that would be easy to transform?	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 16:02 UTC
Robomonk - An IRC to PM Bridge The demo server is defunct, you need to run it yourself. Could use an upgrade to use the new chatterbox ticker too. Makeshifts last the longest.	[reply]
Re^3: A new chatterbox flavour by BUU (Prior) on Dec 19, 2004 at 17:15 UTC
Wheres the new ticker again?	[reply]
Re^4: A new chatterbox flavour by Aristotle (Chancellor) on Dec 19, 2004 at 17:16 UTC
Re: A new chatterbox flavour by bart (Canon) on Jan 14, 2005 at 00:14 UTC
It has a weird quirk. It logs you in cloaked, always, even if the browser was already logged in as a normal user before. So, if you're using http://www.perlmonks.org to access this site, and then you log in with this Chatterbox client (either you log in, or you can't use it to speak), your continued visit will now happen under a cloak. You can see that marked by a "#" symbol next to your login name in the top navigation section of any normal node page. The following symptoms will now happen: Your visit will no longer be recorded. You name will disappear from the Other Users list, after a while. If you continue browsing this site for more than a day, you will pass up the chance to gain 2 XP for visiting this site 2 days in a row After a few days, you no longer will receive any new votes. The Vote Fairy will just pass you by. People will start thinking of you as a creep. ;-) Well, you're here, but they can't see you... All not too desirable, and I'm quite sure Aristotle will find a permanent solution in a short time — checking at startup if a permanent cookie was set, and if so, just leave it, that would be a start. But, for now, the best advice I can give you is: if you wish to keep using this chatterbox client, and don't want your normal visits here to be cloaked, use a different root URL for your normal visit, and for this client. In short: don't visit via http://www.perlmonks.org. Use, for example, http://perlmonks.org.	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Jan 14, 2005 at 07:08 UTC
Logging in cloaked was by design, but I suppose it's counterproductive for people who just want to use the client, rather than hack on it. Since so many people complained about that I've commented out the parameter which tells PM to cloak the login, so download the code again and you should be good to go. I cannot use an existing PM cookie; it is a security feature of JS to prevent you from reading the cookies set by other sites. The plan was and is to eventually have a copy of this hosted on PM, so a separate login won't be necessary. I just need the tuits to implement the bits that will be difficult to do in JS (interpret markup) and those I don't have any personal need for (private messages). Makeshifts last the longest.	[reply]
Re^3: A new chatterbox flavour by bart (Canon) on Jan 14, 2005 at 07:38 UTC
So if you can't read the cookie, perhaps there's a simple way to ask the site who you are? Maybe by parsing the Login Page, it has a fixed format and contains your user name — take the print version, and what you're after is in the first link in the `DIV` with the id "`content`".Or maybe there's even a ticker that's even better suited. I like the idea of combining a cloaked chatterbox while browsing the site logged in normally. If your browsing and the chatterbox are on the same domain, you can't have that. Not like this. Is there something we're overlooking? Some parameter for the request which would make this single request cloaked, leaving the cookie intact?	[reply]
Re^4: A new chatterbox flavour by Aristotle (Chancellor) on Jan 14, 2005 at 07:47 UTC
Re^5: A new chatterbox flavour by bart (Canon) on Jan 14, 2005 at 16:53 UTC
Some notes below your chosen depth have not been shown here
Re: A new chatterbox flavour by The Mad Hatter (Priest) on Dec 31, 2004 at 15:20 UTC
I've been using this for a little bit now and I like it a lot. It'd be really nice if PM hosted it so I wouldn't have to log in every time... has there been made any attempt to get this on the site yet?	[reply]
Re^2: A new chatterbox flavour by Aristotle (Chancellor) on Jan 01, 2005 at 11:56 UTC
It's wildly incomplete still. Before I propose to host it onsite it will at least have to support private messages, translate PM markup, and work in Internet Explorer. There are also some encoding related buggettes in there that I need to weed out. It's a matter of appropriately shaped tuits, and right now unfortunately I have other more pressing things to do. Makeshifts last the longest.	[reply]
Re^3: A new chatterbox flavour by belg4mit (Prior) on Jul 20, 2005 at 02:03 UTC
demerphq added the link resolution to the tickers awhile back. `-- In Bob We Trust, All Others Bring Data.`	[reply]
Re^3: A new chatterbox flavour (new ticker flavor) by tye (Sage) on Jan 01, 2005 at 21:18 UTC
Translating PM markup and filtering user HTML should be done before the data enters the XML ticker (optionally, of course). Why create yet another pseudo-PerlMonks filtering routine that isn't quite the same and will just fall out of sync like the rest have? - tye	[reply]
Re^4: A new chatterbox flavour (new ticker flavor) by Aristotle (Chancellor) on Oct 31, 2005 at 17:01 UTC
Re^4: A new chatterbox flavour (new ticker flavor) by Aristotle (Chancellor) on Jan 01, 2005 at 21:44 UTC


go ahead... be a heretic
	PerlMonks