Tag: Javascript

Jeśli dobrnąłeś tutaj i masz działający czat to gratuluję!  W tej, już na pewno ostatniej części zajmiemy się rzeczą może nie aż tak istotną, za to fajną. Dorobimy emotikonki oraz dźwięk nadejścia wiadomości.

Emotikonki

Zacznijmy od emotków. Sprawa wygląda dość prosto. Musimy zastępować tylko emotki tekstowe, takie jak: ":)" wersjami graficznymi czyli po prostu plikami png.

Aby to zrobić napisałem niewielką klasę w libs/:
Klasa emoticoner.rb

class Emoticoner
  ICONS = {
    :smile => {:string => [":)", ";)["], :icon => "smile.png"},
    :happy => {:string => [":D", ";D", ":d", ";d"], :icon => "happy.png"},
    :sad => {:string => [":(", ";("], :icon => "sad.png"},
    :tongue => {:string => [":p", ";p", ":P", ";P"], :icon => "tongue.png"},
  }

  PATH = '/images/emoticons'

  def self.emoticate(msg)
    ICONS.each do |name, row_data|
      row_data[:string].each do |ico|
        msg = msg.gsub(ico, "<img src=\"#{PATH}/#{row_data[:icon]}\" alt=\"\" />")
      end
    end
    msg
  end
end

Jak widzimy, podajemy w stałej ICONS klucz a następnie tablicę "buziek" które mają zostać zastąpione, oraz info na co.
W metodzie statycznej emoticate następuje ta zamiana i zwrócenie już poprawnie wypełnionego ikonkami tekstu.

W stałej PATH przechowujemy informację na temat ścieżki do plików z ikonkami. Teraz wystarczy dodać include w kontrolerze chat:

require ('emoticoner.rb')

I zastąpić przypisanie z parametru do zmiennej msg, następującym kodem:

    msg = Emoticoner.emoticate(h(params[:chat_input]))

Oczywiście do (w moim wypadku) katalogu /images/emoticons wrzucamy pliki z buźkami.

Dźwięk wiadomości

Dorobienie dźwięku wiadomości także nie jest trudne.

Zamieszczamy poniższy kod javascript w kodzie naszej strony:

function DHTMLSound(surl) {
  document.getElementById("dummyspan").innerHTML=
    "<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}

Dodajemy po tagu otwierającym body, taki oto kod html (u nas w layoucie rooms.erb:

<span id=dummyspan></span>

Do akcji send_data dopisujemy jako ostatni element renderu do juggernauta:

      page << "DHTMLSound('/sounds/notice.wav');"

I pamiętamy aby umieścić plik z dzwiękiem w katalogu do którego wskazujemy :)

Mamy juz i emotikonki i dźwięki.

Poniżej zamieszczam kod źródłowy całego projektu. Działa na pewno, ponieważ to na jego bazie robiłem printscreeny :)

Źródełka

Cały zamieszczony tutaj kod możesz dowolnie wykorzystywać w celach edukacyjnych.

Części tutorialu:

1. Juggernaut Rails Chat – część I (czym jest Juggernaut i jak go zainstalować)
2. Juggernaut Rails Chat – część II (design)
3. Juggernaut Rails Chat – część III (rejestracja i logowanie)
4. Juggernaut Rails Chat – część IV (zarządzanie pokojami)
5. Juggernaut Rails Chat – część V (łączenie użytkowników z pokojami)
6. Juggernaut Rails Chat – część VI (odpalamy Juggernaut i nasz chat)
7. Juggernaut Rails Chat – część VII (emotikonki i dźwięk)