Gmail Architecture
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.
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
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)
<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.
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”]
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 .
- Gmail Architecture
- Upload Files Like Gmail
- Gmail Chat Implementation
Are you using Firebug to reverse engineer the app?
Yes…I used firebug
informative post.. thanx
i know my id is blocked by some one on gtalk ….now how to find that person if he/she is online or not on gtalk?…
please help
caddxpert@gmail.com
a really gud one…actually was refere by my frend ashish…Thanx ashish…tooo gud!
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
Nice Information buddy , with informative blogs like yours it’s easy to understand the technology behind everyday stuff ..
Really excellent architecture and the the work done by you.
Hi,
I want gmail’s post url for login to my Gmail account, So please tell me the procedure to login from javascript
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….
Very nice article. Was searching for these type of article from a long time.
chek mail
Great it was nice and very informative. By the way wer r u frm?
hai sujit mr i want integrate chat application for my website,do you have source codes?mail to me friend
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
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
Hi Sajith!
It is a very nice and informative article…Thanks for your efforts.
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????
how can i send more mails at time from my mail
Excellent post.. Reached this while doing some R &D regarding iframe.
Orakkam onnum illa alle ?
lol
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!!!!!
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.
How to findout the invisible person in Gmail…
hi guys! how do i pass values for user name and password thru URL for gmail ..!
Guys need help!!!
really excellent posts and discussions going here.i like it.superb…….
excellent architecture
Really intresting one …
continue with such type of article ….
nice article…. very informative….. thanxs
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
Check the bottom of the above link, you can see original article by Sajith M R.
They put it there with my permission
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
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
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
Good one. See my blog(http://blog-bhaskaruni.blogspot.in/)