Приветствую.
У меня есть простенький чат на ajax. Когда я ввел ник и сообщение - нажимаю кнопку отправить и значения добавляются в нужную таблицу, нужные поля и т.д. и это все происходит без перезагрузки страницы.
Но в чем же моя проблема?
Проблема в том, что ajax работает только на "одной" стороне постоянно, то есть на моей.
Приведу пример: открыл 2 браузера, зашел на нужную страничку.
С 1 браузера я отправил такие сообщения (ник и сообщение через пробел, следующее сообщение через запятую): 1 1, 2 2, 3 3. То есть 3 сообщения. Все отлично, ajax работает, в БД добавляет, все без перезагрузки, красиво и быстро.
Но вот 2 браузер ничего не отображает. Пока чисто. Я отправил такие сообщения так же, как и в предыдущем примере: 4 4, 5 5, 6 6. Все также хорошо работает, но вижу я только 3 последних сообщения, отправленных с этого браузера.
Если же перезагрузить страничку, отобразятся все сообщения: 1 1, 2 2, 3 3, 4 4 и т.д. по порядку, как должно быть.
Вопрос: как сделать так, чтобы какой-то ajax-запрос или скрипт или что-то на подобии этого все время "слушало" изменения??? То есть если отправил с 1 браузера сообщение - оно тут же отобразилось и во втором. Как так сделать?
Код:
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var time;
var MyDate = new Date();
var MyDateString;
MyDate.setDate(MyDate.getDate() + 20);
MyDateString = ('0' + MyDate.getDate()).slice(-2) + '.' + ('0' + (MyDate.getMonth()+1)).slice(-2) + '.' + MyDate.getFullYear();
time = hours + ":" + minutes;
$(function() {
$("#send").click(function(){
if ($("#author").val() != ""){
var author = $("#author").val() + ", " + MyDateString + ", " + time;
}
var message = $("#message").val();
$.ajax({
type: "POST",
url: "sendMessage.php",
data: {"author": author, "message": message, },
cache: false,
success: function(response){
var messageResp = new Array('Message not sent','Message not sent, DB error',' You can not send blank messages');
var resultStat = messageResp[Number(response)];
if(response == 0){
$("#author").val("");
$("#message").val("");
$("#commentBlock").prepend("<table style='width: 100%; border-radius: 5px; box-shadow: 0px 0px 4px 0px #ccc;'><tr><td width='50px;' style='padding:5px;'> <img src='ava.jpg' width='50px' style='border-radius:50px;'> </td><td style='padding:5px;'> "+author+" </td></tr><tr><td colspan='2' style='padding:5px; padding-bottom:0; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;'> "+message+" </td> </tr></table><br><br>");
}
$("#resp").text(resultStat).show().delay(1500).fadeOut(800);
}
});
return false;
});
});
<div id="commentBlock">
<?php
$result = mysql_query("SELECT * FROM `messages` ORDER BY `id` DESC",$db);
$comment = mysql_fetch_array($result);
do{
if ($comment != ""){
echo "
<table style='width: 100%; border-radius: 5px; box-shadow: 0px 0px 4px 0px #ccc;'>
<tr>
<td width='50px;' style='padding:5px;'> <img src='ava.jpg' width='50px' style='border-radius:50px;'> </td>
<td style='padding:5px;'> ".$comment['author']." </td>
</tr>
<tr>
<td colspan='2' style='padding:5px; padding-bottom:0; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;'> ".$comment['message']." </td>
</tr>
</table>
<br>
<br>
";
}
} while ($comment = mysql_fetch_array($result));
?>
</div>
<!-- sendMessage.php: -->
<?php
include("connect.php");
header("Content-type: text/html; charset=utf-8");
if(empty($_POST['js'])){
if($_POST['message'] != '' && $_POST['author'] != ''){
$author = @iconv("UTF-8", "UTF-8", $_POST['author']);
$author = addslashes($author);
$author = htmlspecialchars($author);
$author = stripslashes($author);
$author = mysql_real_escape_string($author);
$message = @iconv("UTF-8", "UTF-8", $_POST['message']);
$message = addslashes($message);
$message = htmlspecialchars($message);
$message = stripslashes($message);
$message = mysql_real_escape_string($message);
$result = mysql_query("INSERT INTO `messages` (`author`, `message`) VALUES ('$author', '$message')");
if($result == true){
echo 0;
}else{
echo 1;
}
}else{
echo 2;
}
}
if($_POST['js'] == 'no'){
if($_POST['message'] != '' && $_POST['author'] != ''){
$author = $_POST['author'];
$author = addslashes($author);
$author = htmlspecialchars($author);
$author = stripslashes($author);
$author = mysql_real_escape_string($author);
$message = $_POST['message'];
$message = addslashes($message);
$message = htmlspecialchars($message);
$message = stripslashes($message);
$message = mysql_real_escape_string($message);
$result = mysql_query("INSERT INTO `messages` (`author`, `message`) VALUES ('$author', '$message')");
if($result == true){
echo "Your message has been successfully sent";
}else{
echo "Message not sent, DB erro";
}
}else{
echo "You can not send blank messages";
}
}
?>
Попробуйте гениальные вебсокеты и забудьте про аякс. В данном варианте его в нынешнее время не используют для чата.
Вебсокеты позволяют из сервера уведомить браузер.
Только на php делать вебсокеты-это геморой
Во первых, текущая проблема довольна очевидно. Вы никаким образом не получаете новые сообщения, отправленные другими пользователя. Т.е. Ваш php код не присылает вам новые комменты через ajax.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей