Tech bro day 5: Tic Tac Toe (real time and live deployment)

Still behind today, but I’ve deployed my game live on Render! Ready for my class demo tomorrow. :) It still looks tragic, especially on a desktop. I was designing the game purely for iPhone SE the whole time, so I didn’t realize the lobby stretched so much lmao.

I’ll give the URL after I implement the game properly. As it is, I want to prevent potential problems e.g. on the extremely off chance my Tic Tac Toe game goes viral, it will crash hardcore. I’d rather not get kicked off the Render platform because they’re one of the only Cloud platforms with a free deployment tier!

Real-time updates is a rather complex problem to solve. If the same game is shown on two tabs or two browsers, how will the tabs/browsers know that a move occurred on the other tab/browser? Browsers speak HTTP to the server, but HTTP is strict about requests & responses. It won’t allow an open-channel of communication from browser to browser. The proper solution to this is websockets - which I still need to learn about over the weekend. Since I was pressed for time, I did a cheat implementation of real-time with polling aka using setInterval in React to constantly ping the server for updates every 1 sec. So the server is still ricocheting fast updates between two browsers constantly, instead of what it should do with websockets, which lets the server push updates only when there are actually updates.

Deployment is an equally hard problem to solve. In this case, because our app architecture is simple enough (we don’t even have a database yet!), we can abstract away a lot of steps by deploying with a service like Render, Sevalla, even Vercel and Netlify. We’ll learn how to properly deploy apps in the upcoming weeks, along with using databases.

I’ll learn about websockets as extra homework over the weekend to truly catch up, and maybe I’ll spruce up the styling too.