Как запретить дубли своих сообщений в чате подгружающим текст из базы с помощью JS?

Question

В чате при публикации сообщения оно через раз тут же дублируется, при обновлении страницы дубль исчезает.

Видимо это происходит из-за функции которая отрисовывает сообщение сразу в чат для написавшего пользователя и срабатываемой параллельной функции обновления чата setInterval(updatePosts, 150).

Мой код:

var last_message_id, load_message = function(s, e, a) {
    return "<li class='chat-left'><div class='chat-avatar'><img src='/engine/modules/images/UserIcon.png'><div class='chat-name'>" + (e = e.replace(/</g, "&lt;").replace(/>/g, "&gt;")) + " <span class='bootstrap-themes-icon-check-circle' title='Online'></span></div></div><div class='chat-text'>" + (s = s.replace(/</g, "&lt;").replace(/>/g, "&gt;")) + "</div><div class='chat-hour'>08:55</div></li>"
},
load_self_message = function(s, e) {
    return "<li class='chat-right'><div class='chat-hour'>08:55</div><div class='chat-text'>" + (s = s.replace(/</g, "&lt;").replace(/>/g, "&gt;")) + "</div><div class='chat-avatar'><img src='/engine/modules/images/UserIcon.png'><div class='chat-name'>" + (e = e.replace(/</g, "&lt;").replace(/>/g, "&gt;")) + " <span class='bootstrap-themes-icon-check-circle' title='Online'></span></div></div></li>"
};

if (typeof ub_id !== 'undefined') {
function updatePosts() {
    $.post(dle_root + "engine/modules/ajaxLoad.php", {
        ub_id: ub_id
    }, function(s) {
        var e;
        JSON.parse(s).forEach(function(s) {
            Number(s.id) > Number(last_message_id) && (session_user == s.username ? $("#messages-wrapping").append(load_self_message(s.message, s.username)) : $("#messages-wrapping").append(load_message(s.message, s.username))), e = s.id //отрисовывать сообщения только в случае,если они новые.
        }), last_message_id = e
    })
}
}

function sendPost() {
var s;
"" != $('[name="message"]').val().trim() ? (s = $('[name="message"]').val(), $.post(dle_root + "engine/modules/ajaxPost.php", {
    text: s,
    name: name,
    author: session_user,
    ub_id: ub_id
}), $("#messages-wrapping").append(load_self_message($('[name="message"]').val(), session_user)), //добавление нового сообщения на страницу
    $('[name="message"]').val(""), last_message_id++) : $('[name="message"]').val("")
}

if (typeof ub_id !== 'undefined') {
$(document).ready(function() {
    $.post(dle_root + "engine/modules/ajaxLoad.php", {
        ub_id: ub_id
    }, function(s) {
        JSON.parse(s).forEach(function(s) {
            session_user == s.username ? $("#messages-wrapping").append(load_self_message(s.message, s.username)) : $("#messages-wrapping").append(load_message(s.message, s.username)), last_message_id = s.id
        })
    })
})
}
setInterval(updatePosts, 150)

Если отредактировать строку

$("#messages-wrapping").append(load_self_message($('[name="message"]').val(), session_user)), //добавление нового сообщения на страницу

и добавить в val() две кавычки (val("")), то дубли пропадают, в консоли появляется сообщение об ошибке Uncaught TypeError: s.replace is not a function

Казалось бы проблема решена, но при написании первого сообщения в чат, в чате оно не отображается.

Только при обновлении страницы сообщение появляется в чате и далее сообщения отображаются по море написания новых без необходимости обновлять страницу.

Похоже строку

 $("#messages-wrapping").append(load_self_message($('[name="message"]').val(), session_user)), //добавление нового сообщения на страницу

можно вообще удалить и тогда сообщения в чате будут появляться благодаря setInterval(updatePosts, 150), но как заставить отображаться первое сообщение в чате без перезагрузки страницы? Почему оно не появляется, когда все следующие появляются?

Помогите разобраться и решить проблему.

Answer 1

Я вот читаю ваш код и пытаюсь понять. Почему у вас last_message_id генерируется на клиенте и отправляется на пост. Что будет в случае 2 пользователя чата начали разговаривать.

Вот мв имеем чат когда отобразился по 9 сообщений у каждого. Каждый начал вводить и отправлять текст. Каждому назначили last_message_id++, стало 10. Отправили и что должно получиться по вашей логике.

а val() и val("") это все различные функции; один из них getter второй setter. val("") установит пустую строку которую естественно ваш код не добавит.

Update

Для начала я бы рекомендовал вам отрисовывать все сообщения с самого начала всегда.

            var json_array = JSON.parse(data);//конвертация полученной строки в js массив для последующей работы с ним.
            $('#messages-wrapping').empty(); // очищяем разговор

            json_array.forEach(function(message)//перебор всех сообщений и их отрисовка.
            {
                if(session_user==message['username'])//если сообщение отправлено самим пользователем,то отрисовка справа.
                {
                    $('#messages-wrapping').append(load_self_message(message['message'],message['username']));
                }
                else 
                {
                    $('#messages-wrapping').append(load_message(message['message'],message['username']));//если это сообщение от других пользователей,то слева.
                }                   
            });

Вопрос оптимизации должен быть следующим. Сохраняйте массив сообщений в переменную. Затем при получении нового массива добавляйте недостающие и обновляйте имеющийся. То есть источником обновления сообщений должен быть один.

БЛОГ НА HUSL

Как запретить дубли своих сообщений в чате подгружающим текст из базы с помощью JS?

Ответы (1 шт):