webperf3.js - Client-side scripts for the webperf3 web app¶
Misc¶
Convert a date in seconds to a string.
Given text, escape it so it formats correctly as HTML. Taken from https://stackoverflow.com/a/48054293. Note that this also transforms newlines into <br>
– see https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent.
Compare two arrays with scalar contents from SO. Insert snarky comment about JavaScript as a programming language here.
Update the performance table¶
Fetch an updated table from the server.
Create the new table.
The try/catch will succeed if there’s nothing in local storage, but end up with a value of null. Replace this with an empty array.
old_iperf3_data = old_iperf3_data || [];
let html = `
<tr>
<th>Port</th>
<th style="width: 15rem">Name</th>
<th style="width: 10rem">Timestamp</th>
<th style="width: 10rem">Send rate (bps)</th>
<th style="width: 10rem">Receive rate (bps)</th>
</tr>`;
iperf3_data.forEach((row, index) => {
html += `
<tr ${
scalar_array_equals(old_iperf3_data[index] || [], row)
? ""
: "style='background-color:lightcoral;'"
}>
<td>${index + 5201}</td>
<td>${escapeHTML(row[3])}</td>
<td>${formatDate(row[0])}</td>
<td>${formatRate(row[1])}</td>
<td>${formatRate(row[2])}</td>
</tr>`;
});
window.localStorage.setItem(
"iperf3-data",
JSON.stringify(iperf3_data)
);
Update the resulting HTML.
Websocket¶
A function to update the connection status of the webpage.
Create a websocket to communicate with the CodeChat Server.
When connected, update the webpage’s connection status.
Provide logging to help track down errors.
When disconnected, update the webpage’s connection status.
Handle messages, which is always new contents for the perf table.