Ajax синхронизация на устройствах

263
27 августа 2017, 05:23

Приветствую.

У меня есть простенький чат на 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";  
	} 
} 
 
?>      	

Answer 1

Попробуйте гениальные вебсокеты и забудьте про аякс. В данном варианте его в нынешнее время не используют для чата.
Вебсокеты позволяют из сервера уведомить браузер. Только на php делать вебсокеты-это геморой

Answer 2

Во первых, текущая проблема довольна очевидно. Вы никаким образом не получаете новые сообщения, отправленные другими пользователя. Т.е. Ваш php код не присылает вам новые комменты через ajax.

READ ALSO
Дописать недостающие числа в массив и проверить в foreach

Дописать недостающие числа в массив и проверить в foreach

Как можно дописать недостающие числа в массив и в foreach определить что это число было дописано в массив?

272
Visual Studio 2017 не видит инклюды

Visual Studio 2017 не видит инклюды

Visual Studio 2017 не видит заголовочные файлы Windowsh, WinSock2

481