Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP]Prosty czat z wykorzystaniem PHP/MySQL/AJAX
pabito
post 9.06.2013, 20:59:15
Post #1





Grupa: Zarejestrowani
Postów: 77
Pomógł: 4
Dołączył: 14.05.2013

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
gorden
post 9.06.2013, 21:06:17
Post #2





Grupa: Zarejestrowani
Postów: 486
Pomógł: 101
Dołączył: 27.06.2010

Ostrzeżenie: (0%)
-----

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).
Go to the top of the page
+Quote Post
pabito
post 9.06.2013, 21:16:49
Post #3





Grupa: Zarejestrowani
Postów: 77
Pomógł: 4
Dołączył: 14.05.2013

Ostrzeżenie: (0%)
-----

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 ?
Go to the top of the page
+Quote Post
dżozef
post 9.06.2013, 23:30:46
Post #4





Grupa: Zarejestrowani
Postów: 125
Pomógł: 9
Dołączył: 25.05.2013

Ostrzeżenie: (0%)
-----

no to zrób co 10 sekund, i tak rozmówcy tego nie zauważą


--------------------
DomainAgent - Sprytne narzędzie do trzymania domen w ryzach
Go to the top of the page
+Quote Post
!*!
post 10.06.2013, 07:50:33
Post #5





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

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.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
pabito
post 10.06.2013, 08:08:29
Post #6





Grupa: Zarejestrowani
Postów: 77
Pomógł: 4
Dołączył: 14.05.2013

Ostrzeżenie: (0%)
-----

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 ?
Go to the top of the page
+Quote Post
!*!
post 10.06.2013, 09:27:43
Post #7





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

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.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
SmokAnalog
post 10.06.2013, 09:50:06
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 3.05.2025 - 04:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn