Когда я использую Pusher на тестовом примере, он работает отлично; все содержимое отображается в разных браузерах в режиме реального времени.
Однако, когда я помещаю один и тот же код в большое приложение LAMP Stack, это замедляет работу браузеров и в конечном итоге останавливает их. Браузеры сначала отображают медленно вращающийся серый кружок на вкладке, затем браузер не отвечает. Чем больше данных, тем медленнее становится браузер, поэтому, если я оставлю комментарий, это займет некоторое время, а затем пройдет. Если я опубликую изображение и комментарий, через go пройдет больше времени, затем браузер остановится. И, если я опубликую видео с комментарием, он не go до конца. В конце концов он замораживает мой P C.
Вот мой код на тестовом примере:
index. php
<!DOCTYPE html>
<body>
<form id="comment_form" class='input-group form-row' action="comment_add1.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<textarea name="comment" id="comment" class="form-control" placeholder="Enter Comment" rows="5" cols="70"></textarea>
</div>
<div class="input-group-prepend">
<input type="hidden" name="comment_id" id="comment_id" value="0" />
<input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Submit" form="comment_form" />
</div>
</form>
<div id="display_comment"></div>
<div id="comment_message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://js.pusher.com/5.1/pusher.min.js"></script>
<script>
$(document).ready(function(){
// Add comment
$(document).on('click change', '.submit', function() {
if ($(this).is('.submit')) {
$.ajax({
url:"comment_add1.php",
method:"POST",
data: new FormData(this),
contentType: false,
processData: false,
success:function(data)
{
if(data.error != '') {
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val(comment_id);
}
}
});
location.reload();
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
// Fetch comment
function load_comment(){
$.ajax({
url:"comment_fetch1.php",
method:"POST",
success:function(data){
$('#display_comment').html(data);
}
})
};
load_comment();
/*=======================================
= Pusher Frontend =
=======================================*/
var pusher = new Pusher(APP_KEY, {
cluster: 'us3',
forceTLS: true
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
load_comment(data);
});
/*===== End of Pusher Frontend ======*/
// End of (document).ready(function){}
});
</script>
</body>
</html>
comment_fetch. php
<code><?php
$connect = new PDO('mysql:host=localhost;dbname=db_testcase_pusher', 'root', '');
$query = "SELECT * FROM tbl_comment
ORDER BY comment_id DESC
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
$date = '';
$comment = '';
foreach($result as $row)
{
$output .= '
<div class="panel panel-default">
<div class="panel-heading" <i>'.$row["date"].'</i></div>
<div class="panel-body"><pre>'.$row["comment"].' '; } echo $ output; / * ============================== = Pusher Backend = ============== ================ * / require ('pusher_config. php'); требуют __DIR__. '/Vendor/autoload.php'; $ options = array ('cluster' => 'us3', 'useTLS' => true); $ pusher = new Pusher \ Pusher (APP_KEY, APP_SECRET, APP_ID, $ options); $ data = ''; $ pusher-> trigger ('my-channel', 'my-event', $ data); / * ===== Конец Pusher Backend ====== * /?>