Gmail客户端详细架构之一
程序员文章站
2022-06-12 12:42:22
...
Gmail是最好的web应用之一,这篇文章开始详细分析Gmail客户端的架构。
首先加载JavaScript file
首先用js来检验客户端用的是什么浏览器,navigator.userAgent.toLowerCase()函数得出是以下哪种浏览器:opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2。Script 2计算加载一个象素的时间,用来测试客户的网络速度。
gmail使用iframe,这个script确认加载正确的home page
同时写入cookie,确认使用的是哪个google services。然后显示登录页面。
Script 3 请求https链接,设置安全登录cookie
登录成功显示正常google帐户页面。 service=mail 参数表示登录的是gmail服务。
记录session和设置登录cookies后,页面http://mail.google.com/mail 自动加载:
当加载mail页面,差不多有 28 个ajax 请求传送加载mail内容,labels标签,频道等。第一个 DIV tag 是用来显示"loading..." 信息.
当 Ajax 请求传送,同时有一个计时器计算加载时间,如果超过预期时间,将会显示: "This seems to be taking longer than usual" 同时提供一个简单HTML版本链接。
Gmail 用户界面由以下 iFrames 组成:
* HIST_IFRAME
* SOUND_IFRAME
* CANVAS_IFRAME
* JS_IFRAME
SOUND_IFRAME 用来加载一个flash对象提供音频服务,当用户使用gmail聊天服务时。
Gmail 记录每个部分,标签,mails等,emails使用数组,每个mail有一个唯一的id,这个唯一id被ajax查看和更新使用。例如:
以上url和图片都作为一个javascript数组来调用,你可以登录你的gmail查看一下,你的标签,你受到的emails,你的设置,你的最新的70封email等等,都是通过Javascript数组编码。gmail总是这样调用:
如果通过Post方式自动远程有更新,请求url和上面类似:
如果得到新的数据,新的数据同样通过javascript数组加载。无论你打开哪封邮件,浏览器始终同时发送广告代码:
CANVAS_IFRAME 是 main iframe ,调用所有的布局元素,组成gmail界面:包含左侧的聊天部分,收件箱,打开邮件,广告部分等。左侧使用HTML table创建,JS_IFRAME 包含所有的javascripts文件,总共有89 个js文件。
如果你和某人聊天,请求的url是:
通过Post函数发送以下参数:
现在,上面的url返回给你聊天的朋友列表,以及他们的状态,使用同样url得到聊天信息,比如当 kenney.jacob@gmail和我聊天,消息数组通过这样的方式发送:
这里有一个提示聊天是活动的或者不是,通过以下url:
返回数组类似下面:
首先加载JavaScript file
https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy
首先用js来检验客户端用的是什么浏览器,navigator.userAgent.toLowerCase()函数得出是以下哪种浏览器:opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2。Script 2计算加载一个象素的时间,用来测试客户的网络速度。
function GetRoundtripTimeFunction(start) { return function() { var end = (new Date()).getTime(); SetGmailCookie(”GMAIL_RTT”, (end - start)); } }
gmail使用iframe,这个script确认加载正确的home page
top.location = self.location.href
同时写入cookie,确认使用的是哪个google services。然后显示登录页面。
Script 3 请求https链接,设置安全登录cookie
https://www.google.com/accounts/ServiceLoginAuth?service=mail
登录成功显示正常google帐户页面。 service=mail 参数表示登录的是gmail服务。
location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);
记录session和设置登录cookies后,页面http://mail.google.com/mail 自动加载:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>
当加载mail页面,差不多有 28 个ajax 请求传送加载mail内容,labels标签,频道等。第一个 DIV tag 是用来显示"loading..." 信息.
当 Ajax 请求传送,同时有一个计时器计算加载时间,如果超过预期时间,将会显示: "This seems to be taking longer than usual" 同时提供一个简单HTML版本链接。
Gmail 用户界面由以下 iFrames 组成:
* HIST_IFRAME
* SOUND_IFRAME
* CANVAS_IFRAME
* JS_IFRAME
SOUND_IFRAME 用来加载一个flash对象提供音频服务,当用户使用gmail聊天服务时。
<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 记录每个部分,标签,mails等,emails使用数组,每个mail有一个唯一的id,这个唯一id被ajax查看和更新使用。例如:
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox
以上url和图片都作为一个javascript数组来调用,你可以登录你的gmail查看一下,你的标签,你受到的emails,你的设置,你的最新的70封email等等,都是通过Javascript数组编码。gmail总是这样调用:
http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1
如果通过Post方式自动远程有更新,请求url和上面类似:
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox
如果得到新的数据,新的数据同样通过javascript数组加载。无论你打开哪封邮件,浏览器始终同时发送广告代码:
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox
CANVAS_IFRAME 是 main iframe ,调用所有的布局元素,组成gmail界面:包含左侧的聊天部分,收件箱,打开邮件,广告部分等。左侧使用HTML table创建,JS_IFRAME 包含所有的javascripts文件,总共有89 个js文件。
如果你和某人聊天,请求的url是:
http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1
通过Post函数发送以下参数:
req2_text <your chat> req2_to <sender’s email address> req0_type cf req1_cmd a req0_focused 1 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
现在,上面的url返回给你聊天的朋友列表,以及他们的状态,使用同样url得到聊天信息,比如当 kenney.jacob@gmail和我聊天,消息数组通过这样的方式发送:
[184,[”m”,”kenney.jacob@gmail.com”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169, 2. ,,0,0,0,0,[],”square”]
这里有一个提示聊天是活动的或者不是,通过以下url:
http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1
返回数组类似下面:
[”b”,”chatenabled”]
推荐阅读