wshine dev diary - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki
Neural network activity 2024-04-03
blocking actions can be done asynchronously in order to allow other requests to process and working on the 'blocking task' when free.
I believe this is multi threaded or parallel but the async task is able to be worked on while the the process is free.
when using async functions promises are returned. promises signify that we are not waiting for the return result to arrive but giving a 'promise' that it will arrive. 026531
while following the video I ran into problems using require statements when
my project was of type module and mostly used import syntax.
The way i solved this was installing babel along side jest
and configuring babel as documented at jest setup.
the videos touch on writing unit tests on individual functions and manually creating
request and response objects, but does not demonstrate how to use modules to
create these objects for you. I found this difficult and had a much easier time just
creating unit tests that make http requests to specific routes using supertest.
ws server has to have definition for events: message, error, close. client has to have definition for events: message, close, open.
websockets can be defined with its own route, i decided to just pass the current express server as an argument to the creation of a web socket server. so any http upgrade request send to "/" will handled by the websocket server.
currently using two hashmaps.
games Map<String, Set<String>> key being the gameid, value being a set of client ids.
clients Map<String, WebSocket> key being the client id, value being that clients socket.
Not sure if this a the best approach since as clients disconnect we will be constantly removing and inserting items into the map. The decision of using maps/set was for ease of looking up which clients to relay messages to, and ease of retrieveing that clients socket to actual send them a message.
encountering an error when running the server on aws using an SSL cert. I believe there was an issue with my nginx config causing this, but I do not know what change fixed it. I tried back tracking to reproduce the problem and have not been able to.
now that websockets are working over https, I've noticed websockets diconnect after a few minutes of idle activity. I believe this is normal behaviour for websockets and to avoid this I would have to specify a longer timeout duration (if thats possible). Alternatively and perhaps a better approach is to make use of ping/pong messages in order to keep the connection alive.
const login_button = document.getElementById("submit");
const username = document.getElementById("input-username");
const password = document.getElementById("input-password");
login_button.addEventListener("click", async (event) => {
event.preventDefault();
console.log(username.value);
console.log(password.value);
const res = await fetch("login", {
"method": "POST",
"headers": {
"Content-Type": "application/json",
},
"body": JSON.stringify({"username": username.value, "password": password.value}),
});
const data = await res.json();
console.log(res.status);
if (res.status === 200) {
localStorage.setItem("token", data["token"]);
localStorage.setItem("userid", data["id"])
console.log(localStorage.getItem("token"));
console.log(localStorage.getItem("userid"));
ws.user_id = data["id"];
console.log(ws.user_id);
activateGameForm();
}
});I believe the relevent lines are 102-116 as an example of making a post request
to the login route. There are some other examples in that file of making get requests to
protected routes using the jwt obtained from a succesful login.
The file linked to was an example built while developing the server and trying to think
about how my routes might work from the frontend perspective and what additional routes could be useful.
I think one route that i decided to include in the final version based on my experience working through this example
was the api/game-history route that would return all games that a user had participated in.
This could be useful if we wanted to add some sort of profile page for users to see their stats from previously played games.
login form
successful login
selecting a game from listbox
I believe this example could be improved to use absolute paths for the requests made. Since the page the requests are being made from is /example. I would expect these relative paths to actually resolve to /example/api/... which should return 404. but they do not and I'm unsure why.
