Статьи

Gmail Client Side Architecture Часть 1

Gmail — лучшее веб-приложение, которое я когда-либо видел. Простая реализация, Ajax, чат, сообщения о состоянии, быстрое получение почты, оперативное обновление и его функции бесконечны. При вводе: www.gmail.com произойдут следующие действия.

Script1 загружает первый файл JavaScript

https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

Работа первого скрипта заключается в проверке типа браузера, операционной системы и т. Д. Функция navigator.userAgent.toLowerCase () проверяет, является ли это опера, msie, mac, gecko, safari, palmsource, regking, windows ce, avantgo, stb, pda; sony / com2 и т. д. Скрипт 2 рассчитывает время прохождения туда и обратно для изображения в 1 пиксель. Это для определения скорости интернета пользователя:

function GetRoundtripTimeFunction(start){return function(){var end = (new Date()).getTime();SetGmailCookie(”GMAIL_RTT”, (end - start));}}

Поскольку в gmail используются фреймы, этот скрипт также загружает реальную домашнюю страницу:

top.location = self.location.href

В то же время он также устанавливает cookie, чтобы показать, какие из сервисов Google он использует. Затем он загружает форму входа и устанавливает фокус на поле пароля.

[Img_assist | NID = 3476 | название = | убывание = | ссылка = нет | Align = нет | ширина = 335 | высота = 213]

Скрипт 3 обрабатывает соединение https и настройки cookie для безопасного входа в систему. На экране входа в систему Google по-прежнему решил использовать не совсем разметку таблицы Web 2.0, но, кроме этого, сценарии входа в систему будут указывать на следующее:

https://www.google.com/accounts/ServiceLoginAuth?service=mail

Это общий URL для входа в учетную запись Google. Здесь параметр service = mail указывает, что это вход в Gmail. После завершения проверки страница перенаправляется на соответствующий сервис через javascript:

location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);

После регистрации сеанса и настройки файлов cookie для входа в систему незащищенная страница http://mail.google.com/mail автоматически обновляется с помощью этого метатега:

<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>

При загрузке почтовой страницы, после установки надлежащих сеансов входа в систему, запускается около 28 ajax-запросов для загрузки всех почтовых сообщений, меток, каналов и т. Д. Первый тег DIV внутри тега body предназначен для отображения сообщения «loading …». ,

Во время выполнения Ajax-запроса также работает таймер для проверки времени загрузки ajax-запросов. Если это занимает больше времени, чем ожидалось (или рассчитывается), он показывает это сообщение: «Кажется, это занимает больше времени, чем обычно». В то же время он предоставляет ссылку для доступа к основной HTML-версии.

Интерфейс Gmail создан из серии следующих iFrames:

  • HIST_IFRAME
  • SOUND_IFRAME
  • CANVAS_IFRAME
  • JS_IFRAME

Сеанс SOUND_IFRAME загружает флэш-объект для воспроизведения звуков при использовании службы чата из Gmail. (Индикатор чата Google)

[Img_assist | NID = 3508 | название = | убывание = | ссылка = нет | Align = нет | ширина = 230 | Высота = 221]

<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 сохраняет каждый раздел, ярлыки, входящие, письма и т. Д. В массиве с уникальным идентификатором. Этот уникальный идентификатор предназначен для проверки обновлений на лету с помощью 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. Посмотрите этот URL при следующем входе в Gmail. Вы можете видеть ваши ярлыки, полученные вами электронные письма, ваши настройки, ваши последние 70 полученных сообщений электронной почты и т. Д. И все они закодированы в формате массива Javascript. Это URL, который должен вызываться, когда вы нажимаете на старую и более новую почту, т.е. нумерацию страниц. Gmail всегда называют этот URL:

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

Если есть какие-либо обновления, автоматически вызывается новый вызов RPC через метод 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. Остальная часть работы выполняется сценарием на стороне клиента. Всякий раз, когда вы открываете почту из своего почтового ящика, браузер отправляет другой запрос на загрузку спонсорских ссылок (совет) через этот RPC:

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

CANVAS_IFRAME является основным IFrame и содержит все элементы макета , которые составляют интерфейс Gmail. Он содержит левый чат, основной почтовый ящик или открытую почту, рекламу справа и все элементы управления. Левая область чата создается с использованием таблицы HTML. JS_IFRAME содержит все файлы JavaScripts для всей реализации Gmail. В iframe загружено около 89 файлов.

[Img_assist | NID = 3509 | название = | убывание = | ссылка = нет | Align = нет | ширина = 158 | Высота = 415]

Когда вы общаетесь с кем-то, 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 cfreq1_cmd areq0_focused 1http://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, ,,0,0,0,0,[],”square”]

[Img_assist | NID = 3513 | название = | убывание = | ссылка = нет | Align = нет | ширина = 255 | высота = 32]

Здесь active указывает, активен ли чат (окно с оранжевым цветом) и с предупреждением о чате, если окно не активно. В заключение первой части этой серии, посвященной архитектуре Gmail, мы увидим, как Gmail проверяет, включен ли чат в Gmail. Это делается через следующий URL:

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

И это вернет массив, такой как этот:

[”b”,”chatenabled”]

Надеюсь, вам понравилась первая часть об архитектуре Gmail. Я скоро опубликую больше о других аспектах Gmail.

Оригинальный Автор

Оригинальная статья, написанная Sajith.MR