Как привязать javascript функцию на стороне клиента к событию на стороне сервера?

Question

[MaxPa]

Прошу прощения за расплывчатый вопрос, но в этом и проблема, что не могу его четко сформулировать для поиска в Google или Stackoverflow
Есть желание написать страничку (HTML+JavaScript) которая бы реагировала на события происходящие на сервере. Знаю что есть ReackJS и подобные ему frameworks которые "из коробки" предоставляют подобную функциональность, но хотелось бы найти пример на чистом JavaScript у клиента и PHP на сервере.
Как называется такая технология, какие запросы писать в Google?
Самое простое, что приходит в голову - это циклический процесс на стороне клиента с AJAX запросом к серверу. Но он влечет за собой быстрый расход батарейки на мобильном устройстве и дополнительный (оплачиваемый) трафик в случае мобильного интернета, плюс пустая загрузка сервера.
А может быть "длинный путь" (изучить, установить, применить framework a-la ReackJS) будет короче чем искать/изобретать "простой" велосипед?
Спасибо.

Answer 1

[littleguga]

Скорее всего Вам нужны сокеты. Например, socket.io

Answer 2

[VanKrock]

Сокеты для новых браузеров и long polling для старых. Искать нужно по ключу real time

Answer 3

[M K]

Почему все стремятся подключить кучу тяжеловесных фреймворков?
Используйте Server Side Events, они достаточно просты в реализации.
Почитать вот здесь:
learn.javascript.ru/server-sent-events
А вообще, лучше ознакомьтесь со всем разделом:
learn.javascript.ru/ajax

Comments

[MaxPa]

Спасибо, как раз нет никакого желания засирать сервер и голову дополнительными фреймворками, которые могут и не пригодиться. Поэтому и спрашиваю как "рыбку съесть и кости сдать". Пойду попробую ваш совет.

[MaxPa]

Здорово, пожалуй то что нужно. Постараюсь написать простенький пример и, если получится, отмечу ваш совет как самое оптимальное решение.

[MaxPa]

Поправьте меня, если я вру, но, как мне кажется, весь этот Server-Sent Events это "красивая обертка" для ajax запроса по таймеру. У этого объекта даже задержка регулируется. Нужно попробовать как часто этот EventSource("/events/subscribe") дергает сервер без надобности.

[MaxPa]

Проверил этот Server-Sent Events, нет в жизни сказок. Никакой это не Server-Sent Events, это простой Client-Pool Events по таймеру.

Answer 4

[Максим Тимофеев]

Вам надо обновлять данные? Без события в браузере? По таймеру? Тогда любая технология будет давать одинаковый эффект.
Могу посоветовать PJax - почитайте, но не уверен, что это именно то что надо. Приведите ходя бы пример того что хотите получить? Обновление данных по таймеру или что?

Answer 5

[MaxPa]

Спасибо. похоже socket.io это то что мне может помочь. Однако в первом же примере там сказано, что нужно установить NodeJS. Похоже без дополнительного framework-а не обойтись.

по поводу уточнений от Максима Тимофеева
Вам надо обновлять данные?на стороне клиента - ДА
Без события в браузере? - ДА
По таймеру? - Вот этого-то как раз и стараюсь избежать.
Приведите ходя бы пример - практически это chat room

пойду почитаю про PJax

Comments

[MaxPa]

Спасибо, но не то...
Если этот PJax базируется на ajax, то это не сервер что-то посылает клиенту, а клиент "втихаря" от пользователя бегает на сервер.

What is PJAX
PJAX (Push-state AJAX) is a performance optimization, allowing users to browse websites without the overhead of reloading assets such as CSS & images each time a web page is loaded.

PJAX works by using AJAX to "load" pages on behalf of the user, then dynamically swapping the contents of the "container" for the newly loaded content from the link the user clicked. Unlike older AJAX solution's PJAX fully preserves permalinks and back button functionality. Using progressive enhancement, PJAX will seamlessly fall back to loading pages in the normal way in older browsers, while newer browsers can make use of the improved performance.