AJAX-чат на prototype.js RAD с помощью библиотеки prototype.js на примере AJAX-чата мастер-класс Александр Шуркаев GooDoo IT / Newmedia Stars www.prototypejs.ruwww.prototypejs.ru, - презентация

1 AJAX-чат на prototype.js RAD с помощью библиотеки prototype.js на примере AJAX-чата мастер-класс Александр Шуркаев GooDoo IT / Newmedia Stars htmlcoder.visions.ru htmlcoder.visions.ru

2 2 Почему чат на AJAXе? Передача малого количества данных Быстрое обновление данных Нет необходимости в наличии Java-машины и дополнительного ПО Не используются дополнительные порты AJAX это модно :-)

3 3 Почему prototype.js? Удобная и кроссбраузерная работа с AJAXом, DOMом Готовые расширения JavaScript-объектов ООП подход Самый популярный framework

4 4 Базовый интерфейс чата Список сообщений Список пользователей Поле для сообщения Кнопка отправки сообщения

5 5 Передача данных в AJAX-чате Что такое JSON и чем он хорош? Передача сериализованных объектов и массивов Native-поддержка в prototype.js JSON мало «весит» Вообще, есть и другие способы XML HTML-куски Текст HTTP-заголовки (реализация веб-сервисов)

6 6 AJAX-запросы к серверу Список новых сообщений Список всех пользователей Отправка сообщения

7 7 AJAX-запросы к серверу Список новых сообщений Запрос (GET)Ответ (JSON) /ajax/chat/data.html?room_id=1&stamp =23&rand= {"stamp": 24,"messages": [{"time": , "text": "Превед!","user_id": 5005}, {"time": ,"text": "Ха-ха", "user_id": 10}]}

8 8 AJAX-запросы к серверу Список всех пользователей Получение дополнительных пользователей, нужных для отрисовки списка сообщений Запрос (POST)Ответ (JSON) /ajax/chat/users.html?room_id=1&extra _user_ids=5005,15&rand= [{"video_count": 0, "is_extra_user": 1, "is_contact": 0, "sex": 1, "age": 34, "login": "petya", "username": "PPP", "is_friend": 0, "is_ignored": 0, "smallavatar": "/images/0000/g/o/petya/photo/album1/ _21-sm.jpg", "id": 5005}, {"video_count": 0, "is_extra_user": 1, "is_contact": 1, "sex": 0, "age": 18, "login": "ko4i", "username": "Ko4i-МОЗГ", "is_friend": 0, "is_ignored": 0, "smallavatar": "/images/0000/k/o/ko4i/photo/album1/ _3221-sm.gif", "id": 10}]

9 9 AJAX-запросы к серверу Отправка сообщения Объединение отправки и показа новых сообщений Буферизация сообщений Запрос (POST)Ответ (JSON) /ajax/chat/msg.html? msg=Hi!&room_id=1&stamp=554&rand = {"stamp": 555, "messages": [{"time": , "text": Hi!", "user_id": 99}]}

10 10 Структура JavaScript-модулей /js/ /ajax/ chat.js (класс Chat + вспомогательные объекты) init.js («константы» + Ajax.Responders) /lib/ prototype.js (версия 1.5) utils.js (некоторые вспомогательные функции)

11 11 JS-классы и объекты чата Ключевые используемые prototype.js-классы PeriodicalExecuter Ajax.Request Template Класс Chat Вспомогательные объекты ChatHelpers ChatAjaxHelpers ChatStrings

12 12 JS-классы и объекты чата PeriodicalExecuter startListTimer: function(type){ if (typeof this[type + '_list_timer'] == 'undefined') this[type + '_list_timer'] = new PeriodicalExecuter(this[('get-' + type + '- list').camelize()].bind(this), this.options[type + '_updater_frequency']); else this[type + '_list_timer'].registerCallback(); }, stopListTimer: function(type){ if (typeof this[type + '_list_timer'] != 'undefined') this[type + '_list_timer'].stop(); }

13 13 JS-классы и объекты чата Ajax.Request getMsgsList: function(){ this.stopListTimer('msgs'); new Ajax.Request( this.options.msgs_url, { method: 'get', parameters: 'room_id=' + this.room_id + '&stamp=' + this.stamp + ChatAjaxHelpers.addExtraAjaxParams(), onComplete: this.getMsgsListDone.bind(this), onFailure: ChatAjaxHelpers.handleAjaxFailure.bind(this, this.options.frontend_base_url) }); }

14 14 JS-классы и объекты чата Template msg_default_tpl: new Template(' #{time} #{user_ico} #{username}: #{text} '), msg_system_tpl: new Template(' #{time} #{text} '), msgListItemTemplate: function(vars, type){ var type = type || 'default'; return ChatHelpers['msg_' + type + '_tpl'].evaluate(vars); }

15 15 JS-классы и объекты чата Класс Chat var Chat = new Class.create(); Chat.prototype = { initialize: function(room_id, msg_form, msg_input, msg_submit, msgs_list_div, users_list_div, user_login, options){ /*... */ } };

16 16 JS-классы и объекты чата Вспомогательные объекты ChatHelpers ChatAjaxHelpers ChatStrings var ChatStrings = { NA: 'N/A', TO: ' > ' }

17 17 Практические приемы Инициализация настроек класса (options) Приватные данные в классе Борьба с кэшированием AJAX-запросов windows-1251 вместо UTF

18 18 Tip: инициализация настроек this.options = { msgs_url: '/ajax/chat/data.html', msg_url: '/ajax/chat/msg.html', users_url: '/ajax/chat/users.html', frontend_base_url: '/chat/?room_id=0', msgs_updater_frequency: 5, users_updater_frequency: 20, max_msgs_in_list: 100, max_chars_in_username: 20 }; Object.extend(this.options, options || {});

19 19 Tip: приватные данные var _users_open_cache = []; this.isInUsersOpenCache = function(user_id){ return (_users_open_cache.indexOf(user_id) >= 0); } this.usersOpenCacheAdd = function(user_id){ if (!this.isInUsersOpenCache(user_id)) _users_open_cache.push(user_id); } this.usersOpenCacheDelete = function(user_id){ _users_open_cache = _users_open_cache.without(user_id); }

20 20 Tip: борьба с кэшированием var ChatAjaxHelpers = { /*... */ addExtraAjaxParams: function(){ return '&rand=' + Math.random(); }, /*... */ }

21 21 Tip: windows-1251 вместо UTF window.encodeURIComponent = function(str){ var trans = []; for (var i = 0x410; i

22 22 Отладка чата Обработка исключений и AJAX-ошибок Объект Ajax.Responders Методы ChatAjaxHelpers.handleAjaxFailure и ChatAjaxHelpers.evalJsonResponse Firebug! Firebug! Firebug!

23 23 Ajax.Responders var ajaxGlobalHandlers = { onException: function(t, e){ if (typeof DEBUG != 'undefined' && DEBUG){ var error_info = $H(e); var s = ''; error_info.each(function(pair){ s += pair.key + ' = "' + pair.value + '"\n'; }); alert(s); } }; Ajax.Responders.register(ajaxGlobalHandlers);

24 24 ChatAjaxHelpers.handleAjaxFailure var ChatAjaxHelpers = { /*... */ handleAjaxFailure: function(frontend_base_url, request){ if (typeof DEBUG != 'undefined' && DEBUG) alert('Error: ' + request.status + ' -- ' + request.statusText); else if (request.status == 412) location.reload(); // Precondition Failed else location.href = frontend_base_url; }

25 25 ChatAjaxHelpers.evalJsonResponse var ChatAjaxHelpers = { /*... */ evalJsonResponse: function(json_str){ var data = null; try{ data = eval('(' + json_str + ')'); }catch(e){ if (typeof DEBUG != 'undefined' && DEBUG) throw {message: 'JSON data is invalid!'}; } return data; }

26 26 Вопросы

27 27 Что интересного на сервере? Крутится Perl-демон Клиент делает запросы по HTTP, через AJAX Демон «узнает» клиента по сессионной куке В ответ на любой из запросов демон отдает текстовый ответ в формате JSON JavaScript-модули gzipуются Не стоит особо беспокоиться о большом размере модулей