Home WebSocket API
WebSocket API

WebSocket API

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



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.


  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.