tadkim
6/3/2017 - 2:02 AM

RxJS Basic - Creating Observable

RxJS Basic - Creating Observable

styles.css
content_copyfile_download
/* todo: add styles */
index.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>

</head>
<body>

<div class="jumbotron">
    <div class="col-sm-8 mx-auto">
        Response
        <br>---------------------<br>
        <p id="response"></p>
    </div>
</div>
<script>

let dom = document.getElementById('response');


// Producer default
/*
const obs = Rx.Observable.create((observer) =>{ 
  observer.next(10);
});
*/


/*
// Producer 1
const obs = Rx.Observable.create((observer) =>{ 
  observer.next(10);
  observer.next(20); 
  observer.next(30);
  observer.next(40);
});

// Producer 2
const obs2 = Rx.Observable.of(10, 20, 30, 40); //obs small size

obs2.subscribe(
  (result)=>{   dom.append(result); },
  (error)=>{   dom.append('error'); },
  (complete)=>{   dom.append('done'); }
);

obs.subscribe((result)=>{  
  dom.append(result);
});
obs.subscribe((result)=>{  
  dom.append(result);
});


  

*/


/*
const arr = [10, 20, 30];
const observable = Rx.Observable.from(arr);
observable.subscribe((x)=>{ console.log(x); });

const obs_promise = Rx.Observable.fromPromise(Promise.resolve(10));
obs_promise.subscribe((x)=>{ console.log(x); });

*/
/*
// fromEvent
const obs = Rx.Observable
    .fromEvent(document, 'click');

obs.subscribe(
    (result)=>{    dom.append(result.clientX); },
    (error)=>{  console.log('error');
    () => dom.append('done');
});

*/
/*
//fromEvent 함수를 직접 만들어본다면 이렇게
function fromEvent(dom, eventName){
    return Rx.Observable.create((observer)=>{
        dom.addEventListener(eventName, (evt)=>{
            observer.next(evt);
        });
    });
}


const subscription = fromEvent(document, 'click').subscribe(
    (result)=>{    dom.append(result.clientX); },
    (error)=>{  console.log('error'); }
    () =>  { dom.append('done'); }
);

setTimeout(()=> { subsription.unsubscribe();  }, 5000);

*/


/*
const interval = (intervalms) => {
	let i = 0;
	return Rx.Observable.create((observer) => {
		setInterval(() => {
			observer.next(i++);
		}, intervalms);
	});
} 

// const obs = interval(1000);
const obs = Rx.Observable.interval(1000);
const sub = obs.subscribe( 
  (x) => dom.append(x), 
  (err) => dom.append(error),
  () => dom.append('done') 
);


setTimeout(()=> sub.unsubscribe(), 5000);

const sub1 = interval.subscribe((x)=> { dom.append('>'+x); });
sub1.unsubscribe();
*/


/*
8-1


function subscribe(observer) {
	observer.next(10);
	observer.next(20);
	observer.complte();
}

const observer = {
  next: (result) => { dom.append(reuslt),
  error: (error) => { dom.append(error),
  complete: () => { dom.append('done')
};

const obs = new Rx.Observable(subscribe);
obs.subscribe(observer);

*/

const obs = Rx.Observable.of(1, 2, 3)
  .map((x) => x+1 )
  .filter((x) =>  x%2 === 0);
  
obs.subscribe(
  (x) => dom.append(x) 
);





</script>

</body>
</html>
9-1.js
content_copyfile_download
let dom = document.getElementById('response');
function subscribe(observer) {
	const id = setInterval(() => {
		observer.next(1);
	}, 1000);
	return () => clearInterval(id);	
}
const unsubscribe = subscribe({
	next: (x) => dom.append(x),
	complete: () => dom.append('done')
});

setTimeout(() => unsubscribe(), 3000);
8-1.js
content_copyfile_download
function subscribe(observer) {
	observer.next(10);
	observer.next(20);
}
const obs = new Rx.Observable(subscribe);
const observer = {
	next: (x) => console.log(x),
	error: (err) => console.log(err),
	complete: () => console.log('done');
}
obs.subscribe(observer);
7-1.js
content_copyfile_download
let dom = document.getElementById('response');
const interval = (intervalms) => {
	let i = 0;
	return Rx.Observable.create((observer) => {
		setInterval(() => {
			observer.next(i++);
		}, intervalms);
	});
} 

const obs = interval(1000);
obs.subscribe( (x) => dom.append(x), (err) => console.log(err), () => console.log('done') );
6-2.js
content_copyfile_download
let dom = document.getElementById('response');
const empty = () => {
	return Rx.Observable.create((observer) => {
		observer.complete();
	});
} 

const obs = empty();
obs.subscribe(
(x) => console.log(x),
(err) => console.log(err),
() => dom.append('done')
);
5-5.js
content_copyfile_download
const fromEvent = (dom, eventName) => {
	return Rx.Observable.create((observer) => {
		dom.addEventListener(eventName, (x) => observer.next(x));
	}
});

const obs = fromEvent(document, 'click');
obs.subscribe((x) => console.log(x));
5-2.js
content_copyfile_download
const add = (h) => { document.addEventListener('click', h);
const remove = (h) => { document.removeEventListener('click', h);
const obs = Rx.Observable.fromEventPatter(add, remove);

obs.subscribe((x) => console.log(x));
5-1.js
content_copyfile_download
let dom = document.getElementById('response');
let observable = Rx.Observable.from([10, 20]);
observable.subscribe((x) => dom.append(x + ','));