Modern Full-Stack React Projects

14

Creating a Frontend to Consume and Send Events

After successfully creating a Socket.IO backend in the previous chapter, and doing our first experiments with the Socket.IO client, let’s now focus on implementing a frontend to connect to the backend and consume and send events.

We are first going to clean up our project by removing files from the previously created blog app. Then, we are going to implement a React Context to initialize and store our Socket.IO instance, making use of the existing AuthProvider to provide the token for authenticating with the backend. After that, we are going to implement an interface for our chat app and a way to send chat messages, as well as displaying received chat messages. Finally, we are going to implement ...