Wednesday 26th March 2008by Mr Me
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.
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
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
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 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
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
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
Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc
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.
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>
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","email@example.com","730DFDF6F013F640_161","active","hi da","hi da",1206444193169,
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.
The above url checks whether the chat is enable or not. which returns an array:
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 .