Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

Gmail客户端详细架构之一

Posted on 2008-06-17 14:20  analyzer  阅读(561)  评论(0)  编辑  收藏  举报
Gmail是最好的web应用之一，这篇文章开始详细分析Gmail客户端的架构。

首先加载JavaScript file

Js代码 复制代码
  1. 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计算加载一个象素的时间，用来测试客户的网络速度。

Js代码 复制代码
  1. function GetRoundtripTimeFunction(start)     
  2. {     
  3.   return function()     
  4.   {     
  5.   var end = (new Date()).getTime();     
  6.   SetGmailCookie(”GMAIL_RTT”, (end - start));     
  7.      
  8.   }     
  9. }    



gmail使用iframe，这个script确认加载正确的home page
Js代码 复制代码
  1. top.location = self.location.href  


同时写入cookie，确认使用的是哪个google services。然后显示登录页面。



Script 3 请求https链接，设置安全登录cookie

Js代码 复制代码
  1. https://www.google.com/accounts/ServiceLoginAuth?service=mail   


登录成功显示正常google帐户页面。 service=mail 参数表示登录的是gmail服务。
Js代码 复制代码
  1. location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);  


记录session和设置登录cookies后，页面http://mail.google.com/mail 自动加载：

Js代码 复制代码
  1. <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聊天服务时。


Js代码 复制代码
  1. <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查看和更新使用。例如:

Js代码 复制代码
  1. 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总是这样调用：

Js代码 复制代码
  1. http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1    


如果通过Post方式自动远程有更新，请求url和上面类似：

Js代码 复制代码
  1. http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox    


如果得到新的数据，新的数据同样通过javascript数组加载。无论你打开哪封邮件，浏览器始终同时发送广告代码：

Js代码 复制代码
  1. 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是：

Js代码 复制代码
  1. http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1    


通过Post函数发送以下参数：

Js代码 复制代码
  1. req2_text <your chat>     
  2.    req2_to <sender’s email address>     
  3.    req0_type cf     
  4.    req1_cmd a     
  5.    req0_focused 1     
  6.          
  7.     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和我聊天，消息数组通过这样的方式发送：

Js代码 复制代码
  1. [184,[”m”,”kenney.jacob@gmail.com”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169,      
  2.    2. ,,0,0,0,0,[],”square”]   


这里有一个提示聊天是活动的或者不是，通过以下url：

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


返回数组类似下面：

Js代码 复制代码
  1. [”b”,”chatenabled”]    
我要啦免费统计