Подключаемся к ноде wss://ws.golos.io через блокнот. Подробный разбор JavaScript, общение с API golos.io, + бонус - данные аккаунтов БМ )

Это продолжение моего поста: Кроссбраузерный клиент с мониторингом всех действий пользователей голоса. Создаем с помощью блокнота

Все делалось в блокноте 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 текст ошибки. Так мы заботимся о пользователях, которые не дождались данных.

stream.insertAdjacentHTML('afterbegin','На сервере ноды произошла ошибка 502. Переподключение...</code>

43 строчка. Поскольку мы пообещали пользователям переподключиться в случае ошибки - то так и сделаем повторно вызвав функцию connectColos. На 42 строчке у нас закомментированная // (- читайте отключенная) строчка с кодом setTimeout(location.reload(), 1000); - это перезагружает страницу через секунду. Метод грубый, потому мы его не используем, однако, он тоже будет работать если мы выберем его в качестве решения проблемы с временной недоступностью голоса по ошибке 502.

45 строчка. Объявляем переменной fixblock режим ВКЛ - значение true; Позднее расскажу зачем.

46 - 54 строчка - функция, которая отвечает за произвольный ввод номера блока пользователем. Называется функция searchBlock()

49 строчка - мы указываем в переменной нашу html форму ввода номера блока.

input id="blockexplorer" type="number" name="quantity" min="1"

50 строчка записываем в переменную blocknum значение формы inputblock.value

51 строка. В переменную lastblock у нас упадет значение с формы ввода blocknum

52 строка fixblock = false; Переводим fixblock в состояние ВЫКЛ. Я все еще не рассказал зачем. Ожидайте :)

53 строчка - посылаем основной запрос на динамические данные - connectGolos();

У нас получилась функция searchBlock(), при вызове которой в переменную lastblock попадет значение с поля ввода id="blockexplorer". А вызывать функцию мы будем при нажатии пользователем кнопки рядом с формой. Функцию повесим на кнопку:

button onClick="searchBlock()</code>

55 -58 строки у нас косметическая функция, которая заставит блоки появляться с анимацией. Мы присваиваем с задержкой 500мс html элементу класс anim, описав css свойства anim атрибутами translate3d. Честно говоря, всю косметику проще сделать на jquery, но не хотелось подключать его только ради анимаций.

Скоро мы начнем получать ответы от голоса... Пока подытожим сделанное:

• Указали ряд переменных и функций назначение которых будет понятно позднее
• Создали функцию которая посылает каждые 3 секунды запрос к базе данных, а именно запрашивает get_dynamic_global_properties
• Создали функцию, которая при ошибке отправки запроса нас переподключит к сокетам

Получаем ответ от голоса!

59 строка на скрине ниже запускает содержимое функции при получении ответа на наши запросы get_dynamic_global_properties, внутри функции мы обработаем данные:

61 строка - объявляем переменные silaGolosa и powerMovement

62 строка - разбираем полученный JSON на объекты для простоты взаимодействия.

Теперь мы можем видеть все что происходит или происходило на голосе!

Если вы имели опыт работы с JSON - вы можете просто сделать console.log(JSON.stringify(data.result)); и перейти к наблюдению потока данных из консоли браузера :)

Продолжение будет еще интересней:

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

Вот так примерно выглядят ответы от голоса в json

С тех пор как "бизнес молодость" перешла в голос, в блоках стало много информации об участниках БМ, включая их стр соц. сетей. :)

В следующем посте мы разберем, отфильтруем и динамически будем располагать получаемые данные на нашей html странице.