Запрос на сервер с отложенным ответом

Допустим, есть одностраничный сайт, на котором размещена одна фотокарточка. Пользователь зашел на сайт и ничего не делает (не нажимает, не прокручивает колесиком). Через какое-то время на сайте появляется вторая картинка.

Вопрос: как сделать так, чтобы на странице появлялась вторая (третья и тд) фотокарточка, которую отправляет сервер, без явных запросов клиента ?

p.s. Если не совсем понятно, что имеется ввиду, то: когда, например, пользователю приходит сообщение в ВК, то у него отображается уведомление (при этом пользователь не обязан быть активным на сайте).


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

Автор решения: sandimagox

Разместить на странице JavaScript который будет держать соединение с сервером по WebSocket или например через каждые 5 секунд отправлять запрос на сервер. Сервер в очередном запросе может в заранее определённом параметре прислать к примеру src файла с javascript. На клиенте такая команда обрабатывается и в DOM дерево добавляется тег script с нужными атрибутами. Таким образом можно в страницу нужно дозагрузить нужную логику JavaScript, которой в изначальной версии страницы не было и которая может и которая может догрузить нужную логику в нужный момент.

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

Вот кусок кода, который как раз размещён в выше описанном проекте внутри Ajax колбека обрабатывающего ответ:

    if ((jobj.method != undefined) && (jobj.method != 'standard')) {
      if (jobj.method == 'loadJs' && (jobj.method.length > 2)) {
        var f = function () {this.parentNode.removeChild(this);}
        var a = document.createElement('script'); m = document.getElementsByTagName('script')[0];
        a.id = 'dynamicLoadJS'+Math.floor(Math.random()*99999);
        a.async = 1;
        a.onerror = f;a.onload = f;
        a.src = jobj.methodData;
        m.parentNode.insertBefore(a,m);
      }
    }
→ Ссылка