Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP]Prosty czat z wykorzystaniem PHP/MySQL/AJAX
pabito
post
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)
(IMG:http://img28.imageshack.us/img28/3983/47617957.png)

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
 
 Start new topic
Odpowiedzi
gorden
post
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

Posty w temacie
- pabito   [PHP]Prosty czat z wykorzystaniem PHP/MySQL/AJAX   9.06.2013, 20:59:15
- - gorden   1. linijka 18 Twojego kodu. Pobierasz wszystkie wi...   9.06.2013, 21:06:17
- - pabito   aha, czyli funkcja pobierająca wiadomości ma wykon...   9.06.2013, 21:16:49
|- - !*!   Cytat(pabito @ 9.06.2013, 22:16:49 ) ...   10.06.2013, 07:50:33
|- - pabito   Cytat(!*! @ 10.06.2013, 08:50...   10.06.2013, 08:08:29
- - dżozef   no to zrób co 10 sekund, i tak rozmówcy tego nie z...   9.06.2013, 23:30:46
|- - SmokAnalog   Cytat(dżozef @ 10.06.2013, 00:30:46 )...   10.06.2013, 09:50:06
- - !*!   Dla małego ruchu, tak. Jednak po co odświeżać stro...   10.06.2013, 09:27:43

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 29.12.2025 - 12:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn