Creating a Feedback App with React and WebSockets

Web applications today are fast-moving, multi-user experiences. Things change all the time by people using the same resources. What happens if someone makes a change to a file someone else is also editing? The updates would need to be pushed out to everyone else involved.

React is great at... well, reacting to things. It doesn't matter where those changes come from. We can update the application from a WebSocket for example and watch those updates trickle in. If you pick up the latest edition of Web Designer, we go through exactly how to do that.

React is just a view layer - the way it looks is just an interpretation of the state that sits within that app. Typically we pass it data through requests to a server. The client makes a request, the server computes it and sends it back.

We can also pass that data in through WebSockets. These are little pipes of information between a server and one or more other clients. One client would send some kind of message to the server, which would compute that request and send out a result back to it as well as any other concerned parties, including other clients.

In the tutorial we build a real-time feedback application, much like you would find in a Mad Sad Glad project retrospective. Users log in, provide a username and provide feedback under happy and sad columns. As they do so, other connected clients get those updates too and can start rating the ones they agree with. The ones rated highest rise to the top.

Not only are we building the React front end, we also dip into building WebSockets in Node using the ws package.

Pick up a copy if you're interested. It's a nice little app that can be used for a bunch of different things. You can stick it on any device, even an Xbox on a nice big TV!