WebSocket Communications with Node and Angular

Course details

If you come across a web page that updates in real time, you’re probably seeing WebSocket at work. Unlike the request and response protocol of HTTP, WebSocket allows for real-time, two-way communication, and learning how to use it will help you to develop more useful and engaging software. In this course, Patrick Siewe teaches you just what WebSocket is and what it can do, by guiding you through the creation of an app for live chatting from end to end. First, he guides you through building the backend server in NodeJS, coded with TypeScript. Then, he shows how to build the front end as a very simple Angular application, also coded in TypeScript. As everything around us gets more connected and interactive, being skilled in WebSocket can only make you more marketable and valuable to current or future employers, so join Patrick in this course to get started on mastering WebSocket.

Concepts

0. Introduction

01 - What are WebSockets
02 - Preview the chat app we will build together
03 - What you should know

1. Environment - TypeScript, Node, and Angular

04 - How to clone the code at any stage
05 - Create shared datatypes library
06 - Create the Node.js service
07 - Create the client Angular application
08 - Review the project structure
09 - Add the WebSocket server to Node.js

2. Stand Up a WebSocket Service

10 - Receive your first WebSocket connection
11 - Manage multiple connected users
12 - Standardize WebSocket message shape
13 - Broadcast new chat message to all
14 - Challenge - Notify all when a new user connects
15 - Solution - Notify all when a user connects

3. Build the UI with Angular

16 - A quick look at Angular
17 - Set up the chat component
18 - Prototype the chat UI
19 - Add the connection UI

4. Turn On WebSockets in the UI

20 - Simulate authentication on new connections
21 - Connect the web app to the socket
22 - Start chatting
23 - Challenge - Show notification when user enters or leaves
24 - Solution - Show notification when user enters or leaves
25 - Challenge - Show list of connected users
26 - Solution - Show list of connected users

Conclusion

27 - Next steps