Как правильно реализовать динамическое обновление контента на сайте?

Question

[Евгений Крамор]

Добрый вечер!
На сайте есть посты, которые я получаю из БД. Вся суть в том, что я реализовал получение контента следующим образом:
1. Пользователь добавляет запись.
2. Она сразу же появляется на сайте.
Действия выше я реализовал путём:

function showPopularPosts() {
                $.ajax({
                    type: 'post',
                    url: "/getpopularpost.php",
                    cache: false,
                    response: 'text',
                    success: function(html) {
                        $("#getPopularPosts").html(html);
                    }
                });
            }
     


        $(document).ready(function(){
            showPopularPosts();

            setInterval('showPopularPosts()',1000);
            
        });

Записи вытаскиваю из файла getpopularpost.php, но есть один нюанс: каждый пост содержит следующий функционал:
1. Мне нравится
2. Мне не нравится
3. Просмотры
3. В закладки
Реализовал функцию "Мне нравится" и вся беда в том, что из-за того что контент обновляется каждую секунду, "мне нравится" не работает, но если убрать функцию setInterval('showPopularPosts()',1000);, то всё работает, только чтобы увидеть пост, необходимо обновить страницу.

Подскажите, пожалуйста, каким образом получая контент я могу задействовать функцию "мне нравится".
В голову вообще ничего не лезет.

Answer 1

[Ernest Faizullin]

все не правильно

создаем сущность события (Event). Добавляем в базу допустим событие "Добавлен новый лайк" и через сокет слушаем эти события на бэкенде (socket.io, pusher.com или свой сервер)

на практике создаем модель Event + связи Event.User, Event.Project допустим. У каждого Event будет поле listener допустим 'click'. На клиенте добавляем listener для каждого события и если событие сработало пушим уведомление на бэкенд, на бэке обновлем базу и пушим уведомление на клиент типа сработало событие "Добавлен новый лайк" в браузере отображаем событие

Answer 2

[xmoonlight]

Меняйте не разметку, а свойства статической разметки.

Comments

[Евгений Крамор]

Не совсем понял, что Вы имели в виду.

[xmoonlight]

Евгений Крамор, значения между тегами, а не саму структуру DOM обновляйте...

[Евгений Крамор]

xmoonlight, понял, спасибо большое!

Answer 3

[Denis]

А в чем смысл функционала "мне нравится". По логике вещей своим аяксовым запросом, вы не только посты должны обновлять, а так же все динамические зависимости связанные с постами в том числе и мне нравится
UPD и секунда это реально мало, если на сайт придет человек 50 они вам сервак покладут

Comments

[Евгений Крамор]

Осознал свои ошибки и в целом пока что всё исправил.

Секунды действительно мало, но я выставил именно секунду, потому что на тот момент я динамический обновлял только посты, не учитывая других нюансов.

Спасибо!