Creating a multiroom chat application
Let's take a brief refresher on the basic Chat App that we built during the course of the previous chapter:
This app effectively sets up a connection to the WebSocket server and lets us talk to random strangers who, for some reason, are loitering in the kitchen and using the Wi-Fi connection. What we want to do here is give these strangers (and ourselves) the possibility to pick separate chat rooms depending on what they are keen to talk about. Since we love programming, programming languages are of course going to be the be-all-and-end-all of what is on the menu.
Configuring the basic layout
In order to create a nice way to navigate between different chat rooms, we will use a tabbed layout, where each tab will correspond to a single chat room.
This means that we will need to make several changes to our HTML as well as the routing for our app. Start out by modifying the index.html
file. Make sure that it looks like the following:
<!DOCTYPE html>...