Приветствую.
У меня есть простенький чат на 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.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как можно дописать недостающие числа в массив и в foreach определить что это число было дописано в массив?
Вопрос таков: есть такой класс (файл Networkh)
Visual Studio 2017 не видит заголовочные файлы Windowsh, WinSock2