Работать с блокчейном Голос проще, чем вам кажется

Давно "заразился" идей создать лёгкий мини-клиент для голоса.
И вот, собравшись с мыслями и открыв PhpStorm, начал делать.
Честно сказать, не знал, как обращаться к API Golos, в этом помогли мне @tristamoff и @vik.
Наш клиент будет получать Новые записи в на Голосе.

Приступим.

Первым делом мы создаём js файл и установим соединение с WebSocket.

Весь код js я буду выполнять, после загрузки всех данных. Для этого весь код поместим в callback:

document.addEventListener("DOMContentLoaded", function(){
   ...
});

Подключаемся к ноде:

var ws = new WebSocket('wss://api.golos.cf');

Далее мы "открываем" новое соединение с ws голоса.

ws.onopen = function()  
{  
    ws.send(JSON.stringify({  
        id: 1, method: 'call', 'params': ["database_api","set_block_applied_callback", [0]]  
    }));
}

Мы в этой конструкции обращаемся к публичному API.
И получаем новые блоки с помощью set_block_applied_callback.
Подписавшись на получение новых блоков от голоса, мы должны их обработать.

Получать блоки мы будем с помощью конструкции ws.onmessage.

ws.onmessage = function(raw)  
{  
    var data = JSON.parse(raw.data);  
    if(data.method === "notice" && data.params)  
    {  
        var hex = data.params[1][0].previous.slice(0, 8);  
        var height = parseInt(hex, 16);  
        ws.send(JSON.stringify({  
            id: 2,  
            method: 'call',  
            "params": ["database_api", "get_ops_in_block", [height, "false"]]  
        }))
    }
}

Как написано у @vik, чтобы получить номер блока мы должны его распарсить:

var data = JSON.parse(raw.data); 

Далее создадим условие if (если) которое поможет отфильтровать другие сообщения и работать только с теми, метод которых "notice" и в которых есть необходимые данные "data.params"

Далее получаем первые 8 символов, это и есть номер блока и переведём в 16-тиричную систему счисления:

var hex = data.params[1][0].previous.slice(0, 8);  
var height = parseInt(hex, 16);  

Получив номер блока, мы можем обработать его и получить необходимые данные.
Для этого мы вновь отправим в наш вебсокет запрос.
Но уже к методу get_ops_in_block - позволяющие получать операции блока.
Помните условие if(data.method === "notice" && data.params)? Вот давайте также проверим, если id сообщения сокету равно 2, то поработаем с ним.
else if(data.id === 2){ }
Так как операций в блоке может быть много, то проходим их циклом:

data.result.forEach(d => {})

Далее в цикле получим тип операции, нам нужен comment.

if(d.op[0]=='comment'){

Запишем в переменную данные из блока

var data_block = d.op[1];

Далее проверим, есть ли у записи parent_author, если нет, то это комментарий, и он пока не нужен.

if(data_block.parent_author != '') { }

Если в блоке был пост - добавим его на нашу страницу.

var blocks = document.getElementsByClassName('container-block')[0];

var n_div = document.createElement('div');  
n_div.className = 'block';  
metaData = JSON.parse(data_block.json_metadata);  
var im = '';  
if( typeof metaData.image != 'undefined' ){
    im = "<img src='"+metaData.image+"'/>";  
}  
n_div.innerHTML = "<a href='https://golos.io/@"+data_block.author+"/"+data_block.permlink+"'>" +  
   im+"<p>" \+ data_block.title  +"</p></a>";  
n_div.innerHTML += "<span class='author'><a href='https://golos.io/@"+data_block.author+"'>@"+data_block.author+"</a></span>"  
blocks.appendChild(n_div);

Запишем в переменную элемент div с классом container-block. Далее создадим новый элемент div с классом block, внутри которого будет ссылка на пост и ссылка на автора.

metaData = JSON.parse(data_block.json_metadata);

Распарсим JSON-данные блока json_metadata, чтобы получить потом путь к фото и проверим её наличие

if( typeof metaData.image != 'undefined' ){
    im = "<img src='"+metaData.image+"'/>";  
} 

Проект расположен по ссылке chemnote.ru

И чтобы было более понятно, выложу листинг шаблона и js скрипта

Материал подготовлен автором @zheev