Redux Observable로 EventSource하는 방법

Question

질문은 간단합니다. 어떻게 redux-observable을 EventSource와 함께 사용할 수 있습니까? 그와 같은 RxJs와

는 :

const observable = Observable.create(observer => { 
    const eventSource = new EventSource('/model-observable'); 
    return() => { 
    eventSource.close(); 
    }; 
}); 

observable.subscribe({ 
    next: data => { 
    this.zone.run(() => this.someStrings.push(data)); 
    }, 
    error: err => console.error('something wrong occurred: ' + err) 
}); 

Answer 1

이 종료 더 EventSource에 연결하는 방법에 대한 일반적인 RxJS 질문처럼 들린다. 이것은 여러 가지 방법으로 수행 할 수 있습니다. 당신이 걱정하는 모든 메시지 (그리고 오류/개방) 인 경우 :

import { Observable } from 'rxjs/Observable'; 
import { Subscriber } from 'rxjs/Subscriber'; 

const fromEventSource = (url, openObserver) => { 
    return new Observable(observer => { 
    const open = new Subscriber(openObserver); 
    const source = new EventSource(url); 

    const onOpen = event => { 
     open.next(event); 
     open.complete(); 
    }; 

    const onError = event => { 
     if (event.readyState === EventSource.CLOSED) { 
     observer.complete(); 
     } else { 
     observer.error(event); 
     } 
    }; 

    const onMessage = event => { 
     observer.next(event.data); 
    }; 

    source.addEventListener('open', onOpen, false); 
    source.addEventListener('error', onError, false); 
    source.addEventListener('message', onMessage, false); 

    return() => { 
     source.removeEventListener('open', onOpen, false); 
     source.removeEventListener('error', onError, false); 
     source.removeEventListener('message', onMessage, false); 
     source.close(); 
    }; 
    }); 
}; 

fromEventSource('http://some-url.com') 
    .subscribe(value => console.log(value)); 

:

import { fromEvent } from 'rxjs/observable/fromEvent'; 

const fromEventSource = url => { 
    return new Observable(observer => { 
    const source = new EventSource(url); 
    const message$ = fromEvent(source, 'message'); 
    const subscription = message$.subscribe(observer); 

    return() => { 
     subscription.unsubscribe(); 
     source.close(); 
    }; 
    }); 
}; 

열거 및/또는 오류에 대한 관심이 있다면, 그것은 함께 파이프 모든 것에 좀 더 코드가 필요합니다

redux-observable에서의 사용은 다음과 같습니다.

const somethingEpic = action$ => 
    action$.ofType(SOMETHING) 
    .mergeMap(() => 
     fromEventSource('http://some-url.com') 
     .map(message => ({ 
      type: MESSAGE, 
      payload: message 
     })) 
     .catch(e => Observable.of({ 
      type: SOMETHING_ERROR, 
      payload: e, 
      error: true 
     })) 
    );