Add WispServerTiming.ts, begin work on a dropdown that shows wisp servers and their ping

This commit is contained in:
wearrrrr 2024-07-25 22:15:11 -05:00
parent c9843beae5
commit 35c167503d
5 changed files with 106 additions and 36 deletions

View file

@ -29,6 +29,11 @@ const transportsList = [
{ name: "Libcurl", value: "/libcurl/index.mjs" },
{ name: "Bare", value: "/baremod/index.mjs" },
];
const wispURLList = [
{ name: "Alu (US)", value: "wss://aluu.xyz/wisp/" },
{ name: "Nebula (US)", value: "wss://nebulaproxy.io/wisp/" }
];
---
<div class="settings-container">
@ -45,8 +50,8 @@ const transportsList = [
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
</div>
<div class="setting__wisp_url">
<label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
<Input height="50px" inputName="wisp-url" />
<label aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
<Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
</div>
<div class="setting__bare_url">
<label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>

View file

@ -0,0 +1,49 @@
export async function testWispServers(servers: WispServer[]): Promise<WispData[]> {
let wispData: WispData[] = [];
for (const server of servers) {
let start = performance.now();
try {
await new Promise((resolve, reject) => {
let socket = new WebSocket(server.url);
socket.onopen = () => {
let end = performance.now();
console.log(`Connected to ${server.url} in ${end - start}ms`);
let data = {
server: server,
time: end - start
};
wispData.push(data);
socket.close();
resolve(null);
};
socket.onerror = (error) => {
reject(error);
};
});
} catch (error) {
console.error(`Failed to connect to ${server.url}`, error);
}
}
if (wispData.length === servers.length) {
return wispData;
} else {
throw new Error('Failed to connect to all servers');
}
}
window.wispData = await testWispServers([
{
url: 'wss://aluu.xyz/wisp/'
},
{
url: 'wss://nebulaproxy.io/wisp/'
},
])
console.log(window.wispData);

View file

@ -60,6 +60,7 @@ export function getStaticPaths() {
</div>
</div>
</section>
<script src="@components/ts/WispServerTiming.ts"></script>
</main>
<ProxyRegistrar />
<script>

View file

@ -63,12 +63,12 @@ export function getStaticPaths() {
};
</script>
<script is:inline>
loadedContentStorage = {};
window.currentlySelectedTab;
let loadedContentStorage = {};
let currentlySelectedTab;
function settingsLoad() {
document.addEventListener("astro:before-swap", () => {
// Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
window.currentlySelectedTab = "";
currentlySelectedTab = "";
document.removeEventListener("setting-tabChange", determineListener);
});
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
@ -84,8 +84,8 @@ export function getStaticPaths() {
});
function loadContent(tabID) {
if (window.currentlySelectedTab == tabID) return;
else window.currentlySelectedTab = tabID;
if (currentlySelectedTab == tabID) return;
else currentlySelectedTab = tabID;
let currentContent = document.getElementById("current-content");
if (currentContent) {
currentContent.style.opacity = "0";
@ -177,16 +177,19 @@ export function getStaticPaths() {
}
}
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
Array.from(item.children).forEach((item) => {
item.onclick = () => {
function applyDropdownEventListeners(dropdown, optionalCallback) {
let dropdownSibling = document.getElementById(dropdown.id + "-menu");
let localStorageItem = dropdown.dataset.localStorageKey;
Array.from(dropdownSibling.children).forEach((child) => {
child.onclick = () => {
let localStorageItemContent = {
name: item.innerText,
value: item.dataset.setting,
name: child.innerText,
value: child.dataset.setting,
};
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
applySavedLocalStorage(localStorageItem, dropdownID);
closeDropdown(item.parentElement.id);
applySavedLocalStorage(localStorageItem, dropdown.id);
closeDropdown(dropdownSibling.id);
if (typeof optionalCallback == "function") {
optionalCallback();
}
@ -233,10 +236,11 @@ export function getStaticPaths() {
}
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
let languageDropdown = document.getElementById("dropdown__selected-language-menu");
applyDropdownEventListeners(themeDropdown, "dropdown__selected-theme", "alu__selectedTheme", changeTheme);
applyDropdownEventListeners(languageDropdown, "dropdown__selected-language", "alu__selectedLanguage", navigateToNewLangaugePage);
let themeDropdown = document.getElementById("dropdown__selected-theme");
let languageDropdown = document.getElementById("dropdown__selected-language");
applyDropdownEventListeners(themeDropdown, changeTheme);
applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
};
}
@ -328,37 +332,38 @@ export function getStaticPaths() {
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
let openWithDropdown = document.getElementById("dropdown__open-with-menu");
let currentTransportDropdown = document.getElementById("dropdown__transport-menu");
// Dropdowns
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
let searchEngineDropdown = document.getElementById("dropdown__search-engine");
let openWithDropdown = document.getElementById("dropdown__open-with");
let currentTransportDropdown = document.getElementById("dropdown__transport");
let wispURLDropdown = document.getElementById("dropdown__wisp-url");
// Inputs
let searxngUrlInput = document.getElementById("searxng-url-input");
let wispURLInput = document.getElementById("wisp-url-input");
let bareURLInput = document.getElementById("bare-url-input");
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
if (savedSearxngUrl != null) {
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
}
const useWss = location.protocol == "https:";
const webSocketProtocol = useWss ? "wss://" : "ws://";
let savedWispUrl = localStorage.getItem("alu__wispUrl");
if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
// const useWss = location.protocol == "https:";
// const webSocketProtocol = useWss ? "wss://" : "ws://";
// let savedWispUrl = localStorage.getItem("alu__wispUrl");
// if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
let savedBareUrl = localStorage.getItem("alu__bareUrl");
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
wispURLInput.value = localStorage.getItem("alu__wispUrl");
bareURLInput.value = localStorage.getItem("alu__bareUrl");
// Proxy settings
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
applyInputListeners(wispURLInput, "alu__wispUrl");
applyInputListeners(bareURLInput, "alu__bareUrl");
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown].forEach((dropdown) => {
let dropdownButton = document.getElementById(dropdown.id.replace("-menu", ""));
applyDropdownEventListeners(dropdown, dropdownButton.id, dropdownButton.dataset.localStorageKey);
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
applyDropdownEventListeners(dropdown);
});
applyDropdownEventListeners(searchEngineDropdown, "dropdown__search-engine", "alu__search_engine", checkSearxng);
applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
checkSearxng();
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
applyInputListeners(bareURLInput, "alu__bareUrl");
} else if (event.detail == "setting-tab-customization") {
setupCustomizationSettings();
} else if (event.detail == "setting-tab-cloaking") {

10
src/types.d.ts vendored
View file

@ -12,6 +12,7 @@ interface Window {
URLPattern: URLPattern | null;
// Why is this not already on Window?
eval(string): void;
wispData: WispData[];
}
type ExtType = "serviceWorker" | "theme" | "page";
@ -67,3 +68,12 @@ type GameMetadata = {
type GameList = {
[key: string]: GameMetadata;
};
type WispServer = {
url: string,
}
type WispData = {
server: WispServer,
time: number,
}