Skip to content

Instantly share code, notes, and snippets.

@mikeyoon

mikeyoon/index.html

Last active April 5, 2018 00:25
Show Gist options
  • Save mikeyoon/55175c99853d1ab43a835be91834e524 to your computer and use it in GitHub Desktop.
Save mikeyoon/55175c99853d1ab43a835be91834e524 to your computer and use it in GitHub Desktop.
Download ZIP
JS BinHot/Cold Example// source http://jsbin.com/pecilej/edit?html,js,output
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Hot/Cold Example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<button onclick="subCold()">Subscribe Cold</button>
<button onclick="subHot()">Subscribe Hot</button>
<button onclick="next()">Next</button>
<button onclick="unsub()">Unsubscribe</button>
<button onclick="clearResults()">Clear</button>
<ul id="output">
</ul>
<script type="text/javascript">
var $output = $('#output');
</script>
<script id="jsbin-javascript">
let subject = new (function() {
let datasource = {
onnext: [],
oncomplete: []
};
let obs = new Rx.Observable(observer => {
datasource.onnext.push(val => observer.next(val));
datasource.oncomplete.push(() => observer.complete());
$output.append('<li>Observable Constructed</li>')
return () => $output.append('<li>unsubscribed</li>');
});
this.next = (val) => datasource.onnext.forEach(f => f(val)) ;
this.complete = () => datasource.oncomplete.forEach(f => f());
this.publish = () => obs.publish();
this.subscribe = (...args) => obs.subscribe.apply(obs, args);
})();
let hot = subject.publish();
let subs = [];
function subCold() {
let id = subs.length + 1;
subs.push({
id: id,
sub: subject.subscribe(
res => $output.append('<li>cold ' + res + '</li>'),
err => $output.append('<li>cold ' + err + '</li>'),
() => $output.append('<li>cold closed</li>')
)
});
}
function subHot() {
hot.connect();
let id = subs.length + 1;
subs.push({
id: id,
sub: hot.subscribe(
res => $output.append('<li>hot ' + res + '</li>'),
err => $output.append('<li>hot ' + err + '</li>'),
() => $output.append('<li>hot closed</li>')
)
});
}
function next() {
subject.next(Math.random());
}
function unsub() {
subject.complete();
subs.forEach(x => {
x.sub.unsubscribe();
});
subs = [];
hot = subject.publish();
}
function clearResults() {
$output.html('');
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">let subject = new (function() {
let datasource = {
onnext: [],
oncomplete: []
};
let obs = new Rx.Observable(observer => {
datasource.onnext.push(val => observer.next(val));
datasource.oncomplete.push(() => observer.complete());
$output.append('<li>Observable Constructed</li>')
return () => $output.append('<li>unsubscribed</li>');
});
this.next = (val) => datasource.onnext.forEach(f => f(val)) ;
this.complete = () => datasource.oncomplete.forEach(f => f());
this.publish = () => obs.publish();
this.subscribe = (...args) => obs.subscribe.apply(obs, args);
})();
let hot = subject.publish();
let subs = [];
function subCold() {
let id = subs.length + 1;
subs.push({
id: id,
sub: subject.subscribe(
res => $output.append('<li>cold ' + res + '</li>'),
err => $output.append('<li>cold ' + err + '</li>'),
() => $output.append('<li>cold closed</li>')
)
});
}
function subHot() {
hot.connect();
let id = subs.length + 1;
subs.push({
id: id,
sub: hot.subscribe(
res => $output.append('<li>hot ' + res + '</li>'),
err => $output.append('<li>hot ' + err + '</li>'),
() => $output.append('<li>hot closed</li>')
)
});
}
function next() {
subject.next(Math.random());
}
function unsub() {
subject.complete();
subs.forEach(x => {
x.sub.unsubscribe();
});
subs = [];
hot = subject.publish();
}
function clearResults() {
$output.html('');
}</script></body>
</html>
Raw
jsbin.pecilej.js
let subject = new (function() {
let datasource = {
onnext: [],
oncomplete: []
};
let obs = new Rx.Observable(observer => {
datasource.onnext.push(val => observer.next(val));
datasource.oncomplete.push(() => observer.complete());
$output.append('<li>Observable Constructed</li>')
return () => $output.append('<li>unsubscribed</li>');
});
this.next = (val) => datasource.onnext.forEach(f => f(val)) ;
this.complete = () => datasource.oncomplete.forEach(f => f());
this.publish = () => obs.publish();
this.subscribe = (...args) => obs.subscribe.apply(obs, args);
})();
let hot = subject.publish();
let subs = [];
function subCold() {
let id = subs.length + 1;
subs.push({
id: id,
sub: subject.subscribe(
res => $output.append('<li>cold ' + res + '</li>'),
err => $output.append('<li>cold ' + err + '</li>'),
() => $output.append('<li>cold closed</li>')
)
});
}
function subHot() {
hot.connect();
let id = subs.length + 1;
subs.push({
id: id,
sub: hot.subscribe(
res => $output.append('<li>hot ' + res + '</li>'),
err => $output.append('<li>hot ' + err + '</li>'),
() => $output.append('<li>hot closed</li>')
)
});
}
function next() {
subject.next(Math.random());
}
function unsub() {
subject.complete();
subs.forEach(x => {
x.sub.unsubscribe();
});
subs = [];
hot = subject.publish();
}
function clearResults() {
$output.html('');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment