WebSocket API

• Learning Outcomes
• Resources
• Lab
  • Test WebSockets in Google Cloud Shell
• Assignment

Learning Outcomes

• describe the limitations of HTTP for real-time applications
• use polling to address those shortcomings
• implement a real-time application using the WebSocket API

Resources

• An Introduction to WebSockets
• slides

Lab

Video of this lab

Test WebSockets in Google Cloud Shell

Clone this project: https://gitlab.com/langarabrian/simple-chat2.git

Change to the project directory (cd simple-chat2) and install dependencies (npm install).

Run on port 8080 (PORT=8080 npm start), preview, and confirm that the application works.

Assignment

1. Fork this project: https://gitlab.com/langarabrian/fancy-chat2
2. Remove the fork relationship and make the project private.
3. Clone the project in the Google Cloud Shell environment.
4. Test the application and make sure you understand how it works.
5. In public/index.html add a couple of “button” elements just after line 11. Label one “Busy” and the other “Available”.
6. Add “onclick” event handlers to the buttons that will emit a new type of event called “status” that the server will deliver to all the other participants in the chat. For example, if I click on the “Busy” button, everyone else will see a log message “Brian is busy”. If I click on the “Available” button, everyone will see a log message “Brian is available”. Keep it simple, there is no need to track everyone’s status.
7. When you have it working, stage, commit, and push the changes to the repository.