• Gmail客户端详细架构之一

    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;  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”]    
  • 相关阅读:
    1869六度分离
    1162Eddy's picture
    hdu2544
    3549Flow Problem
    1272小希的迷宫
    2112HDU Today(Dijkstra)
    1878欧拉回路
    hdu1116Play on Words
    2112HDU Today(SPFA)
    在程序中动态创建视图
  • 原文地址：https://www.cnblogs.com/analyzer/p/1223890.html
Copyright © 2020-2023  润新知