WebSocket Communications with Node and Angular

Learn how to use WebSocket by building a chat up from scratch.

Introduction

• What are WebSockets?
• Preview the chat app we will build together
• What you should know

1. Environment: TypeScript, Node, and Angular

• How to clone the code at any stage
• Create shared datatypes library
• Create the Node.js service
• Create the client Angular application
• Review the project structure
• Add the WebSocket server to Node.js

2. Stand Up a WebSocket Service

• Receive your first WebSocket connection
• Manage multiple connected users
• Standardize WebSocket message shape
• Broadcast new chat message to all
• Challenge: Notify all when a new user connects
• Solution: Notify all when a user connects

3. Build the UI with Angular

• A quick look at Angular
• Set up the chat component
• Prototype the chat UI
• Add the connection UI

4. Turn On WebSockets in the UI

• Simulate authentication on new connections
• Connect the web app to the socket
• Start chatting
• Challenge: Show notification when user enters or leaves
• Solution: Show notification when user enters or leaves
• Challenge: Show list of connected users
• Solution: Show list of connected users

Conclusion

• Next steps