Zählen Tasten drücken pro Sekunde mit Winkel 2 Rxjs

Question

/** 
* Created by darius on 02/04/16. 
*/ 
import { Component } from 'angular2/core'; 
import { Observable } from 'rxjs/Rx'; 


@Component({ 
    styles: [ require('../../style.css') ], 
    selector: 'keypresses-per-second', 

    template: ` 

    <div class="block"> 

     <input type="text" (keypress)="onKeypress($event)"> 

     {{keypresses}} <br> 
     <input type="text" (keypress)="onKeypressReact($event)"> 
     {{keypressesReactive}} 
    </div> 
    ` 
}) 

export class KeypressesPerSecond { 

    ngOnInit() { 

    this.nonReactive(); 

    this.reactiveWay(); 
    } 

    // not reactive 
    keypresses = ''; 
    counter = 0; 
    secondsPassed = 0; 

    nonReactive(){ 

    var self = this; 

    var int = setInterval(function(){ 

     console.log(self.counter, 'counter in non reactive') 
     self.keypresses += self.counter + ', '; 
     self.counter = 0; 
     self.secondsPassed++ 
     if (self.secondsPassed > 30) { 
     clearInterval(int); 
     } 
    }, 1000); 
    } 

    onKeypress($event){ 
    console.log($event.keyCode); 
    this.counter++; 
    } 
    // end not reactive 

    onKeypressReact() {} 

    keypressesReactive = ''; 
    reactiveCount = 0; 

    reactiveWay() { 

    console.log('reactive way') 

    const keypressObservable$ = Observable.create(observer => { 

     // from template 
     this.onKeypressReact =() => { observer.next('press'); }; 
    }); 


    keypressObservable$.subscribe(function(event) { 
     self.reactiveCount++; 
    }); 

    var self = this; 

    var timer$ = Observable.create(function(observer){ 

     // is subscribed to this observable 
     var subscribed = true; 
     var int = setInterval(function() { 

     if (subscribed) { 
      observer.next(self.reactiveCount); 
      self.reactiveCount = 0; 
     } 

     if (self.secondsPassed > 30) { 
      observer.complete(); 
      clearInterval(int) 
     } 

     }, 1000); 

    }) 


    timer$.subscribe(
     function (x) { 
     console.log('Nextzz: %s', x); 
     self.keypressesReactive += x + ', '; 
     }); 

    } 

} 

Ich habe versucht, reaktive und nicht reaktive Art der Tasten drücken Zähler. Werfen Sie einen Blick auf die Funktion reactiveWay()

es funktioniert, aber ich denke, es könnte etwas nicht stimmen.

ich excersizes es getan in http://reactivex.io/learnrx/

und es gab viele Mapping.

Es fühlt sich an, als ob ich das Zeitereignis auf die Reihenfolge der Schlüsselereignisse pro Sekunde abbilden müsste. Aber verstehe nicht, wie ich diese abbilden könnte.

So etwas wie

// doing this way we could removed some code from timer$, we just need to get an event 
var kps$ = timer$.concatMap(function(time) { 

    var sum = keypressObservable$.takeUntil(timer$) 
    .reduce(function (acc, cur) { 
     return acc + cur; 
    }) 

    console.log('sum', sum); 

    return sum; 
}) 

// this works, counts the keypresses, but only when pressing at least 1. 
kps$.subscribe(
    function (x) { 
    console.log('kps next', x); 
    self.keypressesReactive += x + ', '; 
    }); 

Wie erzwinge ich kps $ 0 Summe ausgegeben wird, wenn keine Taste gedrückt wird in der zweiten getan, wenn ich die kps $ verwenden?

aktualisieren

Basierend auf der Antwort, ich habe dies getan.

Aber wenn ich die Obs abonniere, bekomme ich kein Ereignis jede Sekunde mit 0 Wert noch. Wenn ich einige Tasten in einer Sekunde drücke, bekomme ich die Anzahl der Tasten gedrückt und ein weiteres Ereignis von 0. Und dann hören die Ereignisse auf, bis ich wieder die Tasten drücke. Was muss ich ändern, damit ich jede Sekunde ein Ereignis erhalte?

Answer 1

Ich denke, dass Sie den Puffer-Operator nutzen könnten. Es erlaubt, Ereignisse zu puffern und sie nach einer gewissen Zeit zu senden. Sie könnten dann diese Liste von Ereignissen auf ihre Länge abbilden.

var source = Observable.fromEvent(document.body, 'keyup'); 

var obs = source 
    .bufferTime(1000).map((clickBuffer) => { 
     return clickBuffer.length; 
    }); 

obs.subscribe((num) => { 
    // Get the number of pressed keys per second 
}); 

Sehen Sie diese Links:

• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/buffer.md
• How to create a RxJS buffer that groups elements in NodeJS but that does not rely on forever running interval?