Розробка адміністративної частини web-додатку

Перший файл, який розглянемо, ajax.php. Він обробляє запити AJAX від клієнтської частини з jQuery і виводить дані в форматі JSON.
Для зручності використовується оператор switch для визначення дій, які обробляє скрипт. Тут реалізовані підсистеми чату, функціональність входу / виходу та дії за запитом списку реплік і користувачів в режимі онлайн.

Висновок здійснюється у формі повідомлень JSON (які зручно обробляти за допомогою jQuery), помилки генерують виключення. Оператор switch розподіляє всі запити відповідним статичним методам класу Chat.

Чат працює, отримуючи події від форм реєстрації та відправки повідомлення, а також від кнопки " Вийти", а також за розкладом відправляються запити AJAX до сервера для перевірки наявності нових повідомлень і користувачів.

PHP частина обробляє запити AJAX в файлі ajax.php. jQuery генерує такі запити AJAX:

- Вхід користувача в систему: один запит POST;

- Вихід користувача із системи: один запит POST;

- Перевірка користувачів, які знаходяться в режимі онлайн: виконується кожні 15 секунд;

- Перевірка нових записів: запит GET генерується кожну секунду. Таке функціонування може привести до дуже високому навантаженні на веб сервер, тому скрипт оптимізований, і в залежності від активності чату, період генерації запиту може бути збільшений до 15 секунд.

Визначили для користувача функції-обгортки для функцій AJAX jQuery $.get і $.post, які допомагають заповнювати довгі параметри для генерації запиту.

Також весь код чату організований в один об'єкт chat. Він містить кілька зручних методів.

Метод init () призначений для прив'язки обробників подій до чату і запуску функцій таймера, які використовуються для перевірки за розкладом наявності нових записів в чаті і списку користувачів в режимі онлайн. Використовуємо власні функції-обгортки - $.tzGET і $.tzPOST. Вони приймають на себе весь тягар роботи за завданням довгого списку параметрів для запитів AJAX.

У другій частині скрипта продовжуємо прив'язку обробників подій. У функції відправки форми можна помітити, що коли користувач створює новий запис в чаті, створюється тимчасова рядок, яка виводиться негайно в вікно чату, без очікування завершення запиту AJAX. Як тільки запис буде завершена, тимчасова рядок видаляється з екрану. Так користувач отримує відчуття, що чат працює блискавично, в той час як реальна запис відбувається в фоновому режимі.

Наприкінці даного шматка коду запускаються дві іменовані самовиконувана функції. Дані функції будуть передаватися як параметри методам chat.getChats () або chat.getUsers () відповідно, таким чином, можуть бути встановлені додаткові таймаут.

У цій частині коду уваги вимагає метод render (). Він збирає шаблон в залежності від параметра template. Метод потім створює і повертає запитуваний код HTML, вставляють в нього значення другого параметра об'єкта params.

Метод addChat () отримує в якості параметра об'єкт, який містить рядок чату, ім'я автора та gravatar, і вставляє рядок чату в відповідне місце в контейнері div #chatContainer. Кожен рядок чату (якщо вона не є тимчасовою) має унікальний ID, який призначається MySQL. Даний id як ім'я класу для рядка чату в форматі chat-123.

Коли метод addChat () виконується, він перевіряє існування попереднього рядка (для chat-123 буде перевірятися наявність chat-122). Якщо він існує, метод вставляє новий рядок після нього. Якщо немає, то просто додає новий рядок до div. Така проста техніка управляє вставкою рядків в правильному порядку і підтримує його протягом всієї роботи чату.
У цій частині коду відбувається управління запитами AJAX. У методі getChats () визначається, коли буде знову виконуватися функція в залежності від властивості noActivity локального об'єкта даних. При кожному запиті, який не повертає нових рядків чату, ми збільшуємо лічильник. Якщо він досягає певного порогу, наступний запит буде генеруватися з задержкой.В останньої частини коду визначаються допоміжні функції та методи. Метод displayError () показує червону рядок вгорі екрану, якщо відбувається помилка. Потім визначаються функції-обгортки $.tzGET і $.tzPOST, і плагінdefaultText, який виводить заповнює текст для полів вводу тексту.