Wednesday 26th March 2008

by Mr Me
This entry is part 1 of 3 in the series Gmail Architecture

Gmail Logo
Gmail is the best application website i ever seen. Simple implementation, Super Ajax, Cute Chatting, Status Messages, Fast Mail Checking, Live updating and its features are endless as my wordpress database wont withstand

when you type: www.gmail.com, the following action will happen. See it is very interesting.

Script1
It first load the javascript file : https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

It checks the browser type, os etc

the function navigator.userAgent.toLowerCase() checks with opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc browsers

that is script 1′s job.

Script 2 calculate the round trip time for a 1 pixel image. This is for finding the internet speed of the user

function GetRoundtripTimeFunction(start)
{
return function()
{
var end = (new Date()).getTime();
SetGmailCookie(“GMAIL_RTT”, (end – start));

}
}

Since gmail uses iframes , this script also make sure to load the actual home
top.location = self.location.href

It also set cookie to show which of the google service is using.

Then loads the login form and set focus on password field.

Gmail Login

Script 3 handles the https connection and cookie settings for secured login

Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs :)

Gmail’s login form ‘s action is pointing to “https://www.google.com/accounts/ServiceLoginAuth?service=mail”

This is the general url for google account login. Here service=mail parameter indicates , this is gmail logging

When the logging verification done, the page is redirected into corresponding service by javascript:

location.replace(“http://www.google.co.in/accounts/SetSID?……etc etc”);

After setting proper session and cookies for login, the non secured site http://mail.google.com/mail page automatically get refresh by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>

When loading the mail page after setting proper login sessions, around 28 ajax web request begin to start, and load all the mails, labels, channels etc

The above mentioned all javascript is also here in this mail loading page

The first division (div) inside the body tag is that for loading. A while text “loading…” with red backgroud.
<div class=”msg”> Loading… </div>

This is the waiting symbol for all the ajax call to load

Loading

There is also a timer is working to check the loading time of ajax requests. If it takes more time than expected (or calculated), it show this error “This seems to be taking longer than usual”

Automatically they provide navigation links for basic html version.

The total page of gmail is created by a set of iframes
viz

HIST_IFRAME
SOUND_IFRAME
CANVAS_IFRAME
JS_IFRAME

The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (Google chat indicator)

Chat window

<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/>

Gmail saves each sections- labels, inbox, mails etc in array with a unique id. This unique id is for checking the updations on the fly using ajax.

For example : http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox

The above url pics all the data as javascript array format. Check this link after logging in gmail. You can see your labels, your from email accounts, your settings,
your last arrived 70 emails subject and from etc information in javascript array format.

This is the url which is to be called when you click older and newer mail (pagination below)

Gmail always call this url : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1

(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .

If there is any updation new rpc with post method automatically called to get new data. The calling url is same , the one above
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox

It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.

Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

The CANVAS_IFRAME is the main iframe contains all the layout of gmail

It contains the left side chat, main inbox or mails right side ads, and all the controls

The left side chat is created using table.

JS_IFRAME contains all the javascripts files for gmail full implementation. There are around 89 js files.

Chat

When you chat with somebody, the url calling is : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

as POST method with parameters:
req2_text <your chat>
req2_to <sender’s email address>
req0_type cf
req1_cmd a
req0_focused 1

Now,

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1

the above url return the chat friends and theire status messages

==========================================================

Same url is using for getting the chat messages.

For example when kenney.jacob@gmail chat with me , the message comes as an array like this:

[184,["m","kenney.jacob@gmail.com","730DFDF6F013F640_161","active","hi da","hi da",1206444193169,

,,0,0,0,0,[]

,”square”]

Foster says

Here active implies the chat is active or not (the window with orange color) and with a chat alert if the window is not active.

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1

The above url checks whether the chat is enable or not. which returns an array:
["b","chatenabled"]

Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/

I will post more about gmail architecture soon .

Tags: , , , ,

· · · ◊ ◊ ◊ · · ·

37 Responses to “Gmail Architecture”

  1. amit says:

    can find out the meaning of the attributes of the request sent by gmail to it’s server.

    for example what does SID represnt here, and so on RID?

    at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

  2. kiran says:

    Hi sajith,
    congrat’s man for keeping more informative in your site,

    My question?

    Did you know how google chat video and calling audio voice works .what kind of programming languages they used?.i wanna know what kind of protocol they used for this app…

    Happy regards
    kiran kumar

  3. ann says:

    Why gmail hide the ip of the senders. Are there anyways to trace the country of the senders.please help me to trace it.A mobile internet expert töld me that gmail is traceble. But she never tell how to trace originating country

  4. [...] gerado pelo javascript do Gmail (se estiver curioso em entender um pouco como o Gmail funciona esse artigo pode ser [...]

  5. Guhan says:

    The post u have and this one http://css.dzone.com/news/gmail-architecture-part-1 is almost the exact same thing.
    donno who copied from who

  6. anurag rana says:

    nice article…. very informative….. thanxs

  7. abhishek says:

    Really intresting one …
    continue with such type of article ….

  8. vivek says:

    excellent architecture

  9. ranganath says:

    really excellent posts and discussions going here.i like it.superb…….

  10. Sharvan says:

    hi guys! how do i pass values for user name and password thru URL for gmail ..!

    Guys need help!!!

  11. sooraj says:

    How to findout the invisible person in Gmail…

  12. Ravi says:

    hello sir,
    i want to add chat facility in my project site like gmail chat, means chat window at bottom-right corner, if any solution or source code u have then plz send me on my email id derravi@gmail.com . plz its very urgent for me.
    thank you sir.

  13. aruna says:

    Hi Sujit

    you proved to be a smart techie………is there any option where we can be invisible at gtalk.
    plz do mail me

    Great job!!!!!

  14. Robin says:

    Excellent post.. Reached this while doing some R &D regarding iframe.

    Orakkam onnum illa alle ? :) lol

  15. [...] There is a saying that using iframe is a bad practise. I don’t know the fact, anyway gmail uses more than 5 iframes to implement all the features and works well. (See Gmail Architecture) [...]

  16. vijay says:

    how can i send more mails at time from my mail

  17. Jaya says:

    Can u tell me how we can implement logout functionality. I am facing problem when back button clicked too fast and javascript can not execute. and we go back I have seen on gmail tha even if we get the previous page but we cant work on it how????

  18. Emrah says:

    Hi Sajith!

    It is a very nice and informative article…Thanks for your efforts.

  19. Dipesh says:

    Hi Sajith,

    Can you please also let us know the login and logout approach used by gmail. As i was working on a code and facing problem with back button.

    Thanks & regards,
    Dipesh

  20. Shiras says:

    Hi Sajith
    Your site was really impressing and thanks for a good article. Now I am currently working on ASP.NET. I have an ASP Upload control where I want to restrict the files of a certain limit on the client side (as soon as the user selects the file). Could you please help me out.

    Thanks
    Shiras

  21. laxman says:

    hai sujit mr i want integrate chat application for my website,do you have source codes?mail to me friend

  22. srinivasan says:

    Great it was nice and very informative. By the way wer r u frm?

  23. abhishek namdeo says:

    Very nice article. Was searching for these type of article from a long time.

  24. J.Naveen says:

    wow very nice article for me, because I am surfing for this. I to wrote an article about Gmail but that is different topic. that is about uploaded files
    http://www.jaininaveen.com/?p=77
    thx….

  25. J.Naveen says:

    Hi,
    I want gmail’s post url for login to my Gmail account, So please tell me the procedure to login from javascript

  26. Raja says:

    Really excellent architecture and the the work done by you.

  27. Vivek Yadav says:

    Nice Information buddy , with informative blogs like yours it’s easy to understand the technology behind everyday stuff ..

  28. Wind Chimez says:

    Good work friend. Good set of information you had shared regarding google’s way of coding. expect more of this kind of posting form you

  29. rakesh says:

    a really gud one…actually was refere by my frend ashish…Thanx ashish…tooo gud!

  30. shoban says:

    informative post.. thanx

  31. Sajith M.R says:

    Yes…I used firebug

  32. Binny V A says:

    Are you using Firebug to reverse engineer the app?

· · · ◊ ◊ ◊ · · ·

Leave a Reply

Need your support
More in html, webworld (48 of 72 articles)


Sythoos wordpress theme is now public . You can download the theme of this site from Sythoos Theme Features ...