Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
132 lines (110 loc) · 3.03 KB
/
Copy pathindex.html
File metadata and controls
132 lines (110 loc) · 3.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple random stream</title>
<style>
.tee1 {
float: left;
width: 50%;
}
.tee2 {
float: right;
width: 50%;
}
button {
display: block;
}
</style>
</head>
<body>
<h1>Simple Tee example</h1>
<button>Stop string generation</button>
<div class="custom">
<h2>Custom stream input</h2>
<ul>
</ul>
</div>
<div class="tee1">
<h2>Tee 1 output</h2>
<ul>
</ul>
</div>
<div class="tee2">
<h2>Tee 2 output</h2>
<ul>
</ul>
</div>
<script>
// Store reference to lists, paragraph and button
const list1 = document.querySelector('.custom ul');
const list2 = document.querySelector('.tee1 ul');
const list3 = document.querySelector('.tee2 ul');
const button = document.querySelector('button');
// create empty string in which to store result
let result = "";
// function to generate random character string
function randomChars() {
let string = "";
let choices = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
for (let i = 0; i < 8; i++) {
string += choices.charAt(Math.floor(Math.random() * choices.length));
}
return string;
}
const stream = new ReadableStream({
start(controller) {
interval = setInterval(() => {
let string = randomChars();
// Add the string to the stream
controller.enqueue(string);
// show it on the screen
let listItem = document.createElement('li');
listItem.textContent = string;
list1.appendChild(listItem);
}, 1000);
button.addEventListener('click', function() {
clearInterval(interval);
teeStream();
controller.close();
})
},
pull(controller) {
// We don't really need a pull in this example
},
cancel() {
// This is called if the reader cancels,
// so we should stop generating strings
clearInterval(interval);
}
});
function teeStream() {
const teedOff = stream.tee();
readStream(teedOff[0], list2);
readStream(teedOff[1], list3);
}
function readStream(stream, list) {
const reader = stream.getReader();
let charsReceived = 0;
// read() returns a promise that resolves
// when a value has been received
reader.read().then(function processText({ done, value }) {
// Result objects contain two properties:
// done - true if the stream has already given you all its data.
// value - some data. Always undefined when done is true.
if (done) {
console.log("Stream complete");
return;
}
charsReceived += value.length;
const chunk = value;
let listItem = document.createElement('li');
listItem.textContent = 'Read ' + charsReceived + ' characters so far. Current chunk = ' + chunk;
list.appendChild(listItem);
// Read some more, and call this function again
return reader.read().then(processText);
});
}
</script>
</body>
</html>