class ChartPushData(WebSocketApplication): def on_open(self): print("Connection opened ChartPushData") def on_message(self, msg): data = json.loads(msg) data1 = [{'data': list( Ethereum.objects.values()[data['start']:data['end']]), 'count': Ethereum.objects.count(), 'start': data['start'], }] self.ws.send(str(json.dumps(data1))) print(data) def on_close(self, reason): print(reason)
Т.е из клиента я могу обращаться к серверу sendMsg(0, 100), sendMsg(100, 200). Сервер возвращает data - массив записей с данными, которые я визуализирую, start - чтобы знать какой “сдвиг” я выбрал(для следующей итерации) и count - кол-во записей в таблице(для того, чтобы не пытаться забрать больше данных, чем имеется в таблице. Итак клиент, который просто в цикле до 10 забирает информацию с сервера с шагом 100. Что нужно? Нужно переделать это так, чтобы учитывалось count(кол-во записей в таблице). Но т.к вебсокеты асинхронные, я не могу устроить типа такого(упрощенная схема). Надо где-то хранить count(кол-во записей в таблице), чтобы можно было итерировать
function getData(start, end) { res = recvData() // забираем информацию с вебсокет сервера(def on_message) for var i = res['start']; i < res['count']; i+=100 { getData(i, i + 100) }
google.charts.load('visualization', '1.1', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawStuff); var data; var options; var chart = null; function drawChart() { // Instantiate and draw our chart, passing in some options. if (chart == null) { chart = new google.visualization.AreaChart(document.getElementById('chart_div')); } chart.draw(data, options); } function drawStuff() { data = new google.visualization.DataTable(); data.addColumn('string', 'zzz'); data.addColumn('number', 'Count'); // Set chart options options = { 'title': 'Ethereum', // 'width': 400, // 'height': 300, vAxis: { gridlines: { color: 'red', direction: '-1' } }, }; var ws = new WebSocket('ws://' + window.location.hostname + ':8001/chart/'); var wsSend = function(data) { if (!ws.readyState) { setTimeout(function() { wsSend(data); }, 100); } else { ws.send(data); } }; // wsSend('{"count": 12, "offset": 0}'); // обработчик входящих сообщений ws.onmessage = function(event) { if (event.data) { wsRecv(event.data); }; }; function sleep1(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // get data from srv async function getData(start, end) { var start = start; var end = end; for (var i = 0; i < 10; i++) { console.log('start: ' + start + " " + 'end: ' + end); start += 100; end = start + 100; wsSend(JSON.stringify({ "start": start, "end": end })); }; }; function wsRecv(msg) { var res = JSON.parse(msg); for (var i = 0; i < res[0]['data'].length; i++) { data.addRow([res[0]['data'][i]['date'], res[0]['data'][i]['cur_usd']]); console.log(res[0]['count']); }; drawChart(); } drawChart(); getData(0, 100);