Подключаемся к ноде 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.