This post is a high-level explanation of an interesting stack I helped engineer recently. We created an app that helps users sell power to other users by renting outlets. We also thought it would be interesting to show the user, in real-time, the power usage and dollar amount owed as the usage increased.
In the image I designed above, I lay out our most common use-case. A food truck using our app would like to plug into an outlet for the day, rather than using an expensive generator.
The user logs into the app to find outlets nearby, and reserve one. The user can press “on” to turn the outlet on. The front-end of the app, built in React and Flux with Bootstrap and Less for styling, sends a POST request to the Connect.us server. The server begins a transaction in the MySQL database, and then if the transaction is valid (the user is logged in, payment information is stored, etc), a POST request is sent to the worker server.
The worker server runs a bash command through shell.js to interact with the Ruby program on the outlet power monitor, turns it on, and begins recording data. The data is sent via a POST request every 10 seconds to the Connect.us server. The initial POST request opens up a new socket between the front and back end of the server, allowing for subsequent posts to quickly move into React, triggering a re-render and showing the user live data. Our food truck owner is able to see how much power his truck is using, and how much he will be paying!