0

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

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

?>      	

1
  • Для чата также неплохо взять NodeJS
    – zuvladimir
    26 авг 2017 в 20:20

2 ответа 2

2

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

1
  • Так же советую автору вопроса присмотреться к centrifuge js. Все очень просто и удобно. 25 авг 2017 в 21:07
1

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

12
  • Как же сделать так, чтобы php-код присылал новые комментарии через ajax?
    – gmastrbit
    25 авг 2017 в 20:52
  • Вам нужно, что называется следить за ними. Например каждые 5 секунд посылать запрос на получение новых (или можно всех) комментов
    – Lapapa
    25 авг 2017 в 20:54
  • но лучше вебсокеты использовать для этих целей
    – Lapapa
    25 авг 2017 в 20:58
  • Это не серьезный проект, а просто "для души". Хм.. То есть просто каждые 5 секунд выполнять php-скрипт, который используется для выведения на страницу всех сообщений? А нагрузка на процессор не большая будет? Потому что я раз экспериментировал с циклом, сделал ошибку и цикл стал бесконечным. За пару десятков секунд использование процессора хоста 99%/100%.
    – gmastrbit
    25 авг 2017 в 21:07
  • давайте свой код, посмотрим
    – Lapapa
    25 авг 2017 в 21:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.