RxJS Playground

Simple place for me to mess around with RxJS

by Josh Carroll

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>
  Result
  </h3>
      <table class="table table-striped" id="finished-requests"></table>
    </div>
  </div>
</div>

TypeScript

const Observable = Rx.Observable;

class EventQueue {

  private elem: any;
  private events: any[] = [];

  constructor(selector: string, private renderer: (e) => string) {
    this.elem = document.querySelector(selector);
  }
  
  enqueueAll(events:any[]){
  	this.events.unshift(...events);
    this.renderList();
  }
  
  enqueue(e){
  	this.events.push(e);
    this.renderList();
  }
  
  dequeue():any{
  	const item = this.events.shift();
    this.renderList();
    
    return item;
  }
  
  peek():any{
  	return this.events[0];
  }
  
  private renderList(){
  	const _this = this;
  	const html = this.events.map(e => {
    	return _this.renderer(e);
    })
    .join('\n');
    
    this.elem.innerHTML = html;
  }
}

const eventItems = [];

for(let i = 1; i <= 100; i++){
	eventItems.push({id:i});
}

const timeFormat = 'mm:ss:SS';

const resultQueue = new EventQueue('#finished-requests', (e) => { 
	return [
  '<tr>',
  	'<td>' + e.itemId + '</td>',
    '<td>' + moment(e.startTime).format(timeFormat) + '</td>',
    '<td>' + moment(e.endTime).format(timeFormat) + '</td>',
    '<td>' + e.result + '</td>',
  '</tr>'
  ].join('');
});

const items$ = Rx.Observable.from(eventItems);

items$
.mergeMap(i => {
  	return getResult(i);
}, 20)
.subscribe(i => {
	resultQueue.enqueue(i);
});

function getResult(e){
	return new Promise(r => {
  	const timeout = getRandomInt(100, 5000);
    const result = getRandomInt(9000,9999);
    const startTime = new Date();
  	setTimeout(() => {
    	r({itemId:e.id, startTime:startTime, endTime:new Date(), result:result});
    }, timeout);
  });
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}