@semechki
Я не фрилансер, просто пишу код для себя.

Как сделать ограничение на вывод WebSocket?

Доброй ночи!
Я недавно начала работать с websoket`ом и мне нужно знать как сделать ограничение по выводу в таблицу.
Вот код:
function convertTimestamp(timestamp) {
    var d = new Date(timestamp * 1000),
        yyyy = d.getFullYear(),
        mm = ('0' + (d.getMonth() + 1)).slice(-2),
        dd = ('0' + d.getDate()).slice(-2),
        hh = d.getHours(),
        h = hh,
        min = ('0' + d.getMinutes()).slice(-2),
        time;
    time = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min;
    return time;
}

var incomingOut = '';
var color = '';
var suspicion = '';

var socket = new WebSocket("ws://localhost:8080/ws");
socket.onopen = function() {
    console.log("Соединение установлено.");
};
socket.onerror = function(error) {
    console.log("Ошибка " + error.message);
};
socket.onmessage = function(event) {
    var data = JSON.parse(event.data);
    console.log(data);
    var blockslenght = data.blocks.length;
        for (var i = blockslenght-1 ; i >= 0; i--) {
            var transactionslenght = data.blocks[i].transactions.length;
            for (var t = transactionslenght-1; t >= 0; t--) {
                incomingOut += '<tr>';
                    incomingOut += '<td width="50">';
                    incomingOut += '<img src="static/image/'+data.blocks[i].transactions[t].currency+'.png">';
                    incomingOut += '</td>';
                    incomingOut += '<td width="75" class="currency">';
                    incomingOut += '<p>'+data.blocks[i].transactions[t].currency+'</p>';
                    incomingOut += '</td>';
                    incomingOut += '<td width="375">';
                    incomingOut += '<p class="hash">'+data.blocks[i].transactions[t].transactionHash;
                    incomingOut += '<span class="date">'+convertTimestamp(data.blocks[i].transactions[t].unixTimestamp)+'</span></p>';
                    incomingOut += '</td>';
                    incomingOut += '<td width="250">';
                    incomingOut += '<p class="amount">'+data.blocks[i].transactions[t].amount + ' ' + data.blocks[i].transactions[t].currency + '</p>';

                    
                    if( parseFloat(data.blocks[i].transactions[t].senderAddressRank.suspicion) > parseFloat(data.blocks[i].transactions[t].recipientAddressRank.suspicion) ){
                        suspicion = parseFloat(data.blocks[i].transactions[t].senderAddressRank.suspicion);
                    }else{
                        suspicion = parseFloat(data.blocks[i].transactions[t].recipientAddressRank.suspicion);
                    }

                    if( suspicion == 0 || suspicion <= 0.1 ){
                        color = 'linear-gradient(to left, #fbde65 0%, #40a85f 100%)';
                    }else if(suspicion >= 0.1 && suspicion < 0.2 ){
                        color = 'linear-gradient(to left, #fbde65 20%, #40a85f 100%)';
                    }else if(suspicion >= 0.2 && suspicion < 0.3){
                        color = 'linear-gradient(to left, #fbde65 40%, #40a85f 100%)';
                    }else if(suspicion >= 0.3 && suspicion < 0.4){
                        color = 'linear-gradient(to left, #fbde65 60%, #40a85f 100%)';
                    }else if(suspicion > 0.4 && suspicion < 0.5){
                        color = 'linear-gradient(to left, #fbde65 80%, #40a85f 100%)';
                    }else if(suspicion == 0.5){
                        color = 'linear-gradient(to left, #fbde65 100%, #40a85f 100%)';
                    }else if(suspicion > 0.5 && suspicion < 0.6){
                        color = 'linear-gradient(to left, #e14939 20%, #fbde65 100%)';
                    }else if(suspicion >= 0.6 && suspicion < 0.7){
                        color = 'linear-gradient(to left, #e14939 40%, #fbde65 100%)';
                    }else if(suspicion >= 0.7 && suspicion < 0.8){
                        color = 'linear-gradient(to left, #e14939 60%, #fbde65 100%)';
                    }else if(suspicion >= 0.8 && suspicion < 0.9){
                        color = 'linear-gradient(to left, #e14939 80%, #fbde65 100%)';
                    }else if(suspicion >= 0.9 && suspicion < 1){
                        color = 'linear-gradient(to left, #e14939 100%, #fbde65 100%)';
                    }else{
                        color = 'linear-gradient(to left, #e14939 100%, #fbde65 100%)';
                    }

                    incomingOut += '<span class="circle" style="background:'+color+'" title="'+data.blocks[i].transactions[t].suspicion+'"></span>';
                    incomingOut += '</td>';
                    incomingOut += '<td>';
                    incomingOut += '<a href="#" class="detailed"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492.004 492.004" xml:space="preserve"> <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265 c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/></svg></a>';
                    incomingOut += '</td>';
                incomingOut += '</tr>';
            }
        }
    $('.incoming .content table').html(incomingOut);
};

Мне через соккет присылают json массив и я записываю его в таблицу, как мне сделать, чтобы выводилось по 15 записей, к примеру и можно ли это вообще сделать?
Ещё, буду признательна если поможете ещё с одной проблемой
У меня почему-то они выводятся не в правильном порядке, если смотреть по времени
6073601152049802304394.png
То есть сначала старые, потом новые, хотелось бы сделать, чтобы сначала выводились новые.
Заранее спасибо за ваши ответы, я только учусь :)
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы