Ever wondered how Gmail/Facebook chat works?

May 28, 2008

Web based IM clients are seem to be the flavour of the month at the moment. Gmail has had one for a little while now and more recently Facebook has added this to their already impressive stable of features. These are really cool, and rip all over the old form based chat rooms, but how do they do it without using any plugins, flash or the dreaded ActiveX componets?

Typically they use a combination of things:

Server

At the heart of the system is a Jabber IM server such as Openfire. The server performs real-time communications with clients via the Extensible Messaging and Presence Protocol (XMPP). XMPP is an open XML based protocol that works on a concept similar to email. That is, anyone with a server open to the internet can create a Jabber IM server and become part of the wider decentralized IM network.

It’s worth noting that XMPP places no restrictions whatsoever on what the client should be. Much of the effort and complexity of developing a Jabber IM network goes into the server itself. Given that there are already a number of perfectly good OSS Jabber servers out there it makes the Web Developers job relatively easy.

Client

Gmail and Facebook use clients written in JavaScript (no plugins!) which communicates can communicate either directly with the server, or via a server-side proxy. There are generally two accepted methods communicating with the server from the browser; HTTP binding (BOSH) or HTTP polling (now deprecated).

Binding universally preferred as it virtually eliminates the number of round trips to the server (the majority of which yield no result) by using keep-alives to hold connections open to the server. What does that all mean? It means that the Jabber server is able to push messages back down to the browser rather than the client checking at set intervals for new messages. Cool huh? The only drawback seems to be that you need to be able to manage a large number of open connections concurrently. The fact that Openfire is built on Jetty helps because of their use of the Continuation Pattern to suspend blocked polling requests and free the worker thread.

Going direct

Communicating with the jabber server directly saves a lot a lot of hassle as opposed to proxying the requests via a servlet or something similar. It also avoids the problem of having to move your existing web server over to something more scalable like Jetty. But how do you do this when JavaScript can only make requests to its own domain? Well if you’re using Apache you’re in luck! Mod_rewrite is your friend here and adding the following to your http.conf file should have to talking to your Jabber servers http-bind service in no time at all:

<VirtualHost *:80>
    Servername yourdomain.com
    DocumentRoot /var/www
    AddDefaultCharset UTF-8
    RewriteEngine On
    RewriteRule ^/http-bind/ http://jabber.yourdomain.com:5280/http-bind/ [P]
</VirtualHost>

Viola! All requests to http://www.yourdomain.com/http-bind/ will be automatically forwarded to your chat server.

Talking XMPP

Okay so we’ve solved the cross-domain request problem, but how to we talk to the server. You’re probably asking yourself “Do I now have to actually parse all those XML messages myself in JavaScript?”. Fortunately no. JSJaC is a freely available, washed in the blood open source GPL JavaScript library, that handles all those icky details for you. It works on an event based model so you can just register your event handler callback functions, and get on with writing your very own IM client.

Speaking of which I’m going to do just that right now!

About these ads

16 Responses to “Ever wondered how Gmail/Facebook chat works?”

  1. Milan Andric Says:

    Hi, there I was interested in building a chat room/irc type client for a website. I’m just poking around looking for interested parties.

    Thinking to use the python web framework, Django. Let me know if you might be interested, thanks!

    More info:

    http://groups.google.com/group/django-chicago/browse_thread/thread/df82938cbe6cdafb/aaf59bac220241cb

  2. afzal Says:

    When I have multiple tab (all facebook – different pages) and open a chat window in one tab the result seems to reflect on each tab(When I close a chat box in one tab it closes in all the tabs).
    How the different tab communicate each other.? How Facebook developers accomplish this? One possibility I can think of is that all info (including open closed boxes) are stored in server side and each client from each tab updates them periodically and quickly. Am I right?

  3. Reynaldo Says:

    Hi. Thanx 4 the information… But I need some help here..
    I have a sony ericsson phone and it has a built in chat client. I was wondering if anyone knew how to setup this client for Facebook chat? I mean, server address, etc… Thanx in advance :)

  4. mostafa Says:

    كيف اعمل شات على الفيس بوك


  5. One can imagine I read it twice. While I am not as versatile on this topic, I match with your determinations because they make sense. Gives Thanks and goodluck to you.

  6. Pradeep Says:

    I read this but I couldn’t get many things. I want to know whether I can implement a simple chat room or not.

    If yes then where would I get the information for this?
    Please tell me something more about it.

  7. Neo Cambell Says:

    Thanks for sharing these information. Really helpful.

  8. matthias Says:

    RewriteRule ^/http-bind/ http://jabber.yourdomain.com:5280/http-bind/ [P]

    mod_rewrite could not rewrite to external sources without mod_proxy! is there a way to fix the cross-domain-problem without mod_proxy?


  9. Thanks for the information.
    Great post!

  10. estetik Says:

    One can imagine I read it twice. While I am not as versatile on this topic, I match with your determinations because they make sense. Gives Thanks and goodluck to you.
    tr

  11. Long Nguyen Says:

    Does this mean that Google Chat users can chat with Facebook users? I’d love to be able to do that.

  12. Dave Kuhn Says:

    @Long not that I know of…

    That said, iChat and Pidgin (and probably most other chat clients) have the ability to add both a Facebook and Gtalk accounts so you can be logged in on both simultaneously without having the browser open.

  13. Rishi Says:

    Hi neha h r u?

  14. Raj Says:

    Really what I was looking for. Thanks !!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: