Skip to content

Commit

Permalink
add file
Browse files Browse the repository at this point in the history
  • Loading branch information
@veke
veke authored Nov 7, 2024
1 parent 88907de commit d42ac2b
Showing 1 changed file with 153 additions and 0 deletions.
153 changes: 153 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Request test</title>
<style>html{font-size:14px}body{font-family:-apple-system}button{min-width:155px;font-size:1rem;padding:0 1rem;height:40px;border-radius:50px;border:none;background:#cacaca;color:#0a0a65;cursor:pointer}button:disabled{opacity:50%;cursor:default}.container{display:flex;border:1px solid #dadada;padding:20px 10px;margin-bottom:40px}.button-container{margin-bottom:15px;display:flex;align-items:center;justify-content:center;gap:10px}.response-container{margin:10px 0;display:flex;align-items:center;gap:10px}</style>
</head>
<body>
<h1>Request test</h1>
<div class="container">
<div style="flex: 50%;">
<div class="button-container">
<div>
<button id="xhr-poll-button">Start XHR polling</button>
<button hidden id="stop-xhr-poll-button">Stop XHR polling</button>
<button id="xhr-button">Single XHR request</button>
</div>
</div>
<div>
<div style="text-align: center;"><span hidden id="xhr-ongoing" style="height: 24px;"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3" opacity="1"><animate id="spinner_qYjJ" begin="0;spinner_t4KZ.end-0.25s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="12" cy="12" r="3" opacity=".4"><animate begin="spinner_qYjJ.begin+0.15s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="20" cy="12" r="3" opacity=".3"><animate id="spinner_t4KZ" begin="spinner_qYjJ.begin+0.3s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle></svg></span></div>
<div>Responses: <span id="xhr-responses"></span></div>
<div id="xhr-polling" hidden>
<div class="response-container">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>
<div>Waiting for response</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div style="flex: 50%;">
<div class="button-container">
<div>
<button id="fetch-poll-button">Start fetch polling</button>
<button hidden id="stop-fetch-poll-button">Stop fetch polling</button>
<button id="fetch-button">Single fetch request</button>
</div>
</div>
<div>
<div style="text-align: center;"><span hidden id="fetch-ongoing" style="height: 24px;"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3" opacity="1"><animate id="spinner_qYjJ" begin="0;spinner_t4KZ.end-0.25s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="12" cy="12" r="3" opacity=".4"><animate begin="spinner_qYjJ.begin+0.15s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle><circle cx="20" cy="12" r="3" opacity=".3"><animate id="spinner_t4KZ" begin="spinner_qYjJ.begin+0.3s" attributeName="opacity" dur="0.75s" values="1;.2" fill="freeze"/></circle></svg></span></div>
<div>Responses: <span id="fetch-responses"></span></div>
<div id="fetch-polling" hidden>
<div class="response-container">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>
<div>Waiting for response</div>
</div>
</div>
</div>
</div>
</div>
<script>
let ongoingXhrRequest;
let xhrTimeout;
let fetchTimeout;
let xhrResponseCounter = 1;
let fetchResponseCounter = 1;
let abortController;

const ENDPOINT = 'https://httpbin.org/get'
const INTERVAL_MS = 3000;
const xhrResponsesElem = document.querySelector('#xhr-responses');
const fetcResponsesElem = document.querySelector('#fetch-responses');
const xhrPolling = document.querySelector('#xhr-polling');
const xhrOngoing = document.querySelector('#xhr-ongoing');
const fetchPolling = document.querySelector('#fetch-polling');
const fetchOngoing = document.querySelector('#fetch-ongoing');
const xhrButton = document.querySelector('#xhr-button');
const xhrPollButton = document.querySelector('#xhr-poll-button');
const stopXhrPollButton = document.querySelector('#stop-xhr-poll-button');
const fetchButton = document.querySelector('#fetch-button');
const fetchPollButton = document.querySelector('#fetch-poll-button');
const stopFetchPollButton = document.querySelector('#stop-fetch-poll-button');

const xhrRequest = (poll = true) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
xhrPolling.hidden = true;
xhrPollButton.disabled = false;
xhrResponsesElem.textContent = xhrResponseCounter++;
if (poll) { xhrTimeout = setTimeout(() => xhrRequest(), INTERVAL_MS); }
}
};
xhr.onerror = (e) => console.error('Error: ', e);
xhr.ontimeout = (e) => console.error('Timeout: ', e);
xhr.open('GET', ENDPOINT);
xhr.send();
ongoingXhrRequest = xhr;
xhrPolling.hidden = false;
};

const fetchRequest = (poll = true) => {
fetchPolling.hidden = false;
abortController = new AbortController();
const signal = abortController.signal;
fetch(ENDPOINT, { signal }).then(() => {
fetchPollButton.disabled = false;
fetchPolling.hidden = true;
fetcResponsesElem.textContent = fetchResponseCounter++;
if (poll) { fetchTimeout = setTimeout(() => fetchRequest(), INTERVAL_MS) }
}).catch((error) => console.error('Error: ', error));
};

xhrButton.addEventListener('click', () => {
xhrPollButton.disabled = true;
xhrRequest(false);
});

xhrPollButton.addEventListener('click', () => {
xhrRequest();
xhrPollButton.hidden = true;
stopXhrPollButton.hidden = false;
xhrOngoing.hidden = false;
xhrButton.disabled = true;
});

stopXhrPollButton.addEventListener('click', () => {
clearTimeout(xhrTimeout);
ongoingXhrRequest.abort();
xhrPollButton.hidden = false;
stopXhrPollButton.hidden = true;
xhrPolling.hidden = true;
xhrOngoing.hidden = true;
xhrButton.disabled = false;
});

fetchButton.addEventListener('click', () => {
fetchPollButton.disabled = true;
fetchRequest(false);
});

fetchPollButton.addEventListener('click', () => {
fetchRequest();
fetchPollButton.hidden = true;
stopFetchPollButton.hidden = false;
fetchOngoing.hidden = false;
fetchButton.disabled = true;
});

stopFetchPollButton.addEventListener('click', () => {
clearTimeout(fetchTimeout);
abortController.abort();
fetchPollButton.hidden = false;
stopFetchPollButton.hidden = true;
fetchPolling.hidden = true;
fetchOngoing.hidden = true;
fetchButton.disabled = false;
});
</script>
</body>
</html>

0 comments on commit d42ac2b

Please sign in to comment.