Это продолжение моего поста: Кроссбраузерный клиент с мониторингом всех действий пользователей голоса. Создаем с помощью блокнота
Все делалось в блокноте notepad++ , не требуется стек c node.js или другое серверное ПО. Мы разбираем этот html: pastebin.com/b4GTFgge что бы сделать вот такую страницу vikx.tumblr.com
Если будете читать как урок - советую сделать html страницу со скриптом, которую я разместил на pastebin , просто откройте ее в браузере и при желании редактируйте.
Я буду приводить скриншоты кода в определенной последовательности, начиная не с первой строчки срипта, а с тех строчек, где начинаются основные функции. Начиная с самых важных в контексте данного скрипта и заканчивая косметическими.
В первую очередь - соединяемся с голосом и отправляем запрос
19 - 21 строчка это просто переменные в которые мы поместили координаты на html части страницы, что бы позднее вставлять в них динамические данные, которые мы получим от голоса.
22 строчка - это переменная, в которую мы сохраняем наш метод подключения к голосу, а именно вебсокеты.
Отвлечемся...
Вебсокеты - это отличная современная технология, если вы вебмастер средней руки и на вашем сайте динамический контент - вам обязательно нужно изучить их! Обычно я использую их для взаимодействия с nginx, но во фронтенде особое удовольствие получать данные через них.
https://ru.wikipedia.org/wiki/WebSocket
WebSocket разработан для воплощения в web-браузерах и web-серверах, но он может быть использован для любого клиентского или серверного приложения. Протокол WebSocket — это независимый протокол, основанный на протоколе TCP. Он делает возможным более тесное взаимодействие между браузером и web сайтом, способствуя распространению интерактивного содержимого и созданию приложений реального времени.
Telegram, vk, viber, skype, разнообразные чаты и фиды - моментальное получение сообщений без тяжелых запросов на них реализовано именно на вебсокет!
Возвращаемся к разбору скрипта
Основной доступ к нодам голоса по протоколу вебсокет происходит по адресу wss://ws.golos.io его и прописываем в переменной
socket = new WebSocket('wss://ws.golos.io'),
так как в скрипте будет отображаться наша текущая сила голоса, нам нужно так же и указать чья это наша: account = 'ВАШ ЮЗЕРНЭЙМ';
24 строчка это переменные, мы не заполняем их данными, но объявляем уже сейчас. Если этого не сделать, то позднее заполненная переменная сможет отдавать свое содержание только в рамках своей функции. Что бы переменная стала глобальной, нам необходимо объявить ее за пределами функции, затем мы сможем заполнить ее данными внутри функции и поскольку она была объявлена ранее - доступ к данным становится глобальным из любой функции. Объявляем переменные, которые мы произвольно назвали так: трансферы силы movementTotal, вся сила голоса silaTotal, последний блок в блокчейн голоса lastblock, начальный блок, с которого начнем отсчет блоков startblock
26 - 38 строка. Теперь опишем действия внутри функции connectGolos(); (большинство названий в скрипте произвольные и не влияют на механизм выполнения кода)
27 строка: socket.onopen = function(event) { что примерно звучит как"При открытие сокетов = функционировать (собирая данные события)".
28 строка. Тут у нас функция, внутри которой действие будет выполняться с интервалом
setInterval(function() {
а действие наше начинается как:
socket.send(JSON.stringify({
"послать на голос данные в формате JSON".
id: 1, method: 'get_dynamic_global_properties', 'params': []
метод - get_dynamic_global_properties
это наш основной запрос голосу на глобальные динамические значения базы данных. В этом значении базы будет номер текущего блока с активностью пользователей, его-то мы и хотим узнать.
35 строчка - мы закрываем функцию интервала со значением 3000 миллисекунд - 3 секунды, именно с таким интервалом генерируется каждый новый блок данных на голосе. Таким образом мы каждые три секунды просим голос сообщить нам о своих динамических данных в которых есть номер последнего блока. Закрываем скобки функций и запускаем connectGolos(), который будет запускать внутри себя запрос get_dynamic_global_properties каждые 3 секунды.
40 строка на скрине ниже, разбираем:
функция socket.onerror - будет выполнена при ошибке. Голос молодая платформа и ошибки на сервере случаются. Особенно часто - 502. Если такая ошибка случилась на этапе отправке запроса - то в ответ мы ничего не получим и наша страничка останется без данных. Это как-то не красиво :) А по этому мы сделаем вот что:
41 строчка. Мы вставляем в наш div текст ошибки. Так мы заботимся о пользователях, которые не дождались данных.
43 строчка. Поскольку мы пообещали пользователям переподключиться в случае ошибки - то так и сделаем повторно вызвав функцию connectColos. На 42 строчке у нас закомментированная // (- читайте отключенная) строчка с кодом 45 строчка. Объявляем переменной fixblock режим ВКЛ - значение true; Позднее расскажу зачем. 46 - 54 строчка - функция, которая отвечает за произвольный ввод номера блока пользователем. Называется функция 49 строчка - мы указываем в переменной нашу html форму ввода номера блока. 50 строчка записываем в переменную blocknum значение формы inputblock.value 51 строка. В переменную lastblock у нас упадет значение с формы ввода blocknum 52 строка fixblock = false; Переводим fixblock в состояние ВЫКЛ. Я все еще не рассказал зачем. Ожидайте :) 53 строчка - посылаем основной запрос на динамические данные - connectGolos(); У нас получилась функция searchBlock(), при вызове которой в переменную lastblock попадет значение с поля ввода id="blockexplorer". А вызывать функцию мы будем при нажатии пользователем кнопки рядом с формой. Функцию повесим на кнопку: 55 -58 строки у нас косметическая функция, которая заставит блоки появляться с анимацией. Мы присваиваем с задержкой 500мс html элементу класс anim, описав css свойства anim атрибутами translate3d. Честно говоря, всю косметику проще сделать на jquery, но не хотелось подключать его только ради анимаций. 59 строка на скрине ниже запускает содержимое функции при получении ответа на наши запросы 61 строка - объявляем переменные 62 строка - разбираем полученный JSON на объекты для простоты взаимодействия. Если вы имели опыт работы с JSON - вы можете просто сделать console.log(JSON.stringify(data.result)); и перейти к наблюдению потока данных из консоли браузера :) Продолжение будет еще интересней: Разбор и фильтрация данных блоков от голоса пожалуй самое сложное в этом уроке, мы получаем всю информацию о текущей активности пользователей, при этом вариантов комбинаций данных множество, по объему это должно быть темой отдельного поста. Вот так примерно выглядят ответы от голоса в jsonstream.insertAdjacentHTML('afterbegin','На сервере ноды произошла ошибка 502. Переподключение...</code>
setTimeout(location.reload(), 1000); - это перезагружает страницу через секунду. Метод грубый, потому мы его не используем, однако, он тоже будет работать если мы выберем его в качестве решения проблемы с временной недоступностью голоса по ошибке 502.searchBlock()input id="blockexplorer" type="number" name="quantity" min="1"button onClick="searchBlock()</code>
Скоро мы начнем получать ответы от голоса... Пока подытожим сделанное:
get_dynamic_global_propertiesПолучаем ответ от голоса!
get_dynamic_global_properties, внутри функции мы обработаем данные:
silaGolosa и powerMovement
Теперь мы можем видеть все что происходит или происходило на голосе!
С тех пор как "бизнес молодость" перешла в голос, в блоках стало много информации об участниках БМ, включая их стр соц. сетей. :)
В следующем посте мы разберем, отфильтруем и динамически будем располагать получаемые данные на нашей html странице.
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
Забрал в закладки, буду разбираться)_)
Тоже так сделал!)
Ага интесная статья. Я кстати тоже про апи буду писать пост. Постараюсь в понедельник сделать. Пока вот с ботами разбираюсь))
Вообще изи, 100 раз так делал) А так-то кровь из глаз :) Примерно, как общаться с пятью китайцами в раз, не зная китайского :)