Сообщение # 1 | 12:24:48 16 Сен 2015
Как сделать сайт ещё более динамичным?


Этот вопрос часто задают себе разработчики/владельцы/дизайнеры сайтов на uCoz.

Что делать если есть необходимость (или просто желание) оповещать пользователей о каких-либо изменениях на сайте? Динамично (в том числе без лишних действий самого пользователя) изменять содержимое страницы, добавлять новое, уведомлять о чём-либо, не дожидаясь пока пользователь перезагрузит страницу?

Казалось бы, что решение очевидное - создать при загрузке страницы ajax-запрос к скрипту, который будет проверять и искать обновления, и как только он их найдёт - выведет в браузер пользователя. Многие понимают что это большая нагрузка (особенно если посетителей на сайте очень много) и находят решение - не держать постоянный запрос к сайту в поисках обновлений/уведомлений, а просто делать запрос каждый несколько секунд (например раз в пять секунд с помощью setInterval()).

Вроде и всё что касается динамичности страницы без её перезагрузки. Или нет?

Многие из читающих ни разу не слышали, а кто-то слышал, но просто не знает до сих пор что это - о такой вещи как WebSockets.
Yandex и Википедия могут немного рассказать об этом - https://ru.wikipedia.org/wiki/WebSocket.

Для тех кому всё ещё не понятно - сокеты позволяют создать при загрузке страницы сайта соединение с сервером, которое практически не ощутимо в плане нагрузки (в отличии от массивного ajax-запроса, который несомненно создаёт нагрузку на ваш сайт).
При создании такого соединения ваш сайт и браузер пользователя "жмут друг другу руки" и остаются в режиме ожидания сообщений.

Всё что остаётся пользователю - отправить сообщение в сокет и это сообщение моментально (на сколько это возможно) получают все, кто также находится на страницах вашего сайта и подключен к этому же сокету. Учитывая что подобное соединение может работать одновременно с несколькими тысячами подключений - для разработчика это должно звучать заманчиво, не правада ли?

Как это поможет разработчику?
Например, на странице добавления новости установите скрипт, который после нажатия кнопки "Добавить материал", в случае, если материал успешно добавлен - будет отправлять в сокет данные о новом материале, указав его название и текст - все пользователи находящиеся на страницах сайта, на которых есть скрипт, обрабатывающий входящие сообщения - сразу же увидят новый материал, который вы красиво вставите в нужном месте.

Хотите увидеть как это работает?
Зайдите на тестовую страницу: http://keller.ucoz.com/index/0-2
Откройте эту страницу в нескольких браузерах, после чего в одной из вкладок добавьте новость (укажите тестовое название и текст материала, после чего нажмите "добавить"), в результате - ваша новость сразу будет отображена во всех ваших вкладках, БОЛЕЕ ТОГО, эту новость так же сразу увидят все, кто так же как и вы находитесь на этой странице, ровно как и вы увидите новости, добавленные другими пользователями.

Как начать использовать эту штуку у себя на сайтах?
Для настройки и работы с сокетами вам понадобится свой сервер.

Всё так красиво звучало, а теперь оказалось что нужно ещё и сервер покупать (пусть и не дорогой)?
Безусловно те, кто сможет администрировать сокет-сервер сам - может купить сервер, но для сайтов uCoz есть более удобное решение - сервис предоставляющий доступ к данному протоколу.
Всё, что нужно чтобы начать им пользоваться - это установка JS скрипта на страницы вашего сайта.

Для полноценного использования сокетов вам потребуется PHP + uAPI.


1. Создание приложения

Для создания приложения необходимо зарегистрироваться на сервисе, предоставляющем доступ к сокетам.
Заходим на https://talkers.club/, регистрируемся/авторизируемся удобным для вас способом.
После авторизации - переходим во вкладку "Разработчику".



На открывшейся странице нажимаете на кнопку создания приложения и указываете "Название" и "Адрес сайта" (описание можно оставить пустым).



2. Установка на сайт

После создания ваше приложение должно быть одобрено (проверяется в течении суток).

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

Код
</body>

вот такой скрипт

Код
<script>
var tio_host = 'talkers.club';
var tio_up = '/php/';
var tio_username = '$USERNAME$';
var tio_server = 8091;
var tio_userid = <?if($USER_LOGGED_IN$)?>$USER_ID$<?else?>0<?endif?>;
var tio_ul = 0;
function showMessage(d){
                   alert(''+
                    'd.act   - '+d.act+'\n'+
                    'd.data1  - '+d.data1+'\n'+
                    'd.data2  - '+d.data2+'\n'+
                    'd.data3  - '+d.data3+'\n'+
                    'd.data4  - '+d.data4+'\n'+
                    'd.data5  - '+d.data5+'\n'+
                    'd.data6  - '+d.data6+'\n'+
                    'd.data7  - '+d.data7+'\n'+
                    'd.data8  - '+d.data8+'\n'+
                    'd.data9  - '+d.data9+'\n'+
                    'd.data10  - '+d.data10+'\n'+
                    'd.data11  - '+d.data11+'\n'+
                    'd.data12  - '+d.data12+'\n'+
                    'd.data13  - '+d.data13+'\n'+
                    'd.data14  - '+d.data14+'\n'+
                    'd.data15  - '+d.data15+'\n'+
                    'd.data16  - '+d.data16+'\n'+
                    'd.data17  - '+d.data17+'\n'+
                    'd.data18  - '+d.data18+'\n'+
                    'd.data19  - '+d.data19+'\n'+
                    'd.data20  - '+d.data20+'\n'+
                   '');
}
$.getScript('https://'+tio_host+'/js/app_socket.js');
</script>

Где вместо 8091 нужно указать номер сервера, который можно узнать в настройках вашего приложения.

Чтобы проверить правильность установки скрипта установите на любую страницу вот такую ссылку:

Код
<a href="javascript:sendsmess(1, '', '', '', '', '', '', '', '', '', '', '', 'Привет', '', '', '', '', '', '', '', '', '')">НАЖМИ МЕНЯ</a>

После чего откройте страницу со ссылкой в одном браузере, а любую другую страницу сайта (где установлен скрипт для работы с сокетом) в другом браузере.
Нажмите на ссылку и в обоих вкладках появится всплывающее окошко, в котором указаны передаваемые данные (в данном случае в переменной d.data11 будет указано слово "Привет").

Далее всё что вам нужно - используя функцию showMessage(d) и данные, которые она передаёт - писать свой скрипт, который будет обрабатывать все входящие сообщения.
Прикрепления: 6175240.png (176.8 Kb) · 7199615.png (66.5 Kb)
Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©