javascript AJAX-Чат как создать -- основные идеи

Наиболее простой чат можно сделать следующим образом:

  1. На стороне сервера только три обработчика:
    1. Отправка сообщения
    2. Удаление конкретного сообщения
    3. Отдача новых сообщений
  2. На странице (HTML) есть два принципиальные блока:
    • Форма отправки у тех кто может писать (или у всех)
    • Блок ленты сообщений -- сюда попадают сообщения по мере их создания
  3. Функция отправки сообщения не работает с лентой -- то есть не добавляет новый блок, возлагая эти обязанности на функцию получения новых сообщений, которая запускается каждый сколько-то секунд.
  4. Синхронизация сообщений

  5. Идея синхронизации проста -- все сообщения имеют timestamp (временную метку), первый после загрузки страницы лента загружается ajax-ом и не отправляет никакой временной метки -- а значит получает все сообщения, в ответ сервер указывает самую последнюю временную метку из тех сообщений. что он отдал.
  6. Скрипт фронта сравнивает временную метку пришедшую от сервера с той, что ему уже (если) известна, если пришедшая метка новее -- то сообщений из данного ответа сервера загружаются в ленту, а сама она становится текущей (последней самой новой известной ленте). Но на самом деле
  7. Таким образом, если на бэк передана при запросе новых сообщений метка, от он отдаёт только те сообщение, которые имеют метку не старше, чем переданная с фронта.
  8. Когда сервер определяет новые сообщения возможна ситуация, что по одной временной метке у него будут несколько сообщений - и не известно есть ли они в ленте (какие есть, а какие нет). На этот случай помимо временной метки используем ещё и список id сообщений, соответствующих последней временной метке -- этот параметр возвращется сервером, потом сохраняется на фронте, и передаётся с очередным запросом новых сообщений.

    А потому на стороне фронта надо сравнивать временные метки нестрого (>=) + проверять изменился или нет список пришедших от сервера last_id

Что ещё может пригодиться

Key Words for FKN + antitotal forum (CS VSU):