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 chat commands with acknowledgments to show which rooms we are currently in.
In this chapter, we are going to cover the following main topics:
- Integrating the Socket.IO client with React
- Implementing chat functionality ...