Czat z wykorzystaniem technologii jQuery.

Cz. 1 – wprowadzanie danych z klawiatury

Poniższy program wprowadza dane z klawiatury i wypisuje je w formie Czatu z komputerem, który co 4 sekundy odpisuje tylko „cześć”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
 <head>
 <meta charset="utf-8">
 <title>Chat</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
  <div id="lista">
  </div>
 <br>  
  <div id="inputbox">
   <input id="wiadomosc">
   <input type="button" value="wyslij" onclick="wyslij()">
  </div>
  <script>
   var wprowadz = document.getElementById("wiadomosc");
   var wypisz = document.getElementById("lista");

   function wyslij()
   {
     wypisz.innerHTML += "<i>Użytkownik:</i> "+ wprowadz.value + "<br>";
     wprowadz.value = "";
     //tu trzeba zrobić wysyłanie na serwer wiadomości do zapisu w bazie
    }

  function odbierz()
  {
      wypisz.innerHTML += "<i>Komputer:</i> cześć<br>";
       // tu trzeba zrobić odczyt z bazy wpisów innych użytkowników, na razie komputer odpisuje tylko "cześć" co 4 sek.  
  }

  setInterval(odbierz, 2000); //funkcja odbierz() będzie uruchamiana co 4 sekundy
  </script>
 </body>
</html>

Działający przykład:
Link
c.d.n.

Etap 2 – zapis rozmowy do bazy danych

W bazie danych tworzymy tabelę:

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS `czat` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `uzytkownik` VARCHAR(50) NOT NULL,
  `wiadomosc` VARCHAR(200) NOT NULL,
  `czas` datetime NOT NULL,
  `ip` VARCHAR(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Logujemy autora wiadomości, treść, datę i czas oraz IP z którego wysłano wiadomość.

Następnie:

Tworzymy na serwerze program wstaw.php, który będzie zapisywał do tej tabeli zmienne typu _GET
wstaw.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 include "polacz.php";
 $uzytkownik = $_GET["uzytkownik"];
 $wiadomosc = $_GET["wiadomosc"];
 $ip = $_SERVER['REMOTE_ADDR']; //odczyt zdalnego IP komputera klienta
 if ($sql = $baza->prepare("INSERT INTO czat VALUES( '', ?, ?, NOW(), ? );"))
 {
  $sql->bind_param("sss", $uzytkownik, $wiadomosc, $ip);
  $sql->execute();
  $sql->close();
 }
$baza->close();
?>

i rozbudowujemy nasz czat o kilka linijek zapisujących do bazy

1
2
3
4
 $.get(
       "wstaw.php",
       { uzytkownik: uzytkownik, wiadomosc: document.getElementById("wiadomosc").value }
     );

Trzecia odsłona – wczytywanie całego czatu z bazy

Tworzymy teraz plik odczytujący z bazy:
odbierz.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
include "polacz.php";
if ($sql = $baza->prepare("SELECT uzytkownik, ip, wiadomosc, czas FROM czat ORDER BY id DESC LIMIT 20"))
{
 $sql->execute();
 $sql->bind_result($uzytkownik, $ip, $wiadomosc, $czas);
 $wynik="";
 while ($sql->fetch())
 {
   $wynik = "<i>$uzytkownik</i>@$ip: $wiadomosc <small>$czas</small> <br>".$wynik;
 }
 $sql->close();
 echo $wynik;
}
$baza->close();
?>

Zmienna $wynik jest pomocnicza, odwraca kolejność wierszy tak,by nowe były u dołu, wczytujemy tylko ostatnie 20 wierszy czatu

W programie w funkcji odbierz zamiast komputerowego zgłoszenia „cześć” umieszczamy odbieranie najnowszego stanu z bazy:

1
2
3
4
5
6
7
 $.get(
        "odbierz.php",
        function (dane,statut)
        {
                document.getElementById("lista").innerHTML = dane; //wpisuje cały czat z bazy do warstwy
        }
  );

W całości będzie to wyglądać tak:
chat.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 <head>
 <meta charset="utf-8">
 <title>Chat</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
<?php
include "polacz.php";
$uzytkownik = wczytaj( "uzytkownik" ); // wczyta nazwe uzytkownika z tablicy $_GET  z adresu
?>
  <div id="lista">
  </div>
 <br>
  <div id="inputbox">
   <input id="wiadomosc">
   <input type="button" value="wyslij" onclick="wyslij()">
  </div>
  <script>
   function wyslij()
   {
     var uzytkownik = "<?php echo $uzytkownik; ?>";
     $.get(
       "wstaw.php",
       {
         uzytkownik: uzytkownik,
         wiadomosc:  document.getElementById("wiadomosc").value
       }
     );
     wprowadz.value = "";
    }

  function odbierz()
  {
    $.get(
        "odbierz.php",
        function (dane, bledy)
        {
                document.getElementById("lista").innerHTML = dane; //wpisuje cały czat z bazy do warstwy
        }
    );
  }

  setInterval( odbierz, 2000);
  </script>
 </body>
 </html>

UWAGA! Chat wywołujemy z parametrem będącym nazwą użytkownika np.

1
chat.php?uzytkownik=adam
JavaScript, PHP