Автоматическое обновление чата

Question

Так что я работаю над javascript/php chatbox. Все работает, за исключением обновления содержимого моего div (это работает один раз, но после этого он не обновляет его, когда новое сообщение было помещено в базу данных). Вот мой код:

Javascript часть:

<script language=javascript type='text/javascript'> 

     setInterval(function() { 

      var arrayOfObjects = <?print_r(getChatArray());?>; 
      var chat = ""; 

      for (var i = 0; i < arrayOfObjects.length; i++) { 
       var object = arrayOfObjects[i]; 

       chat += "["+object.date+"]"+object.op+": " + object.msg + "</br>"; 
      } 
      $('#chat').html(chat); 

     }, 10); 
    </script> 

Php часть:

<?php 
function getChatArray() { 
    $result = mysql_query("SELECT * FROM shouts ORDER BY id DESC"); 
    $to_encode = array(); 

    $count = mysql_num_rows($result); 
    $size = 0; 
     if($count > 0) { 
      while($row = mysql_fetch_assoc($result)) { 
       $to_encode[$size]['id'] = $row['id']; 
       $to_encode[$size]['msg'] = $row['msg']; 
       $to_encode[$size]['op'] = $row['op']; 
       $to_encode[$size]['date'] = $row['date']; 
       $size += 1; 
      } 

     } else { 
      return "None"; 
     } 

return json_encode($to_encode); 
} 
?> 

Любые идеи, почему это не постоянно обновлять его?

Спасибо.

Answer 1

Поскольку каждые 10 миллисекунд ваш JS анализирует исходное содержимое чата, вы не получаете никакого нового содержимого. Вам нужно будет выполнить вызов ajax, и я настоятельно рекомендую изменить этот setInterval на рекурсивный setTimeout с более реалистичной задержкой в ​​500 мс, чтобы вы не убивали клиента.

Вместо этого:

setInterval(function() { 

    var arrayOfObjects = <?print_r(getChatArray());?>; 
    ... 

Вы бы использовать что-то вроде этого:

(function updateChat(){ 

    var arrayOfObjects, 
     chat, 
     max, 
     _object, 
     i = 0; 

    $.ajax({ 
     url : '/getChatArray.php', // php echoes the json 
     success: function(arrayOfObjects){ 
      for (max = arrayOfObjects.length; i < max; i++) { 
       _object = arrayOfObjects[i]; 
       chat += "["+_object.date+"]"+_object.op+": " + _object.msg + "</br>"; 
      } 
      $('#chat').html(chat); 
      setTimeout(updateChat, 500); 
     } 
    }); 
}()); 

Очевидно, что вы бы заполнить этот АЯКС обработчик для ваших нужд, добавьте еще несколько Params как DATATYPE, и т.д., и некоторая обработка ошибок.

Answer 2

Содержимое вашей базы данных будет выводиться только на страницу при начальной навигации к ней. Этот код:

var arrayOfObjects = <?print_r(getChatArray());?>; 

только вывести содержимое getChatArray() возвращает 's, когда PHP обрабатывает страницу. Таким образом, сценарий может видеть только одно состояние возвращаемых функций во время рендеринга.

Для получения информации из вашей базы данных вам необходимо использовать AJAX.

Я предлагаю вам:

1. Создание PHP скрипт, который выводит данные в формате JSON
2. Использование jQuery, в частности функцию getJSON, чтобы получить выходные данные этого сценария в
3. Делайте то, что вы хотите сделать с это данные.