Real-time Communication using Socket.IO 3.x and Angular 11.x

Name: Real-time Communication using Socket.IO 3.x and Angular 11.x
Rating: 4.3 (26 reviews)

Learn how to use Socket.IO 3.x library for RTC with Angular 11.x Client applications

Created byPravinkumar Dabade

Last updated 3/2021

English

What you'll learn

Basics of Socket IO library
Understand Socket IO Server and Client APIs
Understand the problems which you will face while building RTC applications and solutions for each problem
Database communication using Socket IO
How to broadcast messages when data is updated out of Socket IO applications
Learning Server and Client side Socket IO APIs by build number of applications using Express and Angular 9.x frameworks

Course content

4 sections • 59 lectures • 6h 48m total length

Introduction3:32
Learn real-time communication with socket.io 3.x and Angular 11.x, delivering live updates across multiple clients without polling through hands-on projects like livestock updates and a Margo DBI server app.
Who should take this course?2:25
Tools and Software required for this course1:31
Introduction to Socket.IO11:00
Explore socket.io, a real-time, bi-directional, event-based library for server-browser communication. It offers reliability, auto-reconnect, heartbeat, binary support, multiplexing, and room-based broadcasting via namespaces.
Let's understand Socket.IO API10:38
Explore the socket.io api for server and client, covering events, middleware, namespaces, rooms, emitting, and broadcasting messages between server and client.
Simple example of Socket.IO - Theory5:01
Develop a first socket io application with express js, creating a server that emits fake stock values for Apple, Google, and Microsoft to a browser client.
Demo - Simple example of Socket.IO13:39
Set up a Socket.IO server with Express, create a random stock values module, and emit Apple, Google, and Microsoft stock updates to clients every five seconds.
Creating client application using Angular 9.x - Theory5:48
Demo - Creating client application using Angular 9.x7:08
Demo - Writing service logic6:00
Demo - Writing component logic11:38
Do you see a problem?5:24
Explain why two clients show different stock values in a socket.io angular app due to separate connections and blocking vs non-blocking operations in Node.js, highlighting the event loop and timers.
Introduction to Namespace and Room5:03
Broadcast stock updates to all clients by using socket.io namespaces and rooms, creating a default / namespace and a stocks room joined by the angular service.
Modify Socket.IO server application6:57
Modify Socket.IO client application8:16
Final test of Fake stock update application2:13
Migrating Socket.IO 2.x to 3.x - Part - I8:36
Demo - Default Namespace Connection in Socket.IO - 2x7:00
this demo shows avoiding implicit connections to the default namespace in socket.io 3.x by connecting directly to the live namespace, with logs showing default namespace connection and live namespace connection.
Migrating Socket.IO 2.x to 3.x - Part - II2:54
Migrate socket.io 2.x to 3.x part II covers removing implicit default namespace, eliminating join/leave callbacks, and replacing with socket.on. Namespace.client's list becomes namespace.allSockets and returns a promise, with 11.x examples.
Demo - Migrating Simple example of Socket.IO Server3:14
Demo - Migrating Simple example of Socket.IO Client7:02
Demo - Default Namespace Connection in Socket.IO - 3x2:34
Demo - Default Namespace Connection client app in Socket.IO - 3x3:56

Application - we will develop2:57
Build a real-time online pizza order app with socket.io and a MongoDB server, using results and pizza orders collections to display live status and counts.
Introduction to Mongo DB2:56
Writing Mongo DB queries8:11
Learn to write MongoDB queries using the mongo shell: create databases and collections, insert multiple documents, and fetch data with find and findOne, using pretty for readable output.
Creating Socket.IO application using Express JS and Socket.IO - Part I15:09
Creating Socket.IO application using Express JS and Socket.IO - Part II11:16
Build a real-time socket.io pizza orders app by writing an aggregate group-by query on the pizza orders collection and broadcasting counts to the orders room in the pizza namespace.
Creating pizza order application using Angular 9.x6:34
Writing service logic12:54
Writing component logic - Part - I15:36
Add an Angular component integrated with a Socket.IO service, fetch documents via an observable, and display them in a table with images and currency formatting.
Writing component logic - Part - II11:31
Final output of the application3:45
What problem we may face?2:04
Migrating Pizza Order Service from Socket.IO 2.x to Socket.IO 3.x2:37
Migrating Pizza Order UI from Socket.IO 2.x to Socket.IO 3.x3:22
Migrate the pizza order ui from socket.io 2.x to 3.x in an angular 11 app, update the client package and services, and adopt new observable syntax to verify real-time updates.

How to solve the problem?8:36
Writing Mongo DB queries7:08
Creating REST API using Node JS and Express JS framework7:47
Writing data access logic in REST API9:06
Consuming DAL in REST API and defining route9:36
Configure two routes in an Express router to fetch all Angular questions and post votes, using a data access layer and middleware.
Creating end user Voting application using Angular 9.x3:11
Create a client front end using Angular, enable routing, choose the default css, and integrate Bootswatch Bootstrap styles for the end user voting app.
Add Voting module, service,components and model classes3:51
Writing service logic9:39
Write the service logic by configuring the http client, injecting it into a world service, and connecting to rest endpoints to fetch questions via an observable and post world data.
Writing component logic13:29
Let's look at SPA code6:55
Explore the single page application structure with a home component and a navigation menu, using lazy loading, routes, and a router outlet to load modules.
Configure route and Navigation link9:47
Creating Socket.IO application using Express JS and Socket.IO - Part I11:12
Create a socket.io server with express to stream real-time vote aggregates from MongoDB change streams and push updates to the Angular client for display with high charts.
Creating Socket.IO application using Express JS and Socket.IO - Part II8:02
Build an express and socket.io app that runs an aggregate query on the angular warts collection, grouping by technology name and emitting results to the dashboard namespace, with change streams.
Creating in-house Dashboard application using Angular 9.x4:26
Add Dashboard module, Service and Dashboard Component1:48
Writing service logic5:20
Let's look at SPA code4:35
Explore the single-page application code for the client dashboard, including the home module, dashboard home component, navigation module, dashboard menu component, bootstrap menu, and the router outlet in Angular routing.
Introduction to Highcharts library9:33
Visualizing Technology votes using Highcharts chart14:55
Configure route and Navigation link5:30
Final Test of the solution with KPI Chart8:25
Migration Challenge2:54

Requirements

Good knowledge of Angular 7/8.x and should have experience of building REST APIs using Express framework
Basic understanding of Bootstrap framework [Optional]

Description

Have you ever thought of building real-time communication applications for your clients or in your organization? Are you tired of writing the same old long polling logic to get the updates from your databases? Do you want to share live updates of the data across two or more than two applications? Do you work with live stocks or tweets kind of applications?

As you know our clients or customers would like to get quick and live updates of the information like stocks, currencies, the sales data, tweets etc. Or they want to build live collaborative applications for the customers/in-house applications. This is where we can think of Real-time Communication and we can achieve that using one of the most popular library Socket.IO. Easy to learn and easy to implement.

This course is a complete hands-on course where we will take few real-time scenarios and develop several applications step-by-step. At the end of this course, you will have better understanding of Socket.IO library and you will be able use this library to build RTC applications.

Update - This course has been updated to Socket.IO 3.x and Angular 11.x

All the examples of this course has been updated from Socket.IO 2.x to Socket.IO 3.x. Also, all the client applications have been migrated from Angular 9.x to Angular 11.x.

Who this course is for:

Students who want to learn Real-time communication using Socket IO library to enable various scenarios in their applications
Students who want to understand why, where and how to use Socket IO library using various examples

Real-time Communication using Socket.IO 3.x and Angular 11.x

What you'll learn

Explore related topics

Course content

Introduction23 lectures • 2hr 21min

Let's order Pizza13 lectures • 1hr 39min

Developing Technology Voting Real-time Dashboard22 lectures • 2hr 46min

Course Conclusion1 lecture • 3min

Requirements

Description

Who this course is for: