Running the Application

You have now completed all the code needed for your real-time chat application. Run your application in Visual Studio by pressing Ctrl+F5, or if you are using Visual Studio for Mac, select Run > Start Without Debugging. If you are using Visual Studio Code, type the following command in the integrated terminal.

Code Listing 14

Once your application starts in your browser, copy the URL, open another instance of the browser, and paste the URL in the address bar.

Enter your username and type a message, as illustrated in Figure 26. Select Send Message.

Figure 26: Browser 1 Message

When you click the Send Message button, the message is immediately displayed in the list at the bottom of the browser page on browser 1. If you look at browser 2, illustrated in Figure 27, you will see the same message displayed in that browser.

Figure 27: Browser 2 Message Received

In browser 2, add the username Mark, type a reply for John in the Message field, and select Send Message.

Figure 28: Browser 2 Reply

As seen in Figure 28, the reply is displayed in the list, and on browser 1 (John’s browser), as seen in Figure 29.

Figure 29: Browser 1 Reply from Mark Received

Messages from other users are green, while messages that you type are blue. This logic is contained in the chat.js file that adds a class to the <li> element based on the current username.