Skip to content

Commit 28755c0

Browse files
carlosmieicarlosmiei
committed
fix example
1 parent e4aee13 commit 28755c0

File tree

2 files changed

+101
-84
lines changed

2 files changed

+101
-84
lines changed

‎examples/html/webworker/index.html

Lines changed: 92 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,97 @@
11
<!DOCTYPE html>
22
<html>
3-
<body>
4-
<h2>CCXT running on a Webworker example</h2>
5-
<p>This example uses a web worker to continuously call <b>fetchTicker</b> on a user-defined exchange, symbol and interval. Then, the web worker reaches back with the results.</p>
6-
<h3>Parameters</h3>
7-
<label for="exchange">Exchange:</label>
8-
<input type="text" id="exchange" name="exchange" ><br><br>
9-
<label for="symbol">Symbol: </label>
10-
<input type="text" id="symbol" name="symbol"><br><br>
11-
<label for="interval">Interval (ms): </label>
12-
<input type="text" id="interval" name="interval"><br><br>
13-
<button onclick="startWorker()">Start CCXT worker</button>
14-
<button onclick="stopWorker()">Stop CCXT worker</button>
15-
<h3> Received Results:</h3>
16-
<output id="result"></output>
17-
<table id="resultsTable" style="left:300px;width:400px; border:1px solid black;" >
18-
<thead>
19-
<tr>
20-
<th>Symbol</th>
21-
<th>Last Price</th>
22-
<th>Exchange Ts</th>
23-
<th>Local Ts</th>
24-
</tr>
25-
</thead>
26-
<tbody id="tbody">
27-
</tbody>
28-
</table>
29-
</body>
30-
<script>
31-
// fill in default values
32-
document.addEventListener('DOMContentLoaded', function(event) {
33-
document.getElementById('exchange').value = 'coinbasepro';
34-
document.getElementById('symbol').value = 'BTC/USDT';
35-
document.getElementById('interval').value = '1000';
36-
});
37-
38-
var ccxtWorker;
39-
function startWorker() {
40-
var exchange = document.getElementById('exchange').value
41-
var symbol = document.getElementById('symbol').value
42-
var interval = document.getElementById('interval').value
43-
44-
if (typeof(Worker) !== "undefined") {
45-
if (typeof(ccxtWorker) == "undefined") {
46-
ccxtWorker = new Worker("worker.js");
3+
<body>
4+
<h2>CCXT running on a Webworker example</h2>
5+
<p>This example uses a web worker to continuously call <b>fetchTicker</b> on a user-defined exchange, symbol and interval. Then, the web worker reaches back with the results.</p>
6+
<h3>Parameters</h3>
7+
<label for="exchange">Exchange:</label>
8+
<input type="text" id="exchange" name="exchange" ><br><br>
9+
<label for="symbol">Symbol: </label>
10+
<input type="text" id="symbol" name="symbol"><br><br>
11+
<label for="interval">Interval (ms): </label>
12+
<input type="text" id="interval" name="interval"><br><br>
13+
<button onclick="startWorker()">Start CCXT worker</button>
14+
<button onclick="stopWorker()">Stop CCXT worker</button>
15+
<h3> Received Results:</h3>
16+
<output id="result"></output>
17+
<table id="resultsTable" style="left:300px;width:400px; border:1px solid black;" >
18+
<thead>
19+
<tr>
20+
<th>Symbol</th>
21+
<th>Last Price</th>
22+
<th>Base Volume</th>
23+
<th>Exchange Ts</th>
24+
<th>Local Ts</th>
25+
</tr>
26+
</thead>
27+
<tbody id="tbody">
28+
</tbody>
29+
</table>
30+
</body>
31+
<script>
32+
// fill in default values
33+
document.addEventListener('DOMContentLoaded', function(event) {
34+
document.getElementById('exchange').value = 'coinbasepro';
35+
document.getElementById('symbol').value = 'BTC/USDT';
36+
document.getElementById('interval').value = '1000';
37+
});
38+
39+
var ccxtWorker;
40+
function startWorker() {
41+
42+
if (typeof(Worker) !== "undefined") {
43+
// if the worker does not exist yet, creates it
44+
if (typeof(ccxtWorker) == "undefined") {
45+
ccxtWorker = new Worker("worker.js");
46+
}
47+
48+
// reads user-defined parameters
49+
var exchange = document.getElementById('exchange').value
50+
var symbol = document.getElementById('symbol').value
51+
var interval = document.getElementById('interval').value
52+
53+
// send a message with those values
54+
ccxtWorker.postMessage([exchange,symbol, interval]);
55+
56+
ccxtWorker.onmessage = function(event) {
57+
// every time the ccxtworker posts a message
58+
// this handler will be invoked
59+
handleReceivedData(event.data)
60+
};
61+
} else {
62+
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
4763
}
48-
49-
ccxtWorker.postMessage([exchange,symbol, interval]);
50-
51-
ccxtWorker.onmessage = function(event) {
52-
handleReceivedData(event.data)
53-
};
54-
} else {
55-
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
5664
}
57-
}
58-
59-
function handleReceivedData(data) {
60-
var [symbol, last, timestamp, ourTimestamp] = data;
61-
var tableRef = document.getElementById('resultsTable');
62-
var tbody = document.getElementById('tbody');
63-
row = tbody.insertRow(0);
64-
65-
cellSymbol = row.insertCell();
66-
cellSymbol.innerHTML = symbol;
67-
68-
cellPrice = row.insertCell();
69-
cellPrice.innerHTML = last;
70-
71-
cellTimestamp = row.insertCell();
72-
cellTimestamp.innerHTML = timestamp;
73-
74-
cellOurtimestamp = row.insertCell();
75-
cellOurtimestamp.innerHTML = ourTimestamp;
76-
77-
}
78-
79-
function stopWorker() {
80-
ccxtWorker.terminate();
81-
ccxtWorker = undefined;
82-
}
83-
</script>
84-
</body>
65+
66+
function handleReceivedData(data) {
67+
var [symbol, last, baseVolume, timestamp, ourTimestamp] = data;
68+
var tableRef = document.getElementById('resultsTable');
69+
var tbody = document.getElementById('tbody');
70+
row = tbody.insertRow(0);
71+
72+
cellSymbol = row.insertCell();
73+
cellSymbol.innerHTML = symbol;
74+
75+
cellPrice = row.insertCell();
76+
cellPrice.innerHTML = last;
77+
78+
cellPrice = row.insertCell();
79+
cellPrice.innerHTML = baseVolume;
80+
81+
cellTimestamp = row.insertCell();
82+
cellTimestamp.innerHTML = timestamp;
83+
84+
cellOurtimestamp = row.insertCell();
85+
cellOurtimestamp.innerHTML = ourTimestamp;
86+
87+
}
88+
89+
function stopWorker() {
90+
if (ccxtWorker !== undefined) {
91+
ccxtWorker.terminate();
92+
ccxtWorker = undefined;
93+
}
94+
}
95+
</script>
96+
</body>
8597
</html>

‎examples/html/webworker/worker.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
self.importScripts('ccxt.browser.js');
1+
self.importScripts('https://unpkg.com/[email protected]/dist/ccxt.browser.js');
22

33
console.log("Loaded ccxt version:", self.ccxt.version);
44

55
var exchangeInstance = undefined;
66

7-
7+
// handler of received messages
88
self.onmessage = async function handler(msg) {
99
await handleMessageFromMain(msg)
1010
}
1111

12+
// get messages from the main script
1213
async function handleMessageFromMain(msg) {
1314
console.log(msg.data);
1415
var [exchange, symbol, interval] = msg.data;
1516
console.log('Worker received:', symbol,exchange, interval)
1617
interval = parseInt(interval)
1718
await processTicker(symbol, exchange)
19+
// schedule process ticker execution
1820
setInterval (async () => {
1921
await processTicker(symbol, exchange)
2022
}, interval)
@@ -28,11 +30,14 @@ async function processTicker(symbol, exchangeId) {
2830
var symbol = result['symbol']
2931
var last = result['last']
3032
var timestamp = result['timestamp']
33+
var baseVolume = result['baseVolume']
3134
var ourTimestamp = Date.now()
32-
postMessage([symbol, last, timestamp, ourTimestamp]);
35+
// send the data back to the main script
36+
postMessage([symbol, last, baseVolume, timestamp, ourTimestamp]);
3337
}
3438

3539
async function fetchTicker(symbol){
40+
// use ccxt to fetch ticker info
3641
var result = await exchangeInstance.fetchTicker(symbol)
3742
return result;
38-
}
43+
}

0 commit comments

Comments
 (0)