Monday, December 18th, 2006

New Chat Prototype using Comet and Prototype

Category: Chat, Comet, Prototype, Showcase

<p>Chris Chabot has recently announced a new chat prototype based on a comet iframe connections for real time messaging, ajax for posting messages and sending commands, prototype.js and script.aculo.us as javascript framework, and bases of the newly written dhtml components.

As a side effect of this project, the library & socket daemon framework used by the chat application is released as open-source at http://www.chabotc.nl/phpsocketdaemon

Check out the demo

Chat Prototype

We talked to Chris about his project, and asked him if he could share with us the biggest challenges. He kindly came up with:

The greatest challenge writing this was to make it scale up, and keep IO in check. The orignal plan was to layer out the http, irc and comet components, but the overhead of sending all the event trafic over local loops/connections when dealing with hundreds to thousands of connections, is just to much. All the memory bandwidth used would then be multiplied 3x, which was just a to high of a strain on the system.

Second challenge was that there were no decent comet implementations available (except for dojo’s which i used as a reference), and there was definitely a challenge that there were no PHP (my preferred language) libraries or tools available which could deal with a large amount of always-on connections, even fast-cgi with something like lighttp just wouldn’t scale to hundreds of live connections, and the memory needed would be horrendous, hence the new php socket daemon library was born, its a riskier model, if the program has a fatal crash (great care was taken to avoid this) the service has to be restarted again (happens automaticly), loosing the client connections in the process, however it now only takes 15Mb of memory under moderate load, and guarantees responses in under 0.15ms, something that would be unfeasible with a clasic apache/php situation.

Also most of the heavy lifting (such as link and color parsing, etc) has been lifted to the client, it would be way to heavy for the server to do all of this, and still be able to scale up

Likewise the javascript side of things took a bit of trial and error too, some channels can have thousands of messages, and hundreds of members, so browser speed has defiantly been an thing to optimize too.

Lastly the back-end uses a plain old IRC server, which is almost infinitely scalable, just add a server, link the IRC servers together, and run another web chat back-end on it, repeat ad infintum.. (irc networks are known to have many hundreds of thousands of people connected, using this as the backbone of the messaging provides guaranteed scalability)

Related Content:

Posted by Dion Almaer at 7:45 am
19 Comments

+++--
3.6 rating from 74 votes

19 Comments »

Comments feed TrackBack URI

Interesting example and very nice design, though the JS client seems to suffer from the continuous-loading effect in FF. Haven’t tried it in anything else.

Has anyone seem Meteor? We’ve just started this as an open source project to do a similar thing in perl. The example is an access log monitor rather than a chat app, but same principle.

http://meteorserver.org

Comment by Andrew — December 18, 2006

Hi Andrew, the iframe thats used for the comet implementation is causing the spinner… for the rest its a implementation with many advantages (fast, stable and works well in many browsers) however that spinner is the downside of that choice

In IE a htmlfile activex component is used instead, so that will be loading spinner free :-)

Glad you enjoyed!

Comment by Chris Chabot — December 18, 2006

1 STAR. Doesnt work in IE. How can some “programmer” not create a cross-browser web application when they use a cross-browser framework. It boggles my mind. Also I wonder if they asked Jack Slocum, if they could use his graphics and styles for their little demo. There is nothing to see here, just a waste of time.

Comment by Mario — December 18, 2006

If the dev of this demo is reading these posts. THe error occurs in chat.js in the showConnect method. chat.connectWindow = new chatConnectWindow(‘connect’,….. the chatConnectWindow is undefined.

Comment by Mario — December 18, 2006

Mario, its just an initial demo release, not the final product yet. If you read the blog post you would have seen that its still under development, and IE6 support is in the works.

The look from Jack Slocum is released under the MIT licence (check the licence file) so is usable in other open source applications.. A new look is in development, however i needed something to work with in the meantime, hence i borrowed some graphics from him.. (also mentioned in the blog post)

Comment by Chris Chabot — December 18, 2006

Thats cool. I still dont think a project, demo should be shown without at least working in IE. I know you are excited to show the world your hard work, but the dev scene is full of half finished half working projects. It would be nice to see something working (even half working) in all the big name browsers. IE support is not that hard to impliment. As i mentioned before you are using a cross browser framework. I donno, I dont want this to sound flamish. Anyways. Good work so far… I assume you are doing this in your free time and I know thats hard to do. Props on at using Prototype as well 8).

Comment by Mario — December 18, 2006

Why do you need to have your demo working in IE to take a look at a new technology? I thought Ajaxian was about investigating, researching, and pushing ahead into new technologies, not a product review site. Obviously Chris would need to get it working in IE if he wants a broad audience in the future, but I highly doubt he sent this demo to Ajaxian because he wanted a final QA review, but rather so we could learn about approaches to implementing a JS chat client.
Anyway, I think Comet and similiar types of technology for two way asynchronous communication is very important for the future of web apps, and I applaud those that are pushing these technologies forward. Good job Chris!

Comment by Kris Zyp — December 18, 2006

I still think the Flash socket is better. I put up a test at barspin.com. The dev server only has 128mb ram, so be gentle.

Comment by Phill Kenoyer — December 18, 2006

Nice work there, Chris.

Comment by Neftaly Hernandez — December 18, 2006

Flash sockets are more efficient but the whole point of technologies such as this is the ability to function WITHOUT plugins. Although Flash penetration is pretty high, there are quite a few people that either block Flash entirely or enable it on a white-list basis.

Nice job Chris. I’m surprised there still hasn’t been another IRC client on the web until now. CGI:IRC is pretty old.

Comment by Andy Kant — December 18, 2006

Frankly, I’d tried some js chat including this one and a simple one. Those are not good enough!

Comment by Jully — December 18, 2006

Just curious (since you used Jack Slocum’s layouts) whether or not you considered using yui-ext, and why you chose to go the prototype route? Just curious since I bet using yui-ext would have made at least the layout management easier, if not a lot of other stuff. Nice job so far.

Comment by Brian — December 18, 2006

I like it – a simple and well designed interface, of course the old problems with scriptaculous in opera. Very nice!

Comment by Andi K — December 19, 2006

Hi Brian,
yui-ext just didn’t give me enough control over the layout, and with a chat client when dealing with so many channels (created in DOM), messages in them, member lists, etc .. i needed all the control i could get to make it still behave well over a long chat time :-)

Besides, prototype needs some more decent UI widgets, and this was a secondary goal of the project, to develop those too .. As soon as their functional in all major browsers (which hopefully i will have time to finish soon) they’ll be released seperatly (under the same licence as prototype)

And yes it did make it more difficult, however i started this project to have a nice challenge, so that only added to the attractiveness of the project :-)

Thats not to say that i’m not impressed by yui-ext … imitation is the ultimate form of flattery right? :-)

Comment by Chris.C — December 19, 2006

I have discovered another interesting chat at http://www.conceptuel.co.uk
Just select the Chat section.

Comment by pine — December 28, 2006

Chris.C,

I checked out their chatroom, but it seems to be having issues. It also is nothing special..just a standard ajax chatroom.

The chatroom in this article is much better in terms of speed and scalability.

Comment by Justin Silverton — February 16, 2007

Hey Chris, I really like the concept. As soon as it is ready, I would definitely give it a try.

Comment by Review Central — September 12, 2007

I like it – a simple and well designed interface, of course the old problems with scriptaculous in opera. Very nice!

Comment by 屋外広告 — October 24, 2007

during research for my tutorial, just found this 4 years old article about ajax and comet. pretty impressing for the age :)

well for all german speaking comet researchers i have this tutorial for you:
http://www.easy-coding.de/wiki/html-ajax-und-co/ajax-comet-chat-tutorial.html

Comment by tbr — September 5, 2010

Leave a comment

You must be logged in to post a comment.