Rx를 사용한 입력 / 서비스 호출 / 출력 모델링

console.log.txt

!!!! do params { date: '2015-05-24', first: 'Youngjoo', last: 'Lee' }
@user name Youngjoo Lee
@current date 2015-05-24
@hello message Hello Youngjoo Lee! Date is 2015-05-24
!!!! do params { date: '2016-04-19', first: 'Kiwhan', last: 'Ryu' }
@user name Kiwhan Ryu
@current date 2016-04-19
@hello message Hello Kiwhan Ryu! Date is 2016-04-19
!!!! do params { date: '2016-05-23', first: 'Kwangjin', last: 'Yoon' }
@user name Kwangjin Yoon
@current date 2016-05-23
@lazy Hello Kwangjin Yoon! Date is 2016-05-23
@hello message Hello Kwangjin Yoon! Date is 2016-05-23
true true true
true true

pipeline-modeling.js

/*
 실험 목적
 =============================
 Observable Chain을 통해서 전체적인 모델링을 구현해본다

 확인
 =============================
 어떻게 될 것도 같은데... 꽤 효율적일 수 있을지도...
 */
const Rx = require('rxjs/Rx')

const fetch = param => new Promise(resolve => {
  setTimeout(() => {
    resolve(`Hello ${param.first} ${param.last}! Date is ${param.date}`)
  }, Math.random() * 1000)
})

//---------------------------------------------
// UI Input에 대응 값들을 받아들임
//---------------------------------------------
const date = new Rx.BehaviorSubject('2001-09-23')
const first = new Rx.BehaviorSubject('Ian')
const last = new Rx.BehaviorSubject('Kim')

//---------------------------------------------
// 입력받은 Parameter들을 합쳐서 정리
//---------------------------------------------
const paramsSubject = new Rx.Subject
const params = Rx.Observable
                 .combineLatest(date, first, last) // 마지막 값들만 모으는 Combine Operator
                 .debounceTime(200) // 빈번한 프로세싱을 막기 위해서 debounce 처리
                 // .bufferTime(200) // debounceTime으로 축약할 수 있음
                 // .filter(x => x.length > 0)
                 // .map(x => x[x.length - 1])
                 .map(x => ({date: x[0], first: x[1], last: x[2]}))
                 .do(x => console.log('!!!! do params', x))
                 // hot observable로 변경 - 이 부분을 배제하면 params의 단계가 매 호출마다 재실행 되는 문제가 있다
                 // 이 부분을 hot observable로 변경해서 윗 단계들을 단일 실행으로 정리할 수 있다
                 .multicast(paramsSubject)
params.connect()

//---------------------------------------------
// UI Output을 위한 Observables
//---------------------------------------------
const userName = params.map(x => `${x.first} ${x.last}`)
const currentDate = params.map(x => `${x.date}`)
const helloMessage = params.map(x => Rx.Observable.fromPromise(fetch(x)))
                           .mergeAll()
                           .debounceTime(100)

//---------------------------------------------
// UI Print
//---------------------------------------------
const userNameSubscription = userName.subscribe(x => console.log('@user name', x))
const currentDateSubscription = currentDate.subscribe(x => console.log('@current date', x))
const helloMessageSubscription = helloMessage.subscribe(x => console.log('@hello message', x))

//---------------------------------------------
// 입력 실험
//---------------------------------------------
date.next('2010-10-09')
date.next('2015-05-24')
first.next('Seoyeon')
last.next('Lee')
first.next('Youngjoo')

setTimeout(() => {
  date.next('2016-04-19')
  first.next('Kiwhan')
  last.next('Ryu')

  setTimeout(() => {
    // Rx.BehaviorSubject로 가능하다
    // 기본 Subject는 값을 캐싱하고 있지 않기 때문에
    // 값이 입력되고 난 이후에 붙는 Subscription에 아무런 동작을 하지 않는다
    const lazySubscription = helloMessage
    // .scan((arr, x) => { // scan()은 Subscription이 시작된 이후부터의 값을 캐싱하기 시작한다
    //   arr.push(x)
    //   return arr
    // }, [])
    // .subscribe(x => console.log('@lazy', x.length, x.join(' + ')))
      .subscribe(x => console.log('@lazy', x))

    setTimeout(() => {
      date.next('2016-05-23')
      first.next('Kwangjin')
      last.next('Yoon')

      setTimeout(() => {
        date.unsubscribe() // subject와 observable을 모두 뒤섞어서 unsubscribe() 시켜본다
        first.unsubscribe()

        lazySubscription.unsubscribe()
        userNameSubscription.unsubscribe()

        paramsSubject.unsubscribe()

        last.unsubscribe()

        currentDateSubscription.unsubscribe()
        helloMessageSubscription.unsubscribe()

        console.log(date.isUnsubscribed, first.isUnsubscribed, last.isUnsubscribed)
        console.log(helloMessageSubscription.isUnsubscribed, lazySubscription.isUnsubscribed)
      }, 2000)
    }, 2000)
  }, 2000)
}, 1000)