Observable wrapping

    Wrapping something in an observable means we take something that is NOT an Observable and turn it into one, so it can play nice with other Observables. It also means that it can now use Operators.

    Three things we need to do here emit data, handle errors and close the stream

    1. if(request.status === 200) {
    2.   observer.next( request.response )  // emit data
    4. }

    Handle potential errors

    1. else {
    2.        observer.error('error happened');
    3.   }

    and

    1. if(request.status === 200) {
    2.   observer.next( request.response )
    3.   observer.complete()  // close stream, as we don't expect more data
    4. }
    1. console.clear();
    4. const { Observable } = Rx;
    6. const speechRecognition$ = new Observable(observer => {
    7.    const speech = new webkitSpeechRecognition();
    9.      observer.next(event);
    10.      observer.complete();
    11.    };
    13.    speech.start();
    15.    return () => {
    16.      speech.stop();
    17.    }
    18. });
    20. const say = (text) => new Observable(observer => {
    21.   const utterance = new SpeechSynthesisUtterance(text);
    22.   utterance.onend = (e) => {
    23.     observer.next(e);
    24.     observer.complete();
    25.   };
    26.   speechSynthesis.speak(utterance);
    27. });
    30. const button = document.querySelector("button");
    32. const heyClick$ = Observable.fromEvent(button, 'click');
    34. heyClick$
    35.   .switchMap(e => speechRecognition$)
    36.   .map(e => e.results[0][0].transcript)
    37.     switch (text) {
    38.       case 'I want':
    39.         return 'candy';
    40.       case 'hi':
    41.       case 'ice ice':
    42.         return 'baby';
    43.       case 'hello':
    45.       case 'make me a sandwich':
    46.       case 'get me a sandwich':
    47.         return 'do it yo damn self';
    48.       case 'why are you being so sexist':
    49.         return 'you made me that way';
    50.       default:
    51.         return `I don't understand: "${text}"`;
    52.     }
    53.   })
    54.   .concatMap(say)
    55.   .subscribe(e => console.log(e));

    Speech recognition stream

    This essentially sets up the speech recognition API. We wait for one response and after that we complete the stream, much like the first example with AJAX.

    Note also that a function is defined for cleanup

    1. return () => {
    2.    speech.stop();
    3.  }

    so that we can call speechRecognition.unsubscribe() to clean up resources

    1. const say = (text) => new Observable(observer => {
    2.   const utterance = new SpeechSynthesisUtterance(text);
    3.   utterance.onend = (e) => {
    4.     observer.next(e);
    5.     observer.complete();
    6.   };
    7. });

    main stream hey$

    Logic should be read as follows
    heyClick$ is activated on a click on a button.
    speechRecognition is listening for what we say and sends that result into heyClick$ where the switching logic determines an appropriate response that is uttered by say Observable.

    all credit due to @ladyleet and

    One easier Ajax wrapping and one a little more advanced Speech API has been wrapped into an Observable. The mechanics are still the same though:
    1) where data is emitted, add a call to next()
    2) if there is NO more data to emit call complete
    3) if there is a need for it, define a function that can be called upon unsubscribe()
    4) Handle errors through calling in the appropriate place. (only done in the first example)