Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP]Prosty czat z wykorzystaniem PHP/MySQL/AJAX
Forum PHP.pl > Forum > Przedszkole
pabito
9.06.2013, 20:59:15
Witam
Postanowiłem w ramach ćwiczenia zrobić prosty czat oparty na PHP/MySQL/AJAX
Czat ma mieć możliwość wysyłania wiadomości i następnie ta wiadomość zostaje wyświetlona w okienku czatu bez przeładowania strony.
Wszystko jest okej, ale:
1. Gdy dodam:
wiadomość nr 1, otrzymuję (wiadomość nr 1)
wiadomość nr 2, otrzymuję (wiadomość nr 1,wiadomość nr 1, wiadomość nr 2)
wiadomość nr 2, otrzymuję (wiadomość nr 1,wiadomość nr 1, wiadomość nr 2,wiadomość nr 1,wiadomość nr 2, wiadomość nr 3)
itd.
czyli wiadomości się powtarzają( obrazek lepiej to wyjaśnia)


Uploaded with ImageShack.us
jak tego uniknąć ?

2. Załóżmy ze mamy 2 userów. Jeden wysyła wiadomość i mu się odświeża okno, a drugiemu nie. Jak to rozwiązać, że gdy ktoś wyśle wiadomość okno przeładuję się wszystkim.

index.php
[PHP] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  4.     </head>
  5.     <body>
  6.         <style>
  7.             .chat
  8.             {
  9.                 margin:0 auto;
  10.                 width:700px;
  11.                 height:600px;
  12.                 background-color:#e7e7e7;
  13.                 border: 1px #000 solid;
  14.                 font-family:verdana;
  15.                 font-size:11px;
  16.             }
  17.             .wall
  18.             {
  19.                 width:660px;
  20.                 height:500px;
  21.                 margin: 20px;
  22.                 background-color:#ffffff;
  23.                 border: 1px #000 solid;
  24.             }
  25.             .row{
  26.                 padding:10px 20px;
  27.  
  28.             }
  29.             .row:nth-child(odd)
  30.             {
  31.                 background-color:red;
  32.  
  33.             }
  34.             .row:nth-child(even)
  35.             {
  36.                 background-color:yellow;   
  37.             }
  38.             .date{
  39.                 float:left;
  40.             }
  41.             .mess{
  42.                 display:inline-block;
  43.                 margin-left:20px;
  44.             }
  45.             .message
  46.             {
  47.                 width:560px;
  48.                 height:30px;
  49.                 float:left;
  50.                 border:1px #000 solid;
  51.                 padding-left:3px;
  52.             }
  53.  
  54.             .submit
  55.             {
  56.                 display:inline-block;
  57.                 height:30px;
  58.                 border:1px #000 solid;
  59.                 cursor:pointer;
  60.                 width:80px;
  61.                 margin-left:20px;
  62.                 background-color:#707070;
  63.             }
  64.             .action{
  65.                 width:660px;
  66.                 margin:20px;
  67.             }
  68.     </style>
  69.  
  70.         <div>
  71.             <div class="chat">
  72.                 <div class="wall">
  73.  
  74.                 </div>
  75.  
  76.                 <div class="action">
  77.                     <form class="form" method="post">
  78.                         <input class="message" name="message" type="text"/>
  79.                         <input class="submit "type="submit"/>
  80.                     </form>
  81.                 </div>
  82.  
  83.             </div>
  84.         </div>
  85.         <script>
  86.             $(document).ready(function(){
  87.                 $('.form').submit(function(){
  88.                     var message = $('.message').val();
  89.                     $.ajax({
  90.                         type:       'POST',
  91.                         url:        'sendmessage.php',
  92.                         dataType:   'json',
  93.                         data: {
  94.                             body: message,
  95.                         },
  96.                         success:function(json){
  97.                             //alert('pipka');
  98.                             for(i=0; i<json.length; i++)
  99.                             {
  100.                                 $('.wall').append('<div class="row"><div class="date">'
  101.                                 +json[i]['date']+
  102.                                 '</div><div class="mess">'+json[i]['body']+'</div></div>');
  103.  
  104.  
  105.                             }
  106.                         },
  107.                         error: function() {
  108.                             alert('wystąpił błąd :)');
  109.                         }
  110.                     });
  111.                    return false;
  112.                 });
  113.             });
  114.  
  115.  
  116.         </script>
  117.     </body>
  118. </html>
[PHP] pobierz, plaintext

sendmessage.php
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. /**
  4.  * @author 
  5.  * @copyright 2013
  6.  */
  7. //var_dump($_POST);
  8. try{
  9.     $pdo = new PDO('mysql:host=localhost;dbname=chat', 'root', '');
  10.     $pdo -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  11.  
  12.     $stmt = $pdo->prepare('INSERT INTO messages(body) VALUES(:body)');
  13.     $stmt->bindValue(':body', $_POST['body'],PDO::PARAM_STR);
  14.     $stmt->execute();
  15.  
  16.     $stmt = $pdo->prepare('SELECT * FROM messages LIMIT 50;');
  17.     $stmt->execute();
  18.     $messages=$stmt->fetchAll();
  19.     $stmt->closeCursor();
  20.  
  21.  
  22.  
  23. } catch(PDOException $e)
  24. {
  25.     echo 'Brak polaczenia '. $e->getMessage();
  26.  
  27. }
  28.  
  29. echo json_encode($messages);
  30.  
  31. ?>
[PHP] pobierz, plaintext
gorden
9.06.2013, 21:06:17
1. linijka 18 Twojego kodu. Pobierasz wszystkie wiadomości od nowa, a potem wysyłasz do clienta. Zrób tak, że np. przy ładowaniu strony będzie się pobierać do zmiennej id ostatnio wysłanej wiadomości, wysyłaj je z intervalem, pobieraj zapytaniem id większe od tego w przesłanej zmiennej a następnie jedynie wiadomości, które dojdą w callbacku (patrzy punkt 2). po odebraniu danych z serwera aktualizuj zmienną o najnowsze id.
2. Zrób Interval, który sprawdza, czy nie ma nowych wiadomości. I niech nie odświeża strony, tylko dodaje nową wiadomość dynamicznie (w końcu po to robi się czaty w oparciu o ajax).
pabito
9.06.2013, 21:16:49
aha, czyli funkcja pobierająca wiadomości ma wykonywać się sama co jakiś czas, zamiast wykonywać się po wciśnięciu 'submit'

a jak zrobić żeby była automatycznie wywoływana co np. sekundę ? a czy nie obciąży to serwera gdy będzie tak często wywoływana ?
dżozef
9.06.2013, 23:30:46
no to zrób co 10 sekund, i tak rozmówcy tego nie zauważą
!*!
10.06.2013, 07:50:33
Cytat(pabito @ 9.06.2013, 22:16:49 ) *
a czy nie obciąży to serwera gdy będzie tak często wywoływana ?

Ajaxa w takiej formie, nie używa się do budowy czatu. Jak już musisz, to zainteresuj się longpolling, lub co będzie bardziej poprawne, websockets.
pabito
10.06.2013, 08:08:29
Cytat(!*! @ 10.06.2013, 08:50:33 ) *
Ajaxa w takiej formie, nie używa się do budowy czatu. Jak już musisz, to zainteresuj się longpolling, lub co będzie bardziej poprawne, websockets.


nawet jeśli jest to bardziej prosty shoutbox niż czat ?
!*!
10.06.2013, 09:27:43
Dla małego ruchu, tak. Jednak po co odświeżać stronę co sekundę/dziesięć jak można to zrobić tylko wtedy, gdy jest to konieczne.
SmokAnalog
10.06.2013, 09:50:06
Cytat(dżozef @ 10.06.2013, 00:30:46 ) *
no to zrób co 10 sekund, i tak rozmówcy tego nie zauważą

Czat odświeżający się co 10 sekund? Ja bym się na takim na pewno nie udzielał wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.