Group Assignment - Networking
For this week's group assignment, we connected Sun's networking project to Matti's networking project.
Matti added an endpoint to his server setup that accepts text. This text is then converted to a 200x200px image that the e-ink screen that he has connected to an ESP32 via SPI can display.
Matti's setup is polling his server setup every 4s for a new image and if one exists, the screen will refresh and show the new image. There is more documentation on his personal page linked above.
Sun's game produces a score that can be visualized. He has more information on his personal page linked above. When the score updates, he sends the new value to the endpoint. The screen in Matti's project refreshes accordingly.
Below, we show a video (playing at 4x) of Sun's web UI which sends the score via JavaScript. We also show a video of the score showing up correctly on Matti's display.
During the networking setup, we encountered various errors when Sun's browser attemps to communicate with Matti's server.
The first error is Cross-Origin Resource Sharing (CORS) error. Matti's server was not configured to accept an API key from the domain in which Sun's browser app runs.
When addressing the first error, we encountered a second error where we set the allowed domain twice: once inside the Flask web app, and second time in the Caddy server.
Matti was able to address both errors by updating the server config. He describes the process on his personal page linked above. In short, the X-API-Key header had to be allowed in his Caddy setup, and ONLY there. Adding CORS handling to the flask app itself, resulted in the problem of handling it twice.
Yes, we leaked the API Key in one of the pictures above. Yes, we rotated the key. Don't even try ;)