Po ok. tygodniu pisania i testowania kodu, mogę wreszcie udostępnić wersję 0.9 aplikacji będącej chatem AJAXowym.

AJAX Chat w akcji

Features, czyli co mną kierowało:

  • Internauta może za pomocą kliknięcia rozwinąć lub schować chat - nie przeszkadza mu w przeglądaniu witryny, będąc domyślnie schowanym.
  • Internatura może sprawnie poruszać się po witrynie mając rozwinięty chat: nie jest to pop-up, lecz stanowi integralną część strony, będąc wraz z nią przesuwalnym suwakami. Sprawne poruszanie oznacza także, że przy przejściu do innej podstrony, chat zostanie automatycznie otwarty.
  • Chat jest estetyczny: nie zawiera żadnych grafik, jednak świetnie komponuje się z witrynami społecznościowymi - głównie forami, czy stronami hobbystycznymi. Adresy są automatycznie zamieniane na odnośniki. Przewijanie okna jest podobne do znanego z Gmaila: chat sprawdza, czy użytkownik nie czyta wcześniejszych wiadomości, zanim przesunie się, pokazując nową treść. Dodatkowo dodany jest przyjemny dla oka efekt znikania i pojawiania się chata.
  • Z punktu widzenia developera, stanowi w miarę kompaktowy skrypt: całość zajmuje 31KB (po usunięciu niektórych zbędnych części pakietu Script.Aculo.Us). Oparty jest na Prototype i MySQL, a kod jest na tyle przejrzysty, że zbędne są komentarze. Naturalnie, jest odporny na XSS i tego typu atrakcje.
  • Skrypt nie generuje dużego obciążenia: aktualizuje treść jedynie przy rozwiniętym oknie, z czasem ustawionym domyślnie na 2 sekundy. Pobiera generowany przy wysyłaniu wiadomości plik stały z odpowiednimi nagłówkami, które gwarantują korzystanie z cache przeglądarki w przypadku braku zmiany treści.
  • Działa bez zarzutu pod przeglądarkami: Firefox 1.5.0.4, IE 6.0, Opera 8.52. Pod innymi nie sprawdzałem, jednak powinien chodzić pod wszystkim, co jest obsługiwane przez script.aculo.us i prototype. Oczywiście trzeba być przygotowanym na błędną interpretację CSS - nie przykładałem do tego wielkiej wagi, ponieważ większość osób i tak stworzy własny szablon

Wszystko spakowałem haxorskim winrarem. Do pobrania: wersja 0.9. Licencja... naturalnie darmowa do zastosowań niekomercyjnych. W przypadku komercyjnych - jakaś symboliczna opłata ;) Wymagam jedynie, by zostawić w okienku chata odnośnik do http://ajax.eldoras.com. Demo działającego skryptu można obejrzeć na garfiku.

Instalacja:

  • Rozpakowujemy archiwum, modyfikujemy w pliku newmsg.php dane do połączenia z bazą danych (login, hasło, nazwa bazy). Całość wgrywamy na serwer.
  • Używamy db.sql do stworzenia tabel w bazie danych MySQL.
  • Do każdej strony, na której chcemy mieć chat, dołączamy w nagłówku 5 plików, jak widać w pliku sample_index.php (1 CSS i 4 skrypty, przy czym fixed.js to hack dla IE umożliwiający uzyskanie pozycji typu fixed). W treści strony (może być zaraz po znaczniku body) dodajemy diva "openchat" oraz includujemy chat.php (przykład w sample_index.php).
  • Opcjonalnie możemy zmodyfikować arkusz styli chat.css do naszych potrzeb. Nie zalecam zmiany identyfikatorów CSS - są do nich przypisane funkcje w JavaScript.

Wszelkie uwagi mile widziane, zmiany można nadsyłać na e-mail. Ufam, że będzie to coś, co rozejdzie się po necie i zostanie udoskonalone - mój wkład w open source community :)

Community jednak także mi trochę pomogło. Główne podziękowania należą się Patrysowi za cenne uwagi i praktyczną pomoc oraz Riddle'owi za uświadomienie mnie odnośnie zagadnień XHT cross-subdomain :)

  • Dodaj lub śledź Atom dla komentarzy komentarze
  • Kategorie wpisu: Codzienność, Informatyka, Techblog, Twórczość, Wszystkie
  • Trackback do wpisu (?)
  • Dodaj do Ma.Gnolia Dodaj do del.icio.us Dodaj do Digg.com Dodaj do StumbleUpon Dodaj do Google Reader lub Google IG