Установка скрипта «Моментальные уведомления»

Введение


Как сделать сайт ещё более динамичным?

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

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

Особенности:
  • для работы чата используется сторонний сервис (не относящийся к системе «uCoz»),
  • требуется подключение «PHP» и «uAPI».

Первый шаг: активация uAPI и PHP


Этап 1. Активация uAPI для модуля "пользователи"

Войдите в Панель управления » Пользователи » Настройки модуля и напротив пункта «Включить uAPI для модуля» установите галочку, затем прокрутите страницу вниз и сохраните изменения.


Этап 2. Получение токен-доступов для uAPI

Перейдите на страницу http://uapi.ucoz.com/uapi_panel, авторизуйтесь под своим uID-профилем.

После авторизации, Вы увидите интерфейс управления uAPI-приложений. Нам нужно создать приложение. Нажмите на «Создать» и заполните поля формы.
  • В пункте «Название приложения» можно написать свое название (абсолютно любое);
  • В пункте «Consumer key» введите любой набор латинских букв, как например: hFFSJjknfsdgF87T, рекомендуем сгенерировать;
  • В пункте «Consumer secret» оставляем всё как есть;
  • В пункте «Redirect URL» введите ссылку на свой сайт (куда собираетесь подключить скрипт);
  • Нажмите на Сохранить.


Этап 3. Создание токенов

Перейдите на страницу http://api.ucoz.net/ru/join/reg, выберите «Полуавтоматом». Далее Вам предложат ввести данные – их Вы можете взять со страницы http://uapi.ucoz.com/uapi_panel. Заполните поля, продолжайте следовать инструкциям системы. В результате Вы должны получить токены. Пошаговая иллюстрация:








Этап 4. Настройка

Токены получены. Зайдите в папку «talkers», которая находится в архиве со скриптом, найдите в нём файл uAPImodule.php и откройте его в любом текстовом редакторе. Затем укажите в этом файле данные ключей, которые Вы только что получили.


Активация PHP

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

Второй шаг: загрузка скриптов на FTP PHP


Этап 1. Установка пароля

Если у Вас задан пароль к FTP PHP, сразу же переходите к следующему этапу.

Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP детали».
В открывшемся окне кликните на ссылку: «Пароль не установлен».
Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:

  • Сервер: s2000.ucoz.net
  • Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
  • Пароль: пароль который Вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «Быстрое соединение».


Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения Вы увидите каталог под именем «scripts» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.

Теперь загрузите в этот каталог папку «talkers» из архива в которой содержатся скрипты «uAPImodule.php», «tIOaction.php», «tIOuser.php» и «usock.php». Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
Узнать статус передачи файлов Вы можете в окне статуса, которое находится в нижней части программы, в нём отображается список файлов ожидающих передачи, список файлов которые не удалось передать и переданные файлы.

Внимание! Прежде чем загружать файл «tIOaction.php» на FTP PHP необходимо открыть его любым текстовым редактором и указать данные для переменных «$id», «$key», «$origin», которые можно взять из приложения, создание которого описано в следующем шаге.

Третий шаг: регистрация WebSocket-приложения


Этап 1. регистрация на сервере чатов

Зайдите на https://talkers.club и авторизируйтесь на сайте любым из удобных Вам способов.

Вы можете авторизироваться с помощью uID, социальных сетей, либо создать новый аккаунт нажав на кнопку "Регистрация".

Если Вы создаёте новый аккаунт, то после регистрации Вам необходимо подтвердить свой электронный адрес и авторизироваться.

Письмо с ссылкой для подтверждения электронного адреса будет отправлено системой автоматически и придёт в течении пары минут. Если письмо не пришло - проверьте папку "спам" в Вашей почте.

Этап 2. создание приложения


После авторизации и подтверждения электронного адреса нажмите кнопку «Разработчику» на главной странице.
На открывшейся странице нажмите кнопку «создать приложение».

В открывшей форме заполните поля «Название» и «Домен», после чего нажмите кнопку «создать».

После создания приложения оно должно будет проверенно администрацией, после проверки — Вы получите email-уведомление, а на странице приложения появятся данные для подключения к сокету, которые необходимо указать в файле «tIOaction.php» и загрузить его на FTP PHP.

Четвёртый шаг: установка скриптов на страницы сайта


Этап 1. загрузка скриптов на сайт

Зайдите на своём сайте в Панель управления » Файловый менеджер.
Создайте папку «js» и загрузите скрипты, находящие в папке «скрипты» в архиве с инструкцией.

Если у Вас на сайте уже установлен скрипт для работы с «jQuery.cookie», то файл «jquery.cookie.js» загружать не нужно.

Этап 2. установка скриптов на страницы сайта

На все страницы сайта (рекомендуется делать это с помощью глобальных блоков) установите перед закрывающим тегом </body> следующий код: 
<script src="/js/jquery.cookie.js"></script>
<script src="/js/show_smess.js"></script>
<script>
var tio_host		= 'talkers.club';
var tio_server		= 8091;
var tio_userid		= <?if($PAGE_ID$=="pm")?>0<?else?><?if($USER_LOGGED_IN$)?>$USER_ID$<?else?>0<?endif?><?endif?>;
var tio_username	= '<?if($PAGE_ID$=="pm")?>none<?else?>$USERNAME$<?endif?>';
var tio_up		= '/php/';
var tio_ul		= <?if($PAGE_ID$=="pm")?>0<?else?><?if($USER_LOGGED_IN$)?>1<?else?>0<?endif?><?endif?>;
var tio_noty		= 1;
$.getScript('https://'+tio_host+'/js/app_socket.js');
</script>
В переменной «tio_server» нужно указать номер порта, который так же можно узнать на странице управления приложением.

Этап 3. настройка уведомлений

Вы можете отредактировать файл «show_smess.js» и изменить функции вывода уведомлений.
Следующие функции отвечают за появление уведомлений на странице: 
tio_np(d){...}		// личное сообщение
tio_nr(d){...}		// изменение репутации
tio_nb(d){...}		// изменение замечаний
tio_na(d){...}		// новая награда
Вы можете изменить их по своему усмотрению, например добавить воспроизведение звуков, либо выводить всплывающие уведомления.
По-умолчанию во всех уведомлениях срабатывает функция noty({...}), которая подгружается автоматически вместе с сокетом к Вашему сайту. Вы можете оставить стандартные уведомления, изменив их на свой вкус.

Этап 4. настройка уведомлений noty

Стандартная функция вызова уведомления имеет следующий вид: 
noty({
    layout: 		'top',						// способ вывода уведомления
    theme: 		'talkersTheme_one', 			
    type: 		'information',					// тип уведомления
    text: 		'Текст уведомления!', 				// содержание уведомления
    animation: 		{
				open:'animated rubberBand'		// анимация при выводе уведомления
			},
    timeout: 		false, 						// время, через которое уведомление будет автоматически скрыто
    closeWith: 		['click'] 					// закрывать уведомление при клике на нём
});

Возможные способы вывода (расположение) уведомления:
  • top
  • topCenter
  • topLeft
  • topRight
  • center
  • centerLeft
  • centerRight
  • bottom
  • bottomCenter
  • bottomLeft
  • bottomRight

Возможные типы уведомления:
  • information - синий цвет
  • error - красный цвет
  • warning - жёлтый цвет
  • notification - белый цвет
  • success - зелёный цвет

Для анимации вывода уведомлений служит файл «animate.css», подробную инструкцию по которому так же можно найти в интернете.
Возможные варианты анимации:
  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello


Установка завершена. Если у Вас возникли вопросы, которые не затрагивались в документации, Вы можете задать их в комментариях к скрипту.