From 262f1429d4bc1918fe4108149c99b9085796f29b Mon Sep 17 00:00:00 2001 From: curly Date: Wed, 15 Feb 2023 10:53:52 -0700 Subject: async, fetch() --- main.js | 246 +++++++++++++++++++++++++++++++--------------------------------- 1 file changed, 121 insertions(+), 125 deletions(-) diff --git a/main.js b/main.js index 1c7fba3..3ab8426 100644 --- a/main.js +++ b/main.js @@ -1,47 +1,31 @@ const messages = new Map(); const users = new Map(); -const host = window.location.protocol + "//" + window.location.host; let sent = false; +const host = location.protocol + "//" + location.host; + +// const xhttp_worker = new Worker("xhttp.js"); function xhttp_request(location) { - var xhttp = new XMLHttpRequest(); - var return_string; + let f = fetch(`${host}/api/${location}`); + return f.then((response) => response.json()); - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - // Typical action to be performed when the document is ready: - return_string = xhttp.responseText; - } - }; - xhttp.open("GET", `${host}/api/${location}`, false); - xhttp.send(); - - return JSON.parse(return_string); } function xhttp_post(location, json) { - var xhttp = new XMLHttpRequest(); - xhttp.open("POST", `${host}/api/${location}`, false); - xhttp.setRequestHeader("Content-Type", "application/json") - - - var return_string; + let f = fetch(`${host}/api/${location}`, { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: json + }) - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - return_string = xhttp.responseText; - } - }; - - xhttp.send(json); - - return JSON.parse(return_string); + return f.then((response) => response.json()); } -function format_message(m) { + +async function format_message(m) { var s; - var sender = get_user_name(m.sender); + var sender = await get_user_name(m.sender); var sclass = ""; if (m.deleted) { @@ -72,21 +56,21 @@ function format_date(d) { function send() { var input = document.getElementById("input").value; - let user_id = get_user_from_name(); - - if (user_id == undefined) { - alert("User not found") - return undefined - } - - let message = JSON.stringify({"sender": user_id, "message": input}) - - var id = xhttp_post("send_message", message) - - get_message(id.Ok); - - document.getElementById("input").value = "" - sent = true + let user_id = get_user_from_name().then((user_id) => { + if (user_id == undefined) { + alert("User not found") + return undefined + } + + let message = JSON.stringify({"sender": user_id, "message": input}) + + var id = xhttp_post("send_message", message).then((id) => { + get_message(id.Ok); + + document.getElementById("input").value = "" + sent = true + }) + }); } function get_newest_cache_id() { @@ -106,68 +90,70 @@ function get_newest_cache_id() { // Returns message list function get_newest_messages() { - let newest_id = xhttp_request("get_message_id_newest"); - let newest_cache_id = get_newest_cache_id(); - - if (newest_id.Err) { - return - } else { - newest_id = newest_id.Ok - } - - - let final_array = []; - - if (newest_id == newest_cache_id) { - return - } - - if (newest_cache_id == undefined) { - let id = newest_id; - if (id - 25 < 0) { - get_message(0) + xhttp_request("get_message_id_newest").then(async (newest_id) => { + let newest_cache_id = get_newest_cache_id(); + + if (newest_id.Err) { + return } else { - get_message(newest_id - 25) + newest_id = newest_id.Ok } - return get_newest_messages() - } - if (newest_id > newest_cache_id) { - let delta = newest_id - newest_cache_id ; - if (delta > 25) { - let oldest = newest_id - 25; - let newest = delta; - - - let list = get_message_list(oldest, newest); - for (x of list.values()) { - final_array.push(x) - } - - newest_id = oldest; - if (oldest - 25 < 0) { - newest_cache_id = 0 + + let final_array = []; + + if (newest_id == newest_cache_id) { + return + } + + if (newest_cache_id == undefined) { + let id = newest_id; + if (id - 25 < 0) { + get_message(0) } else { - newest_cache_id = oldest - 25 + get_message(newest_id - 25) } + return get_newest_messages() } - } - - let list = get_message_list(newest_cache_id, newest_id) - for (x of list.values()) { - final_array.push(x) - } - - // Insert all values into the message map - for (x of final_array.values()) { - messages.set(x.id, x) - } - - chatwindow() + + if (newest_id > newest_cache_id) { + let delta = newest_id - newest_cache_id ; + if (delta > 25) { + let oldest = newest_id - 25; + let newest = delta; + + + let list = get_message_list(oldest, newest); + for (x of list.values()) { + final_array.push(x) + } + + newest_id = oldest; + if (oldest - 25 < 0) { + newest_cache_id = 0 + } else { + newest_cache_id = oldest - 25 + } + } + } + + let list = await get_message_list(newest_cache_id, newest_id) + for (x of list.values()) { + final_array.push(x) + } + + // Insert all values into the message map + for (x of final_array.values()) { + messages.set(x.id, x) + } + + chatwindow().then() + }); } -function get_message_list(oldest, newest) { - let req = xhttp_request(`get_message_list/${oldest}/${newest}`).Ok +async function get_message_list(oldest, newest) { + let data = await xhttp_request(`get_message_list/${oldest}/${newest}`).then(); + let req = data.Ok; return req } @@ -179,45 +165,51 @@ function get_message(id) { } // Get message - let msg = xhttp_request("get_message/" + id).Ok; - messages.set(msg.id, msg) - - let dom = to_dom(format_message(msg)); - - chatwindow(msg.id) + xhttp_request("get_message/" + id).then((data) => { + if (data.Ok != undefined) { + let msg = data.Ok; + messages.set(msg.id, msg) + + chatwindow(msg.id) + } + }) } -function get_user_from_name() { +async function get_user_from_name() { let v = document.getElementById("username").value; - let cached; for (x of users.values()) { if (x.username == v) { return x.id } } - let user = xhttp_post("get_user_by_name", JSON.stringify(v)); + + let user = await xhttp_post("get_user_by_name", JSON.stringify(v)); if (user.Ok) { + users.set(user.id, user) return user.Ok.id } else { return create_user(v) } } -function create_user(username) { - let user = xhttp_post("create_user", JSON.stringify(username)); - return user.Ok +async function create_user(username) { + let user = await xhttp_post("create_user", JSON.stringify(username)).Ok; + users.set(user.id, user) + return user } -function get_user_name(id) { +async function get_user_name(id) { let cached = users.get(id) if (cached != undefined) { return cached.username } - let user = xhttp_request("get_user/" + id).Ok; + let data = await xhttp_request("get_user/" + id,); + let user = data.Ok; + users.set(user.id, user) return user.username @@ -230,7 +222,7 @@ function to_dom(x) { return dom } -function chatwindow(hash) { +async function chatwindow(hash = undefined) { let window = document.getElementById("chatwindow"); let pre_scroll = window.scrollHeight - window.clientHeight; window.innerHTML = ""; @@ -256,12 +248,14 @@ function chatwindow(hash) { old_date = date; window.append(to_dom(`${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`)) } - let dom = to_dom(format_message(v)) + let data = await format_message(v).then() + let dom = to_dom(data); - let node = window.appendChild(dom); - } + window.appendChild(dom); + } + if (window.scrollTop == pre_scroll) { if (latest_v != undefined && hash == undefined) { document.getElementById(v.id).scrollIntoView(); @@ -307,13 +301,15 @@ function clearnewlineinput() { } function onload() { - let server_info = xhttp_request(""); - document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users; + xhttp_request("").then((server_info) => { - // Get ready for websockets implementation in rocket_test 0.3 - if (server_info.version[2] < 3 ) { - const interval = setInterval(get_newest_messages, 1000); - } else { - // Initiate websocket "polling" - } + document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users; + + // Get ready for websockets implementation in rocket_test 0.3 + if (server_info.version[2] < 3 ) { + const interval = setInterval(get_newest_messages, 1000); + } else { + // Initiate websocket "polling" + } + }) } -- cgit v1.2.3