Up next in 10
Real-Time Communication with Azure SignalR Service - Azure Essentials Series - Ep: 14
0 views
Aug 6, 2025
In Episode 14 of the Azure Essentials Series, we dive into the Azure SignalR Service, a managed service for adding real-time web functionalities to your applications. Discover how to leverage SignalR's capabilities to enable server-client communications with ease. This episode is designed for web developers, app developers, and solution architects looking to implement dynamic, responsive, and scalable real-time features in their projects. During the episode, we'll cover: Introduction to Azure SignalR Service • Overview of real-time web applications - Benefits and use cases of using Azure SignalR Service - Core Concepts and Architecture • Hubs and Connections - Scaling and Performance Considerations - Getting Started with Azure SignalR Service • Setting up an Azure SignalR Service instance - Integrating SignalR into your application - Implementing Real-Time Features • Broadcasting messages to connected clients - Handling client-server communication in real time
View Video Transcript
0:01
[Music]
0:19
[Music]
0:34
hi this is your host habiban and welcome
0:38
hi this is your host habiban and welcome
0:38
hi this is your host habiban and welcome to my show a your essential Series in
0:41
to my show a your essential Series in
0:41
to my show a your essential Series in today episode we will talk about a your
0:43
today episode we will talk about a your
0:43
today episode we will talk about a your signal or
0:45
signal or
0:45
signal or service Azor signal service is a fully
0:48
service Azor signal service is a fully
0:48
service Azor signal service is a fully managed realtime messaging service that
0:51
managed realtime messaging service that
0:51
managed realtime messaging service that simplifies the process of adding
0:53
simplifies the process of adding
0:53
simplifies the process of adding realtime web functionality to your
0:56
realtime web functionality to your
0:56
realtime web functionality to your applications it allows you to publish
0:58
applications it allows you to publish
0:58
applications it allows you to publish content dates to Connected clients in
1:01
content dates to Connected clients in
1:01
content dates to Connected clients in real time without having to maintain a
1:04
real time without having to maintain a
1:04
real time without having to maintain a persistent connection between the client
1:07
persistent connection between the client
1:07
persistent connection between the client and server manually this Services built
1:10
and server manually this Services built
1:10
and server manually this Services built on the top of popular asp.net signal or
1:14
on the top of popular asp.net signal or
1:14
on the top of popular asp.net signal or framework and provides scalability
1:17
framework and provides scalability
1:17
framework and provides scalability performance and reliability making it
1:19
performance and reliability making it
1:20
performance and reliability making it easy to build interactive applications
1:22
easy to build interactive applications
1:23
easy to build interactive applications like chat apps live dashboards gaming
1:25
like chat apps live dashboards gaming
1:25
like chat apps live dashboards gaming backends and more so let's start this
1:31
backends and more so let's start this
1:31
backends and more so let's start this this is the agenda of our today episode
1:34
this is the agenda of our today episode
1:34
this is the agenda of our today episode uh we will talk about uh overview of
1:36
uh we will talk about uh overview of
1:36
uh we will talk about uh overview of realtime web applications we will
1:38
realtime web applications we will
1:38
realtime web applications we will discuss key components of a your signal
1:40
discuss key components of a your signal
1:40
discuss key components of a your signal R service and we will also have uh few
1:45
R service and we will also have uh few
1:45
R service and we will also have uh few popular use cases about signal R and
1:49
popular use cases about signal R and
1:49
popular use cases about signal R and then at the end we will have a handsone
1:52
then at the end we will have a handsone
1:52
then at the end we will have a handsone experience uh using signal R service
1:55
experience uh using signal R service
1:55
experience uh using signal R service with asp.net core uh web application
2:00
with asp.net core uh web application
2:00
with asp.net core uh web application so this is your host I'm two times cop
2:04
so this is your host I'm two times cop
2:04
so this is your host I'm two times cop Corner MVP Microsoft certified solution
2:07
Corner MVP Microsoft certified solution
2:07
Corner MVP Microsoft certified solution developer and currently working as a
2:09
developer and currently working as a
2:09
developer and currently working as a lead software developer at now
2:13
software so first of all we will have
2:18
software so first of all we will have
2:18
software so first of all we will have the overview of realtime web
2:20
the overview of realtime web
2:20
the overview of realtime web application
2:23
application
2:23
application uh real time uh web application enable
2:26
uh real time uh web application enable
2:26
uh real time uh web application enable instant communication between clients
2:29
instant communication between clients
2:29
instant communication between clients and servers allowing data to push to and
2:33
and servers allowing data to push to and
2:33
and servers allowing data to push to and from the server in real time without the
2:36
from the server in real time without the
2:36
from the server in real time without the need for continuous client request uh
2:39
need for continuous client request uh
2:39
need for continuous client request uh this real-time capability is critical
2:41
this real-time capability is critical
2:41
this real-time capability is critical for dynamic interactive experience such
2:44
for dynamic interactive experience such
2:44
for dynamic interactive experience such as live chats notifications gaming
2:47
as live chats notifications gaming
2:47
as live chats notifications gaming collaboration tools and
2:49
collaboration tools and
2:49
collaboration tools and dashboards uh key characteristics of
2:51
dashboards uh key characteristics of
2:51
dashboards uh key characteristics of realtime web applications are instant
2:55
realtime web applications are instant
2:55
realtime web applications are instant data updates realtime apps deliver
2:58
data updates realtime apps deliver
2:58
data updates realtime apps deliver information to users as soon as it is
3:01
information to users as soon as it is
3:01
information to users as soon as it is available without needing to refresh the
3:04
available without needing to refresh the
3:04
available without needing to refresh the page or manually request updates uh then
3:07
page or manually request updates uh then
3:07
page or manually request updates uh then we have bidirectional communication
3:10
we have bidirectional communication
3:10
we have bidirectional communication these applications support two-way data
3:13
these applications support two-way data
3:13
these applications support two-way data communication allowing both the client
3:16
communication allowing both the client
3:16
communication allowing both the client and the server to send and receive data
3:18
and the server to send and receive data
3:18
and the server to send and receive data in real time uh we have a persistent
3:21
in real time uh we have a persistent
3:21
in real time uh we have a persistent connection uh real time web apps uses
3:25
connection uh real time web apps uses
3:25
connection uh real time web apps uses Technologies like web sockets server SS
3:29
Technologies like web sockets server SS
3:29
Technologies like web sockets server SS or long willing to maintain a persistent
3:31
or long willing to maintain a persistent
3:31
or long willing to maintain a persistent connection between the client and server
3:34
connection between the client and server
3:34
connection between the client and server uh we have load latency with realtime
3:37
uh we have load latency with realtime
3:37
uh we have load latency with realtime apps these apps provides uh low latency
3:40
apps these apps provides uh low latency
3:40
apps these apps provides uh low latency with high responses ensuring near
3:43
with high responses ensuring near
3:43
with high responses ensuring near instance feedback and interacting for
3:46
instance feedback and interacting for
3:46
instance feedback and interacting for users uh we have high
3:49
users uh we have high
3:49
users uh we have high scalability uh for realtime web apps
3:52
scalability uh for realtime web apps
3:53
scalability uh for realtime web apps because they often need to support a
3:55
because they often need to support a
3:55
because they often need to support a large number of concurrent users and
3:57
large number of concurrent users and
3:57
large number of concurrent users and manage communication efficiently across
4:01
manage communication efficiently across
4:01
manage communication efficiently across them uh then we have few key components
4:05
them uh then we have few key components
4:05
them uh then we have few key components of aor signal R uh Azor signal R consist
4:10
of aor signal R uh Azor signal R consist
4:10
of aor signal R uh Azor signal R consist of several components that enable it to
4:13
of several components that enable it to
4:13
of several components that enable it to provide seamless realtime communication
4:16
provide seamless realtime communication
4:16
provide seamless realtime communication uh these components work together to
4:18
uh these components work together to
4:18
uh these components work together to manage client connections handle
4:21
manage client connections handle
4:21
manage client connections handle messages and scale applications
4:24
messages and scale applications
4:24
messages and scale applications efficiently uh here are the key
4:26
efficiently uh here are the key
4:27
efficiently uh here are the key components of a signal or service uh
4:30
components of a signal or service uh
4:30
components of a signal or service uh first of all we have hubs uh basically
4:34
first of all we have hubs uh basically
4:34
first of all we have hubs uh basically hubs are the core abstraction in Signal
4:37
hubs are the core abstraction in Signal
4:37
hubs are the core abstraction in Signal R uh that manage client server
4:40
R uh that manage client server
4:40
R uh that manage client server communication Hub allows server to send
4:43
communication Hub allows server to send
4:43
communication Hub allows server to send messages to all connected clients or to
4:47
messages to all connected clients or to
4:47
messages to all connected clients or to specific clients uh they enable realtime
4:50
specific clients uh they enable realtime
4:50
specific clients uh they enable realtime functionality such as broadcasting
4:53
functionality such as broadcasting
4:53
functionality such as broadcasting messages and handling messages from
4:56
messages and handling messages from
4:56
messages and handling messages from clients the second part we have uh is
5:00
clients the second part we have uh is
5:00
clients the second part we have uh is clients uh clients are the applications
5:03
clients uh clients are the applications
5:03
clients uh clients are the applications or devices that establish a connection
5:05
or devices that establish a connection
5:05
or devices that establish a connection to the signal R Service uh these can be
5:08
to the signal R Service uh these can be
5:08
to the signal R Service uh these can be web browsers desktop applications or
5:12
web browsers desktop applications or
5:12
web browsers desktop applications or mobile apps that connect to the Azure
5:14
mobile apps that connect to the Azure
5:14
mobile apps that connect to the Azure signal service to send or receive real
5:17
signal service to send or receive real
5:17
signal service to send or receive real time update uh signal r support multiple
5:20
time update uh signal r support multiple
5:20
time update uh signal r support multiple platforms uh such as JavaScript doet
5:24
platforms uh such as JavaScript doet
5:24
platforms uh such as JavaScript doet Java and
5:26
Java and
5:26
Java and Etc uh then we have connections uh
5:29
Etc uh then we have connections uh
5:29
Etc uh then we have connections uh basically a connection is a persistent
5:32
basically a connection is a persistent
5:32
basically a connection is a persistent link between a client and the signal R
5:36
link between a client and the signal R
5:36
link between a client and the signal R service and the main purpose of
5:39
service and the main purpose of
5:39
service and the main purpose of connection in Signal R is to maintain
5:42
connection in Signal R is to maintain
5:42
connection in Signal R is to maintain open bir directional connection that
5:45
open bir directional connection that
5:45
open bir directional connection that allow data to be sent in real time uh
5:48
allow data to be sent in real time uh
5:48
allow data to be sent in real time uh between client and servers and each
5:51
between client and servers and each
5:51
between client and servers and each client has a unique connection ID so we
5:54
client has a unique connection ID so we
5:54
client has a unique connection ID so we can identify a specific client by using
5:57
can identify a specific client by using
5:57
can identify a specific client by using that connection ID and we can send
5:59
that connection ID and we can send
5:59
that connection ID and we can send messages
6:00
messages
6:00
messages uh to a specific user by using that
6:02
uh to a specific user by using that
6:02
uh to a specific user by using that connection ID as well uh then we have
6:06
connection ID as well uh then we have
6:06
connection ID as well uh then we have messages uh messages are the real time
6:09
messages uh messages are the real time
6:09
messages uh messages are the real time data payloads that are exchanged between
6:13
data payloads that are exchanged between
6:13
data payloads that are exchanged between clients and servers while
6:16
clients and servers while
6:16
clients and servers while communication and clients are uh clients
6:19
communication and clients are uh clients
6:19
communication and clients are uh clients and servers uses messages to communicate
6:22
and servers uses messages to communicate
6:22
and servers uses messages to communicate and a message can be notification chat
6:25
and a message can be notification chat
6:25
and a message can be notification chat message or any real time update these
6:28
message or any real time update these
6:28
message or any real time update these messages can be sent to individual
6:30
messages can be sent to individual
6:30
messages can be sent to individual clients or groups or broad cast to all
6:34
clients or groups or broad cast to all
6:34
clients or groups or broad cast to all clients uh then we have groups inside as
6:37
clients uh then we have groups inside as
6:37
clients uh then we have groups inside as your signal or service uh groups or
6:40
your signal or service uh groups or
6:40
your signal or service uh groups or logical collections of clients that can
6:43
logical collections of clients that can
6:43
logical collections of clients that can receive the same messages uh so by using
6:46
receive the same messages uh so by using
6:46
receive the same messages uh so by using groups you can uh add segmentation of
6:50
groups you can uh add segmentation of
6:50
groups you can uh add segmentation of your users uh you can send messages to a
6:53
your users uh you can send messages to a
6:53
your users uh you can send messages to a specific group of clients and you can
6:56
specific group of clients and you can
6:56
specific group of clients and you can even create rooms or teams by using
6:59
even create rooms or teams by using
6:59
even create rooms or teams by using these groups as well uh then we have uh
7:03
these groups as well uh then we have uh
7:03
these groups as well uh then we have uh service modes uh basically these service
7:06
service modes uh basically these service
7:06
service modes uh basically these service modes are related to uh the aor signal
7:09
modes are related to uh the aor signal
7:09
modes are related to uh the aor signal or deployment
7:11
or deployment
7:11
or deployment Service uh and we have basically three
7:15
Service uh and we have basically three
7:15
Service uh and we have basically three uh Main Service modes we have default
7:18
uh Main Service modes we have default
7:18
uh Main Service modes we have default mode we have serverless mode and we have
7:20
mode we have serverless mode and we have
7:20
mode we have serverless mode and we have a classic Mode as well uh default mode
7:23
a classic Mode as well uh default mode
7:23
a classic Mode as well uh default mode basically requires a backend application
7:26
basically requires a backend application
7:26
basically requires a backend application uh asp.net core app to manage hubs and
7:29
uh asp.net core app to manage hubs and
7:29
uh asp.net core app to manage hubs and handle logic uh which means if you are
7:32
handle logic uh which means if you are
7:32
handle logic uh which means if you are using asp.net core application for
7:35
using asp.net core application for
7:35
using asp.net core application for managing your hubs uh then you have to
7:39
managing your hubs uh then you have to
7:39
managing your hubs uh then you have to select default mode for that purpose
7:42
select default mode for that purpose
7:42
select default mode for that purpose then we have serverless mode if you are
7:45
then we have serverless mode if you are
7:45
then we have serverless mode if you are working with serverless application for
7:48
working with serverless application for
7:48
working with serverless application for example you are making an uh event
7:51
example you are making an uh event
7:51
example you are making an uh event driven application which are using
7:53
driven application which are using
7:53
driven application which are using realtime messaging without a dedicated
7:56
realtime messaging without a dedicated
7:56
realtime messaging without a dedicated application server uh so you can use
7:59
application server uh so you can use
7:59
application server uh so you can use serverless mode uh specifically for aure
8:02
serverless mode uh specifically for aure
8:02
serverless mode uh specifically for aure function if you have signal or Hub
8:05
function if you have signal or Hub
8:05
function if you have signal or Hub inside aure function then you can use
8:07
inside aure function then you can use
8:07
inside aure function then you can use this and second loss we have aure signal
8:11
this and second loss we have aure signal
8:11
this and second loss we have aure signal or SDK uh basically Azure provide us a
8:15
or SDK uh basically Azure provide us a
8:15
or SDK uh basically Azure provide us a signal or SDK uh and it is very easy to
8:19
signal or SDK uh and it is very easy to
8:19
signal or SDK uh and it is very easy to integrate with asp.net
8:21
integrate with asp.net
8:21
integrate with asp.net applications we also have SDK for
8:23
applications we also have SDK for
8:23
applications we also have SDK for JavaScript and python as well uh so
8:26
JavaScript and python as well uh so
8:27
JavaScript and python as well uh so these sdks uh provide us very easy and
8:30
these sdks uh provide us very easy and
8:30
these sdks uh provide us very easy and seamless integration with Azure signal
8:32
seamless integration with Azure signal
8:32
seamless integration with Azure signal or services and at the end we have
8:35
or services and at the end we have
8:35
or services and at the end we have scaling and load
8:37
scaling and load
8:37
scaling and load balancing basically uh a your signal R
8:40
balancing basically uh a your signal R
8:40
balancing basically uh a your signal R service have a buil-in mechanism that
8:43
service have a buil-in mechanism that
8:43
service have a buil-in mechanism that automatically Scale based on connection
8:46
automatically Scale based on connection
8:46
automatically Scale based on connection dards uh so as your signal R Service uh
8:50
dards uh so as your signal R Service uh
8:50
dards uh so as your signal R Service uh handle scaling across multiple servers
8:53
handle scaling across multiple servers
8:53
handle scaling across multiple servers and data centers at ensure realtime
8:57
and data centers at ensure realtime
8:57
and data centers at ensure realtime connections uh which are maintained add
8:59
connections uh which are maintained add
8:59
connections uh which are maintained add user load increases so even you can
9:02
user load increases so even you can
9:02
user load increases so even you can handle million of request using a your
9:04
handle million of request using a your
9:04
handle million of request using a your signal R
9:07
signal R
9:07
signal R Service uh there are few uh popular
9:10
Service uh there are few uh popular
9:10
Service uh there are few uh popular cases for realtime web application we
9:12
cases for realtime web application we
9:12
cases for realtime web application we have live chat and messenging uh so by
9:16
have live chat and messenging uh so by
9:16
have live chat and messenging uh so by using a your signal R service you can
9:18
using a your signal R service you can
9:18
using a your signal R service you can enable users to send and receive
9:21
enable users to send and receive
9:21
enable users to send and receive messages instantly as seen in chat apps
9:25
messages instantly as seen in chat apps
9:25
messages instantly as seen in chat apps like slack and WhatsApp and Skype so you
9:28
like slack and WhatsApp and Skype so you
9:28
like slack and WhatsApp and Skype so you can use signal are for that as well uh
9:31
can use signal are for that as well uh
9:31
can use signal are for that as well uh you can use uh with collaborative tools
9:35
you can use uh with collaborative tools
9:35
you can use uh with collaborative tools basically collaborative tools are the
9:37
basically collaborative tools are the
9:38
basically collaborative tools are the tools which allow multiple users to
9:40
tools which allow multiple users to
9:40
tools which allow multiple users to interact and work together in real time
9:43
interact and work together in real time
9:43
interact and work together in real time such as Google Docs uh live editing
9:46
such as Google Docs uh live editing
9:46
such as Google Docs uh live editing feature we can also use this for live
9:51
feature we can also use this for live
9:51
feature we can also use this for live notification uh with different pushes
9:53
notification uh with different pushes
9:53
notification uh with different pushes update alerts or notifications to users
9:56
update alerts or notifications to users
9:56
update alerts or notifications to users in real time and we can also used for
10:00
in real time and we can also used for
10:00
in real time and we can also used for breaking news or order uh order status
10:03
breaking news or order uh order status
10:03
breaking news or order uh order status updates as well uh so you can use for
10:07
updates as well uh so you can use for
10:07
updates as well uh so you can use for this purpose as well uh we can use this
10:09
this purpose as well uh we can use this
10:09
this purpose as well uh we can use this for uh Gaming facilities uh multiplayer
10:13
for uh Gaming facilities uh multiplayer
10:13
for uh Gaming facilities uh multiplayer gaming with instant feedback and
10:15
gaming with instant feedback and
10:15
gaming with instant feedback and interactions between players so you can
10:18
interactions between players so you can
10:18
interactions between players so you can use this for this scenario as well uh
10:22
use this for this scenario as well uh
10:22
use this for this scenario as well uh you can also design realtime dashboards
10:25
you can also design realtime dashboards
10:25
you can also design realtime dashboards which provide live updates for
10:27
which provide live updates for
10:27
which provide live updates for monitoring systems uh such as stock
10:29
monitoring systems uh such as stock
10:29
monitoring systems uh such as stock prices weather updates or iot sensor
10:33
prices weather updates or iot sensor
10:33
prices weather updates or iot sensor data uh so you can use this uh for all
10:36
data uh so you can use this uh for all
10:36
data uh so you can use this uh for all of these real time scenarios as well so
10:39
of these real time scenarios as well so
10:39
of these real time scenarios as well so these were few uh popular
10:42
these were few uh popular
10:42
these were few uh popular cases uh now we will move to hands on
10:45
cases uh now we will move to hands on
10:45
cases uh now we will move to hands on demo and inside that inside that Demo
10:49
demo and inside that inside that Demo
10:49
demo and inside that inside that Demo First of
10:50
First of
10:50
First of all we will create an aure signalr
10:53
all we will create an aure signalr
10:53
all we will create an aure signalr resource using aure portal then we will
10:57
resource using aure portal then we will
10:57
resource using aure portal then we will uh create asp.net corm
10:59
uh create asp.net corm
11:00
uh create asp.net corm application uh with a few preed packages
11:04
application uh with a few preed packages
11:04
application uh with a few preed packages and then we will
11:06
and then we will
11:06
and then we will implement the aour signal R service
11:09
implement the aour signal R service
11:09
implement the aour signal R service inside our asp.net core application for
11:11
inside our asp.net core application for
11:11
inside our asp.net core application for one of uh group chatting demo so let me
11:17
one of uh group chatting demo so let me
11:17
one of uh group chatting demo so let me share my screen and then we can
11:25
start okay so I hope you guys uh can see
11:29
start okay so I hope you guys uh can see
11:29
start okay so I hope you guys uh can see my screen
11:32
now uh So currently I'm in Portal of
11:36
now uh So currently I'm in Portal of
11:36
now uh So currently I'm in Portal of aure if you don't have an account you
11:39
aure if you don't have an account you
11:39
aure if you don't have an account you can uh sign up or you can uh sign up
11:42
can uh sign up or you can uh sign up
11:42
can uh sign up or you can uh sign up using trial account uh so I already have
11:45
using trial account uh so I already have
11:45
using trial account uh so I already have an account so you can open portal.
11:48
an account so you can open portal.
11:48
an account so you can open portal. azure.com uh so first of all I will
11:51
azure.com uh so first of all I will
11:51
azure.com uh so first of all I will click on create a
11:54
click on create a
11:54
click on create a resource and inside this I have to
11:56
resource and inside this I have to
11:56
resource and inside this I have to search for a your signal or
12:12
service okay so this
12:15
service okay so this
12:15
service okay so this is let me click on again it's taking a
12:19
is let me click on again it's taking a
12:19
is let me click on again it's taking a little bit
12:26
time okay so why taking too much time
12:31
time okay so why taking too much time
12:31
time okay so why taking too much time let's go to the other
12:34
let's go to the other
12:34
let's go to the other side click on
12:38
side click on
12:38
side click on create okay uh let's search for as
12:44
create okay uh let's search for as
12:44
create okay uh let's search for as your signal or
12:51
service I can say signal
12:55
are okay uh so here you can see that on
12:59
are okay uh so here you can see that on
12:59
are okay uh so here you can see that on first option we have aure signal or
13:02
first option we have aure signal or
13:02
first option we have aure signal or service so let's click on
13:05
service so let's click on
13:05
service so let's click on this let's click on create
13:09
this let's click on create
13:09
this let's click on create button okay so here we need to provide
13:13
button okay so here we need to provide
13:13
button okay so here we need to provide few basic information for creating uh
13:16
few basic information for creating uh
13:16
few basic information for creating uh the instance of Z signal or service uh
13:19
the instance of Z signal or service uh
13:19
the instance of Z signal or service uh first of all we need to select the
13:21
first of all we need to select the
13:21
first of all we need to select the subscription in my case it is pay as
13:23
subscription in my case it is pay as
13:23
subscription in my case it is pay as youo uh then we need to select the
13:25
youo uh then we need to select the
13:26
youo uh then we need to select the resource Group I already have one which
13:28
resource Group I already have one which
13:28
resource Group I already have one which is a s uh which stand for a your
13:31
is a s uh which stand for a your
13:31
is a s uh which stand for a your essential Series so I will be using this
13:34
essential Series so I will be using this
13:34
essential Series so I will be using this uh then I need to provide resource name
13:37
uh then I need to provide resource name
13:37
uh then I need to provide resource name okay uh so I will say this AES demo
13:43
okay uh so I will say this AES demo
13:43
okay uh so I will say this AES demo which is basically aor essential series
13:45
which is basically aor essential series
13:45
which is basically aor essential series demo and then we need to select the
13:48
demo and then we need to select the
13:48
demo and then we need to select the region uh so this region will Define
13:50
region uh so this region will Define
13:51
region uh so this region will Define where you are as your signal R service
13:53
where you are as your signal R service
13:53
where you are as your signal R service will be deployed so in my case I will
13:55
will be deployed so in my case I will
13:55
will be deployed so in my case I will select eus uh then we have different
13:59
select eus uh then we have different
13:59
select eus uh then we have different pricing
14:00
pricing
14:00
pricing tiers so uh currently uh we have we have
14:04
tiers so uh currently uh we have we have
14:04
tiers so uh currently uh we have we have a premium P1 and inside this we have one
14:07
a premium P1 and inside this we have one
14:07
a premium P1 and inside this we have one unit uh and 1,000 connections limit
14:13
unit uh and 1,000 connections limit
14:13
unit uh and 1,000 connections limit and it's almost uh .1 million messages
14:17
and it's almost uh .1 million messages
14:17
and it's almost uh .1 million messages per day included and the estimated cost
14:20
per day included and the estimated cost
14:20
per day included and the estimated cost per month is 61 USD per month and if you
14:23
per month is 61 USD per month and if you
14:23
per month is 61 USD per month and if you want to change this you can uh click on
14:26
want to change this you can uh click on
14:26
want to change this you can uh click on change button and here you can see that
14:28
change button and here you can see that
14:28
change button and here you can see that there are different plans
14:30
there are different plans
14:30
there are different plans available uh so in my case as uh we are
14:34
available uh so in my case as uh we are
14:34
available uh so in my case as uh we are doing it just for uh development purpose
14:39
doing it just for uh development purpose
14:39
doing it just for uh development purpose so we can select Dev and test uh so
14:43
so we can select Dev and test uh so
14:44
so we can select Dev and test uh so let's select
14:48
this so now this will provide me up to
14:51
this so now this will provide me up to
14:51
this so now this will provide me up to 20 connections and 20,000 messages per
14:54
20 connections and 20,000 messages per
14:54
20 connections and 20,000 messages per day then we have the service modes so
14:58
day then we have the service modes so
14:58
day then we have the service modes so basically three service modes are
14:59
basically three service modes are
14:59
basically three service modes are available first of all we have default
15:01
available first of all we have default
15:01
available first of all we have default mode if uh you guys are uh planning to
15:06
mode if uh you guys are uh planning to
15:06
mode if uh you guys are uh planning to uh planning to use asp.net for for
15:09
uh planning to use asp.net for for
15:09
uh planning to use asp.net for for serers side hubs of as your signal or
15:12
serers side hubs of as your signal or
15:12
serers side hubs of as your signal or then default is the mode if you are
15:14
then default is the mode if you are
15:14
then default is the mode if you are using aure functions for managing your
15:17
using aure functions for managing your
15:17
using aure functions for managing your hubs then serverless application and if
15:20
hubs then serverless application and if
15:20
hubs then serverless application and if you want to uh make sure you are aure
15:23
you want to uh make sure you are aure
15:23
you want to uh make sure you are aure signal R Hub is compatible with the
15:25
signal R Hub is compatible with the
15:25
signal R Hub is compatible with the previous versions then you can select
15:27
previous versions then you can select
15:27
previous versions then you can select the SL classic Mode so in my case I will
15:30
the SL classic Mode so in my case I will
15:30
the SL classic Mode so in my case I will select the default mode so let's click
15:33
select the default mode so let's click
15:33
select the default mode so let's click on next button here we have network
15:36
on next button here we have network
15:37
on next button here we have network connectivity option uh so I will select
15:39
connectivity option uh so I will select
15:39
connectivity option uh so I will select public endpoint because I have to access
15:41
public endpoint because I have to access
15:41
public endpoint because I have to access it from my laptop uh then click on
15:45
it from my laptop uh then click on
15:45
it from my laptop uh then click on review plus create button so here is the
15:49
review plus create button so here is the
15:49
review plus create button so here is the summary of my aure signal or service
15:53
summary of my aure signal or service
15:53
summary of my aure signal or service instance uh so aure is validating the
15:57
instance uh so aure is validating the
15:57
instance uh so aure is validating the requirements okay so let's click on
15:59
requirements okay so let's click on
15:59
requirements okay so let's click on create button it will take a little bit
16:04
time so we have to wait for
16:12
this so it is
16:15
this so it is
16:15
this so it is currently deploying it will take few
16:18
currently deploying it will take few
16:18
currently deploying it will take few more
16:19
more
16:19
more seconds currently deployment is in
16:25
progress
16:27
progress
16:27
progress so let two more
16:31
so let two more
16:31
so let two more minutes 40
16:35
seconds if if I click on here you can
16:38
seconds if if I click on here you can
16:38
seconds if if I click on here you can see that the deployment is in
16:46
progress let's wait for this to complete
16:59
so two more seconds to
17:12
go okay so deployment succeeded go to
17:16
go okay so deployment succeeded go to
17:16
go okay so deployment succeeded go to the
17:19
resource okay so here you can see that
17:23
resource okay so here you can see that
17:23
resource okay so here you can see that uh my aure signal or service instance is
17:26
uh my aure signal or service instance is
17:26
uh my aure signal or service instance is up and running
17:29
up and running
17:29
up and running okay uh now there are a lot of options
17:33
okay uh now there are a lot of options
17:33
okay uh now there are a lot of options available inside uh this aure signal or
17:36
available inside uh this aure signal or
17:36
available inside uh this aure signal or service uh you can see that we have a
17:39
service uh you can see that we have a
17:39
service uh you can see that we have a few metrics here which is showing the uh
17:42
few metrics here which is showing the uh
17:42
few metrics here which is showing the uh connection for minutes we also have
17:44
connection for minutes we also have
17:44
connection for minutes we also have message count as
17:46
message count as
17:46
message count as well we have tools and sdks so you can
17:50
well we have tools and sdks so you can
17:50
well we have tools and sdks so you can see that you can
17:52
see that you can
17:52
see that you can use aure with Powershell CLI net Java
17:57
use aure with Powershell CLI net Java
17:57
use aure with Powershell CLI net Java python nodejs go all sdks are available
18:01
python nodejs go all sdks are available
18:01
python nodejs go all sdks are available for all these uh languages and
18:04
for all these uh languages and
18:04
for all these uh languages and Frameworks uh
18:07
Frameworks uh
18:07
Frameworks uh so let me uh set up my code and then we
18:11
so let me uh set up my code and then we
18:11
so let me uh set up my code and then we will integrate this inside our
18:13
will integrate this inside our
18:13
will integrate this inside our application uh so let's open the V
18:18
application uh so let's open the V
18:18
application uh so let's open the V Studio I'm using V Studio
18:21
Studio I'm using V Studio
18:21
Studio I'm using V Studio 2022 and let's click on aure essential
18:24
2022 and let's click on aure essential
18:24
2022 and let's click on aure essential series uh so this is the same solution
18:27
series uh so this is the same solution
18:27
series uh so this is the same solution as I am using for my all Azure essential
18:31
as I am using for my all Azure essential
18:31
as I am using for my all Azure essential series episodes so you can download this
18:33
series episodes so you can download this
18:33
series episodes so you can download this from my Azure GitHub repo I will share
18:37
from my Azure GitHub repo I will share
18:37
from my Azure GitHub repo I will share the link at the end of the
18:40
the link at the end of the
18:40
the link at the end of the episode okay so let's
18:43
episode okay so let's
18:43
episode okay so let's click and create a new
18:49
project okay first of all uh we need to
18:52
project okay first of all uh we need to
18:52
project okay first of all uh we need to select asp.net core uh web app you can
18:56
select asp.net core uh web app you can
18:56
select asp.net core uh web app you can select any other app if you if you need
18:58
select any other app if you if you need
18:58
select any other app if you if you need web API or any other thing that is fine
19:01
web API or any other thing that is fine
19:01
web API or any other thing that is fine but in my case I will be using web app
19:03
but in my case I will be using web app
19:03
but in my case I will be using web app because I need to demonstrate the
19:06
because I need to demonstrate the
19:06
because I need to demonstrate the chatting app uh so this is episode 14 so
19:09
chatting app uh so this is episode 14 so
19:09
chatting app uh so this is episode 14 so I will right episode 14 click on next
19:14
I will right episode 14 click on next
19:14
I will right episode 14 click on next button uh I will select net8 uh because
19:18
button uh I will select net8 uh because
19:18
button uh I will select net8 uh because it have longterm sport uh we don't need
19:21
it have longterm sport uh we don't need
19:21
it have longterm sport uh we don't need any authentication
19:22
any authentication
19:22
any authentication types and that is fine so let's click on
19:26
types and that is fine so let's click on
19:26
types and that is fine so let's click on create button
19:28
create button
19:29
create button and bu studio will create an asp.net cor
19:32
and bu studio will create an asp.net cor
19:32
and bu studio will create an asp.net cor MVC web
19:34
MVC web
19:34
MVC web application so the application have been
19:38
application so the application have been
19:38
application so the application have been created uh now first of all we need to
19:41
created uh now first of all we need to
19:41
created uh now first of all we need to install few prerequisite packages so
19:44
install few prerequisite packages so
19:44
install few prerequisite packages so let's click on and manage nugget
19:48
let's click on and manage nugget
19:48
let's click on and manage nugget packages here I will uh write as your
19:53
packages here I will uh write as your
19:53
packages here I will uh write as your signal
19:54
signal
19:54
signal hour so we need to install this SDK
19:59
hour so we need to install this SDK
19:59
hour so we need to install this SDK so here we have Microsoft as your signal
20:02
so here we have Microsoft as your signal
20:02
so here we have Microsoft as your signal AR let's click on
20:06
install it will take few seconds to
20:09
install it will take few seconds to
20:09
install it will take few seconds to install all these packages okay uh this
20:14
install all these packages okay uh this
20:14
install all these packages okay uh this have been installed successfully so
20:16
have been installed successfully so
20:16
have been installed successfully so let's open program. CS
20:19
let's open program. CS
20:19
let's open program. CS file so in asp.net cor application
20:23
file so in asp.net cor application
20:23
file so in asp.net cor application program. CS file is the entry point of
20:27
program. CS file is the entry point of
20:27
program. CS file is the entry point of web application
20:29
web application
20:29
web application uh so here we need to uh do two things
20:33
uh so here we need to uh do two things
20:33
uh so here we need to uh do two things first of all we need to configure aure
20:36
first of all we need to configure aure
20:36
first of all we need to configure aure signal R service inside asp.net core web
20:41
signal R service inside asp.net core web
20:41
signal R service inside asp.net core web application so here I will write uh
20:45
application so here I will write uh
20:45
application so here I will write uh register signal or services and here I
20:50
register signal or services and here I
20:50
register signal or services and here I will say Builder do services do
20:55
will say Builder do services do
20:55
will say Builder do services do add signal
20:59
add signal
20:59
add signal okay so this uh extension method. add
21:03
okay so this uh extension method. add
21:03
okay so this uh extension method. add signal R this will basically uh register
21:06
signal R this will basically uh register
21:06
signal R this will basically uh register the services which are required for
21:08
the services which are required for
21:08
the services which are required for functioning signal or service and then
21:11
functioning signal or service and then
21:11
functioning signal or service and then we need to add the aure signal r as we
21:15
we need to add the aure signal r as we
21:15
we need to add the aure signal r as we are using aure signal or service so we
21:18
are using aure signal or service so we
21:18
are using aure signal or service so we have to select this as
21:22
have to select this as
21:22
have to select this as well okay and then if you uh see the
21:25
well okay and then if you uh see the
21:25
well okay and then if you uh see the different option uh for this we have
21:29
different option uh for this we have
21:29
different option uh for this we have connection string so we have three
21:33
connection string so we have three
21:33
connection string so we have three different overloading for this function
21:36
different overloading for this function
21:36
different overloading for this function so we need to provide connection string
21:39
so we need to provide connection string
21:39
so we need to provide connection string inside this as well so we will save
21:42
inside this as well so we will save
21:42
inside this as well so we will save connection string inside our app setting
21:44
connection string inside our app setting
21:44
connection string inside our app setting so let's go to Azure portal so that we
21:47
so let's go to Azure portal so that we
21:47
so let's go to Azure portal so that we can copy the connection string from
21:51
can copy the connection string from
21:51
can copy the connection string from here so here you can see that we have a
21:55
here so here you can see that we have a
21:55
here so here you can see that we have a connection string option inside setting
21:58
connection string option inside setting
21:58
connection string option inside setting so let's click on
22:00
so let's click on
22:00
so let's click on this and here we have access key types
22:04
this and here we have access key types
22:04
this and here we have access key types so we will be using this for our
22:06
so we will be using this for our
22:06
so we will be using this for our application we have secondary connection
22:09
application we have secondary connection
22:09
application we have secondary connection string we have primary connection string
22:11
string we have primary connection string
22:11
string we have primary connection string so let's copy this primary connection
22:14
so let's copy this primary connection
22:14
so let's copy this primary connection string and now we need to save this
22:17
string and now we need to save this
22:17
string and now we need to save this inside app
22:20
inside app
22:20
inside app settings so here I will uh create a new
22:25
settings so here I will uh create a new
22:25
settings so here I will uh create a new key let me add it it here
22:30
key let me add it it here
22:30
key let me add it it here and I I will say as
22:35
your signal
22:43
or okay
22:46
or okay
22:46
or okay okay uh so I have pasted my connection
22:49
okay uh so I have pasted my connection
22:49
okay uh so I have pasted my connection string inside this and I think instead
22:53
string inside this and I think instead
22:53
string inside this and I think instead of this I should uh change it into
22:57
of this I should uh change it into
22:57
of this I should uh change it into connections
23:00
connections
23:00
connections strings so that instead of accessing it
23:04
strings so that instead of accessing it
23:04
strings so that instead of accessing it with complete path I can directly access
23:07
with complete path I can directly access
23:07
with complete path I can directly access using connection
23:09
using connection
23:09
using connection strings and here I can say signal or
23:14
strings and here I can say signal or
23:14
strings and here I can say signal or connection so that is fine connection
23:18
connection so that is fine connection
23:18
connection so that is fine connection strings signal or
23:21
strings signal or
23:21
strings signal or connection uh so now here I will get
23:24
connection uh so now here I will get
23:24
connection uh so now here I will get this
23:25
this
23:25
this from my configuration
23:31
I will
23:35
say signal or connection
23:39
say signal or connection
23:39
say signal or connection string and here I will get it from
23:42
string and here I will get it from
23:42
string and here I will get it from builder.
23:43
builder.
23:43
builder. configuration do get connection
23:47
configuration do get connection
23:47
configuration do get connection string and I will provide the name here
23:51
string and I will provide the name here
23:51
string and I will provide the name here and then I need to pass this connection
23:54
and then I need to pass this connection
23:54
and then I need to pass this connection string inside my ADD as your signal or
23:57
string inside my ADD as your signal or
23:57
string inside my ADD as your signal or function uh so this is it our basic
24:01
function uh so this is it our basic
24:01
function uh so this is it our basic configuration for Signal or service has
24:03
configuration for Signal or service has
24:03
configuration for Signal or service has been completed uh now next step is we
24:07
been completed uh now next step is we
24:07
been completed uh now next step is we need to
24:08
need to
24:08
need to create a signal or
24:11
create a signal or
24:11
create a signal or Hub so let's create a folder I will say
24:17
Hub so let's create a folder I will say
24:17
Hub so let's create a folder I will say signal
24:20
signal
24:20
signal hubs so our application can have
24:23
hubs so our application can have
24:23
hubs so our application can have multiple
24:25
multiple
24:25
multiple hubs so let's click on this
24:29
hubs so let's click on this
24:29
hubs so let's click on this I will say chat
24:32
I will say chat
24:32
I will say chat up okay uh so first of all we need to
24:36
up okay uh so first of all we need to
24:36
up okay uh so first of all we need to create a simple class and then we need
24:40
create a simple class and then we need
24:40
create a simple class and then we need to we need to inherit this from
24:44
to we need to inherit this from
24:44
to we need to inherit this from microsoft. uh asp.net cor. signal
24:48
microsoft. uh asp.net cor. signal
24:48
microsoft. uh asp.net cor. signal orhub okay so the basically this Base
24:52
orhub okay so the basically this Base
24:52
orhub okay so the basically this Base Class provide us different methods for
24:55
Class provide us different methods for
24:55
Class provide us different methods for sending messages to all the
24:58
sending messages to all the
24:59
sending messages to all the connections uh so let's go to Microsoft
25:02
connections uh so let's go to Microsoft
25:02
connections uh so let's go to Microsoft website so we will follow a basic
25:05
website so we will follow a basic
25:05
website so we will follow a basic tutorial for code snippet so that we can
25:09
tutorial for code snippet so that we can
25:09
tutorial for code snippet so that we can uh demonstrate this very quickly uh so
25:12
uh demonstrate this very quickly uh so
25:12
uh demonstrate this very quickly uh so here I have opened quick start create a
25:15
here I have opened quick start create a
25:15
here I have opened quick start create a chat room by using signal R
25:17
chat room by using signal R
25:17
chat room by using signal R service so if I do scroll down here you
25:20
service so if I do scroll down here you
25:20
service so if I do scroll down here you can see that the all step we have uh
25:23
can see that the all step we have uh
25:23
can see that the all step we have uh gone through uh this have created
25:25
gone through uh this have created
25:25
gone through uh this have created asp.net cor web application and then
25:28
asp.net cor web application and then
25:28
asp.net cor web application and then this have added Secrets
25:31
this have added Secrets
25:31
this have added Secrets inside signal
25:33
inside signal
25:33
inside signal R okay so we have done all this
25:37
R okay so we have done all this
25:37
R okay so we have done all this configuration now only one thing is left
25:40
configuration now only one thing is left
25:40
configuration now only one thing is left we need to map this Hub with uh with our
25:46
we need to map this Hub with uh with our
25:46
we need to map this Hub with uh with our uh this middle Weare inside asp.net cor
25:48
uh this middle Weare inside asp.net cor
25:48
uh this middle Weare inside asp.net cor MVC application so here you can see that
25:51
MVC application so here you can see that
25:51
MVC application so here you can see that we have a simple chat Hub and inside
25:55
we have a simple chat Hub and inside
25:55
we have a simple chat Hub and inside that we have you
25:58
that we have you
25:58
that we have you methods so let's copy them paste inside
26:02
methods so let's copy them paste inside
26:02
methods so let's copy them paste inside our
26:03
our
26:03
our code okay let me change it from Lambda
26:07
code okay let me change it from Lambda
26:07
code okay let me change it from Lambda expression
26:08
expression
26:08
expression to simple
26:10
to simple
26:10
to simple form because I'm more uh happy with this
26:15
form because I'm more uh happy with this
26:15
form because I'm more uh happy with this approach it's up to you uh and then let
26:20
approach it's up to you uh and then let
26:20
approach it's up to you uh and then let me move
26:22
me move
26:22
me move this
26:25
okay return here as well so here you can
26:29
okay return here as well so here you can
26:29
okay return here as well so here you can see that we have two messages one is
26:33
see that we have two messages one is
26:33
see that we have two messages one is broadcast uh
26:35
broadcast uh
26:35
broadcast uh so broadcast message will basically send
26:39
so broadcast message will basically send
26:39
so broadcast message will basically send messages to all the connected
26:42
messages to all the connected
26:42
messages to all the connected connections so if you have 100 users
26:45
connections so if you have 100 users
26:45
connections so if you have 100 users connected with this Hub then uh the
26:48
connected with this Hub then uh the
26:48
connected with this Hub then uh the message will be broadcasted to all that
26:50
message will be broadcasted to all that
26:50
message will be broadcasted to all that users uh then we have
26:54
users uh then we have
26:54
users uh then we have Eco and Eco is uh basically inside this
26:59
Eco and Eco is uh basically inside this
26:59
Eco and Eco is uh basically inside this uh if if you will uh send a message to
27:02
uh if if you will uh send a message to
27:02
uh if if you will uh send a message to the server and then server will uh send
27:05
the server and then server will uh send
27:05
the server and then server will uh send same messages back to the client and
27:08
same messages back to the client and
27:08
same messages back to the client and this is this Eco message is basically
27:10
this is this Eco message is basically
27:10
this is this Eco message is basically used for just testing purposes whether
27:13
used for just testing purposes whether
27:13
used for just testing purposes whether you are uh working is fine or not and
27:15
you are uh working is fine or not and
27:15
you are uh working is fine or not and here you can see that we have uh client
27:18
here you can see that we have uh client
27:18
here you can see that we have uh client do client and inside this we are pro
27:22
do client and inside this we are pro
27:22
do client and inside this we are pro providing the client to home I want to
27:24
providing the client to home I want to
27:24
providing the client to home I want to send the uh message so inside this
27:29
send the uh message so inside this
27:29
send the uh message so inside this function we are providing our own
27:31
function we are providing our own
27:31
function we are providing our own connection ID by which we have been
27:33
connection ID by which we have been
27:33
connection ID by which we have been connected and then Sending message to
27:36
connected and then Sending message to
27:36
connected and then Sending message to our own connection ID so we will receive
27:38
our own connection ID so we will receive
27:38
our own connection ID so we will receive this from our client side and if we see
27:41
this from our client side and if we see
27:41
this from our client side and if we see this broadcast message inside this we
27:44
this broadcast message inside this we
27:44
this broadcast message inside this we are sending messages to all the users
27:47
are sending messages to all the users
27:47
are sending messages to all the users which are connected to this Hub uh so
27:50
which are connected to this Hub uh so
27:50
which are connected to this Hub uh so let's register this Hub Insite program.
27:53
let's register this Hub Insite program.
27:53
let's register this Hub Insite program. CS file and at the end of my code I will
27:56
CS file and at the end of my code I will
27:56
CS file and at the end of my code I will say app do
28:07
use map razor Hub and map Hub so we will
28:12
use map razor Hub and map Hub so we will
28:12
use map razor Hub and map Hub so we will select this map Hub and inside this we
28:15
select this map Hub and inside this we
28:15
select this map Hub and inside this we need to provide the aure signal
28:18
need to provide the aure signal
28:18
need to provide the aure signal Hub uh okay so this map Hub will uh
28:23
Hub uh okay so this map Hub will uh
28:23
Hub uh okay so this map Hub will uh basically register over H and here we
28:26
basically register over H and here we
28:26
basically register over H and here we need to provide the
28:29
need to provide the
28:29
need to provide the uh pattern for our URL so here we need
28:32
uh pattern for our URL so here we need
28:32
uh pattern for our URL so here we need to provide the pattern for URL by using
28:35
to provide the pattern for URL by using
28:35
to provide the pattern for URL by using which the client will be able to
28:38
which the client will be able to
28:38
which the client will be able to communicate with
28:41
this uh so I can say this
28:45
this uh so I can say this
28:45
this uh so I can say this yeah okay so our server site
28:48
yeah okay so our server site
28:48
yeah okay so our server site configuration have been
28:53
completed sorry for
28:55
completed sorry for
28:56
completed sorry for this our server site uh setup have been
29:00
this our server site uh setup have been
29:00
this our server site uh setup have been completed now next step is we need to
29:03
completed now next step is we need to
29:03
completed now next step is we need to add the client interface for the web app
29:06
add the client interface for the web app
29:06
add the client interface for the web app so this one already have
29:10
so this one already have
29:10
so this one already have created so let me copy this and then we
29:13
created so let me copy this and then we
29:13
created so let me copy this and then we can uh talk about this uh so I already
29:17
can uh talk about this uh so I already
29:17
can uh talk about this uh so I already have few pages so I will uh go to index
29:21
have few pages so I will uh go to index
29:21
have few pages so I will uh go to index and let's paste it
29:25
and let's paste it
29:25
and let's paste it here okay uh so let's from from the top
29:29
here okay uh so let's from from the top
29:29
here okay uh so let's from from the top of this page first of all we have the uh
29:33
of this page first of all we have the uh
29:33
of this page first of all we have the uh HTML starting cat I don't need this
29:36
HTML starting cat I don't need this
29:36
HTML starting cat I don't need this because I already have a layout for this
29:39
because I already have a layout for this
29:39
because I already have a layout for this and then we have a closing head tag for
29:41
and then we have a closing head tag for
29:42
and then we have a closing head tag for this so let's remove this as
29:44
this so let's remove this as
29:44
this so let's remove this as well we have body tag okay now first of
29:48
well we have body tag okay now first of
29:48
well we have body tag okay now first of all we have a H2 heading which is a
29:51
all we have a H2 heading which is a
29:51
all we have a H2 heading which is a simple heading saying as your signal R
29:53
simple heading saying as your signal R
29:53
simple heading saying as your signal R group chat I can change it with uh C is
29:58
group chat I can change it with uh C is
29:58
group chat I can change it with uh C is Islam Abad chapter group chat okay this
30:02
Islam Abad chapter group chat okay this
30:02
Islam Abad chapter group chat okay this makes sense then we have a div and
30:05
makes sense then we have a div and
30:06
makes sense then we have a div and inside div we have messages div uh then
30:10
inside div we have messages div uh then
30:10
inside div we have messages div uh then we
30:11
we
30:11
we have text area for writing the text
30:15
have text area for writing the text
30:16
have text area for writing the text messages and at the end we have two
30:18
messages and at the end we have two
30:18
messages and at the end we have two buttons one is for Eco and one is for
30:21
buttons one is for Eco and one is for
30:21
buttons one is for Eco and one is for send we have IDs for these two buttons
30:24
send we have IDs for these two buttons
30:24
send we have IDs for these two buttons as well we have a model
30:28
as well we have a model
30:28
as well we have a model for refresh as well so this is our HTML
30:32
for refresh as well so this is our HTML
30:32
for refresh as well so this is our HTML code uh then we have JavaScript code uh
30:36
code uh then we have JavaScript code uh
30:36
code uh then we have JavaScript code uh first of all we we are adding an event
30:39
first of all we we are adding an event
30:39
first of all we we are adding an event uh listener for Dom content loading so
30:42
uh listener for Dom content loading so
30:42
uh listener for Dom content loading so this is just like uh J cy. ready
30:45
this is just like uh J cy. ready
30:45
this is just like uh J cy. ready function so whenever Dom elements are
30:47
function so whenever Dom elements are
30:47
function so whenever Dom elements are ready uh this function will be executing
30:50
ready uh this function will be executing
30:50
ready uh this function will be executing and inside this we have a method for get
30:52
and inside this we have a method for get
30:52
and inside this we have a method for get username so basically this method
30:55
username so basically this method
30:55
username so basically this method prompts the user to enter his username
30:58
prompts the user to enter his username
30:58
prompts the user to enter his username name uh so that we can uh we
31:01
name uh so that we can uh we
31:01
name uh so that we can uh we can show the username against which
31:04
can show the username against which
31:04
can show the username against which messages are sending or receiv receiving
31:06
messages are sending or receiv receiving
31:06
messages are sending or receiv receiving and then we have a create message entry
31:09
and then we have a create message entry
31:09
and then we have a create message entry uh so this is basically manipulating the
31:11
uh so this is basically manipulating the
31:11
uh so this is basically manipulating the Dome elements of our HTML web
31:14
Dome elements of our HTML web
31:14
Dome elements of our HTML web application uh it is basically adding
31:18
application uh it is basically adding
31:18
application uh it is basically adding different HTML divs for these messages
31:22
different HTML divs for these messages
31:22
different HTML divs for these messages we have a pend message as well so this
31:24
we have a pend message as well so this
31:24
we have a pend message as well so this is basically a pend message in the list
31:26
is basically a pend message in the list
31:26
is basically a pend message in the list we have bind connection
31:29
we have bind connection
31:29
we have bind connection message and we have own connected
31:32
message and we have own connected
31:32
message and we have own connected message as well uh so
31:34
message as well uh so
31:34
message as well uh so basically this app starts from this
31:38
basically this app starts from this
31:38
basically this app starts from this point first of all we have connection
31:41
point first of all we have connection
31:41
point first of all we have connection and inside this we have signal all do
31:44
and inside this we have signal all do
31:44
and inside this we have signal all do Hub connection Builder uh so this is
31:47
Hub connection Builder uh so this is
31:47
Hub connection Builder uh so this is from the JavaScript SDK of a your
31:49
from the JavaScript SDK of a your
31:49
from the JavaScript SDK of a your signalr service then we need to provide
31:53
signalr service then we need to provide
31:53
signalr service then we need to provide a URL uh of the a your signal or hub
31:58
a URL uh of the a your signal or hub
31:58
a URL uh of the a your signal or hub with whom we will be connected and we
32:00
with whom we will be connected and we
32:00
with whom we will be connected and we will build this connection okay after
32:03
will build this connection okay after
32:03
will build this connection okay after building this connection we need to bind
32:06
building this connection we need to bind
32:06
building this connection we need to bind connection message so now if I go to
32:09
connection message so now if I go to
32:09
connection message so now if I go to connection message function here first
32:13
connection message function here first
32:13
connection message function here first of all we are creating a message call
32:16
of all we are creating a message call
32:16
of all we are creating a message call back and then we are binding an event
32:20
back and then we are binding an event
32:20
back and then we are binding an event correction do on broadcast message so
32:23
correction do on broadcast message so
32:23
correction do on broadcast message so whenever a broadcast message will be
32:26
whenever a broadcast message will be
32:26
whenever a broadcast message will be received this call back will be
32:28
received this call back will be
32:28
received this call back will be triggered and then we also have on eco
32:31
triggered and then we also have on eco
32:31
triggered and then we also have on eco if a Eco message will be received then
32:33
if a Eco message will be received then
32:33
if a Eco message will be received then the same call back will be handled and
32:36
the same call back will be handled and
32:36
the same call back will be handled and after that when a connection will be
32:39
after that when a connection will be
32:39
after that when a connection will be closed this own connection error
32:42
closed this own connection error
32:42
closed this own connection error function will be executed so these are
32:44
function will be executed so these are
32:44
function will be executed so these are all uh basic things which have been
32:47
all uh basic things which have been
32:47
all uh basic things which have been configured for
32:49
configured for
32:49
configured for this okay uh you can also see that we
32:53
this okay uh you can also see that we
32:53
this okay uh you can also see that we also have a signal or Library reference
32:56
also have a signal or Library reference
32:56
also have a signal or Library reference here so so where basic application
33:01
here so so where basic application
33:01
here so so where basic application is running now uh one other thing we
33:05
is running now uh one other thing we
33:05
is running now uh one other thing we need to copy is the CSS file uh so that
33:10
need to copy is the CSS file uh so that
33:10
need to copy is the CSS file uh so that this design looks properly so let's copy
33:16
this design looks properly so let's copy
33:16
this design looks properly so let's copy this and paste it inside
33:21
this and paste it inside
33:21
this and paste it inside our CSS
33:25
our CSS
33:25
our CSS file okay let's append it here
33:31
now let's run the solution and see how
33:34
now let's run the solution and see how
33:34
now let's run the solution and see how it
33:35
it
33:35
it is
33:37
is
33:37
is working
33:38
working
33:38
working so let me set this as a startup
33:44
project and let's run
33:49
this okay so I have started my
33:56
application currently I have two errors
33:58
application currently I have two errors
33:58
application currently I have two errors inside this so I need to remove these
34:02
inside this so I need to remove these
34:02
inside this so I need to remove these body tags as well so let's try to run it
34:18
again okay uh so here you can see that
34:23
again okay uh so here you can see that
34:23
again okay uh so here you can see that this is asking for the name uh so I can
34:27
this is asking for the name uh so I can
34:27
this is asking for the name uh so I can say it
34:36
h so
34:39
h so
34:39
h so here you can see that I have received a
34:43
here you can see that I have received a
34:43
here you can see that I have received a call back which is saying Habib join so
34:46
call back which is saying Habib join so
34:46
call back which is saying Habib join so now which means I have been connected
34:48
now which means I have been connected
34:48
now which means I have been connected with the signal R Hub and let me
34:52
with the signal R Hub and let me
34:52
with the signal R Hub and let me open the same URL inside another
35:01
window and here I can say it
35:08
[Music]
35:10
[Music]
35:10
[Music] Simon Okay so now you can see that
35:13
Simon Okay so now you can see that
35:13
Simon Okay so now you can see that inside this I also have received a
35:17
inside this I also have received a
35:17
inside this I also have received a message the Simon have just joined the
35:19
message the Simon have just joined the
35:19
message the Simon have just joined the group so now these are two different
35:23
group so now these are two different
35:23
group so now these are two different users and both users can communicate
35:26
users and both users can communicate
35:26
users and both users can communicate with each other so so let's see this hi
35:31
Habib okay so Simon is saying hi abib
35:35
Habib okay so Simon is saying hi abib
35:35
Habib okay so Simon is saying hi abib and Habib can reply from here hi Simon
35:39
and Habib can reply from here hi Simon
35:39
and Habib can reply from here hi Simon how are
35:46
you I'm great how are you
35:53
doing then again
36:01
so here you can see that inside this you
36:06
so here you can see that inside this you
36:06
so here you can see that inside this you can communicate with each other as uh
36:09
can communicate with each other as uh
36:09
can communicate with each other as uh you you guys knows that this
36:13
you you guys knows that this
36:13
you you guys knows that this is a group chat basically we are
36:16
is a group chat basically we are
36:16
is a group chat basically we are broadcasting messages to each users so
36:20
broadcasting messages to each users so
36:20
broadcasting messages to each users so let's see a new user just joins and this
36:24
let's see a new user just joins and this
36:24
let's see a new user just joins and this user name is Homer
36:30
let me
36:34
open okay so Omar have joined so he says
36:38
open okay so Omar have joined so he says
36:38
open okay so Omar have joined so he says hi
36:39
hi
36:39
hi guys so you can see that this message
36:42
guys so you can see that this message
36:42
guys so you can see that this message have been received to all users here you
36:45
have been received to all users here you
36:45
have been received to all users here you can see Omar High guys here you can see
36:47
can see Omar High guys here you can see
36:47
can see Omar High guys here you can see Omar hi guys so this is basically
36:50
Omar hi guys so this is basically
36:50
Omar hi guys so this is basically broadcasting messages to all the users
36:53
broadcasting messages to all the users
36:53
broadcasting messages to all the users and if you click on Eco
36:55
and if you click on Eco
36:55
and if you click on Eco button ECO from server so this is just
36:58
button ECO from server so this is just
36:58
button ECO from server so this is just for testing uh purpose whether server is
37:01
for testing uh purpose whether server is
37:02
for testing uh purpose whether server is responding or not and Eco means this so
37:05
responding or not and Eco means this so
37:05
responding or not and Eco means this so Eco Works same for all users so by Eco
37:09
Eco Works same for all users so by Eco
37:09
Eco Works same for all users so by Eco you can see that you can send specific
37:12
you can see that you can send specific
37:12
you can see that you can send specific messages to one user as
37:14
messages to one user as
37:14
messages to one user as well now if I go to my Azure uh signal R
37:18
well now if I go to my Azure uh signal R
37:18
well now if I go to my Azure uh signal R Hub and click on overview
37:22
Hub and click on overview
37:22
Hub and click on overview button so here you can see that
37:24
button so here you can see that
37:24
button so here you can see that currently we have uh three client
37:28
currently we have uh three client
37:28
currently we have uh three client connections because I have opened it in
37:30
connections because I have opened it in
37:30
connections because I have opened it in three clients and we have five server
37:33
three clients and we have five server
37:33
three clients and we have five server requests as well uh here you can also
37:38
requests as well uh here you can also
37:38
requests as well uh here you can also see the maximum message
37:42
count okay so this was how you can
37:47
count okay so this was how you can
37:47
count okay so this was how you can integrate your aure signal or service
37:50
integrate your aure signal or service
37:50
integrate your aure signal or service with asp.net for MVC web
37:54
with asp.net for MVC web
37:54
with asp.net for MVC web application so I will also share uh the
37:57
application so I will also share uh the
37:57
application so I will also share uh the this link with you guys or you can
38:00
this link with you guys or you can
38:00
this link with you guys or you can search it uh from Google for Signal R
38:03
search it uh from Google for Signal R
38:03
search it uh from Google for Signal R Quickstar and here you can see that
38:06
Quickstar and here you can see that
38:06
Quickstar and here you can see that different options are available you can
38:08
different options are available you can
38:08
different options are available you can use with asp.net classic applications
38:11
use with asp.net classic applications
38:11
use with asp.net classic applications you can use with Azure functions and you
38:14
you can use with Azure functions and you
38:14
you can use with Azure functions and you can even use with python and Java as
38:19
can even use with python and Java as
38:19
can even use with python and Java as well okay then if if we uh see this aure
38:23
well okay then if if we uh see this aure
38:23
well okay then if if we uh see this aure portal we have a few other options
38:25
portal we have a few other options
38:26
portal we have a few other options available we have activ
38:28
available we have activ
38:28
available we have activ log so activity log basically shows us
38:32
log so activity log basically shows us
38:32
log so activity log basically shows us all the activity which is being
38:34
all the activity which is being
38:34
all the activity which is being performed on or
38:38
instance you also have access control so
38:42
instance you also have access control so
38:42
instance you also have access control so you can uh control uh the security of
38:45
you can uh control uh the security of
38:46
you can uh control uh the security of your your signal or service we also have
38:51
events okay so currently there is no
38:54
events okay so currently there is no
38:54
events okay so currently there is no event but you can uh start event as well
38:58
event but you can uh start event as well
38:58
event but you can uh start event as well you can integrate this as your signal or
39:01
you can integrate this as your signal or
39:01
you can integrate this as your signal or service with other services as well
39:04
service with other services as well
39:04
service with other services as well course let me reload
39:16
this okay uh then you can see that we
39:19
this okay uh then you can see that we
39:19
this okay uh then you can see that we have a lot of options available uh but
39:23
have a lot of options available uh but
39:23
have a lot of options available uh but let's quickly see the scale out options
39:27
let's quickly see the scale out options
39:27
let's quickly see the scale out options uh so by using this option you can
39:31
uh so by using this option you can
39:31
uh so by using this option you can quickly scale out your pricing tier you
39:34
quickly scale out your pricing tier you
39:34
quickly scale out your pricing tier you just need to uh click on the change
39:36
just need to uh click on the change
39:36
just need to uh click on the change button select a new plan click select
39:41
button select a new plan click select
39:41
button select a new plan click select and your plan will be scaled out and
39:43
and your plan will be scaled out and
39:43
and your plan will be scaled out and then now you can handle 1,000
39:47
then now you can handle 1,000
39:47
then now you can handle 1,000 connections as well so this is how
39:50
connections as well so this is how
39:50
connections as well so this is how whenever your requirement is basically
39:54
whenever your requirement is basically
39:54
whenever your requirement is basically increasing and you need to handle more
39:56
increasing and you need to handle more
39:56
increasing and you need to handle more users so you can uh quickly scale out
39:59
users so you can uh quickly scale out
39:59
users so you can uh quickly scale out your application uh then we have scale
40:02
your application uh then we have scale
40:02
your application uh then we have scale out option as
40:05
out option as
40:05
out option as well okay so inside scale out option we
40:09
well okay so inside scale out option we
40:09
well okay so inside scale out option we have manual scale out okay so here you
40:13
have manual scale out okay so here you
40:13
have manual scale out okay so here you just need to increase the number of
40:15
just need to increase the number of
40:15
just need to increase the number of units that you need and then you can
40:18
units that you need and then you can
40:18
units that you need and then you can quickly scale out your AO signal or
40:22
quickly scale out your AO signal or
40:22
quickly scale out your AO signal or instance we also have a course policy as
40:25
instance we also have a course policy as
40:25
instance we also have a course policy as well as you know that uh most of the web
40:29
well as you know that uh most of the web
40:29
well as you know that uh most of the web application are using as your signal are
40:32
application are using as your signal are
40:32
application are using as your signal are using JavaScript and this JavaScript is
40:35
using JavaScript and this JavaScript is
40:35
using JavaScript and this JavaScript is running inside browser on a specific
40:38
running inside browser on a specific
40:38
running inside browser on a specific domain so you can use cross origin
40:41
domain so you can use cross origin
40:41
domain so you can use cross origin resource sharing policies uh to control
40:45
resource sharing policies uh to control
40:45
resource sharing policies uh to control the security of your application so you
40:48
the security of your application so you
40:48
the security of your application so you can specify the allowed regions here uh
40:51
can specify the allowed regions here uh
40:51
can specify the allowed regions here uh basically currently it's
40:54
basically currently it's
40:54
basically currently it's uh static which means all uh Origins are
40:58
uh static which means all uh Origins are
40:58
uh static which means all uh Origins are allowed and even you can specify a
41:01
allowed and even you can specify a
41:01
allowed and even you can specify a domain and only these domains will be
41:03
domain and only these domains will be
41:03
domain and only these domains will be available to access this one so these
41:05
available to access this one so these
41:05
available to access this one so these are different Security Options available
41:08
are different Security Options available
41:08
are different Security Options available for Azure signal or Hub Service as well
41:12
for Azure signal or Hub Service as well
41:12
for Azure signal or Hub Service as well uh
41:13
uh
41:13
uh so let's go back to
41:21
the okay uh so this was handsone demo
41:25
the okay uh so this was handsone demo
41:25
the okay uh so this was handsone demo experience with a signal R Hub we have
41:29
experience with a signal R Hub we have
41:29
experience with a signal R Hub we have created a z signal R service using
41:31
created a z signal R service using
41:31
created a z signal R service using Portal app uh then we created an asp.net
41:34
Portal app uh then we created an asp.net
41:34
Portal app uh then we created an asp.net for MVC application we installed few
41:37
for MVC application we installed few
41:37
for MVC application we installed few prerequisite packages then we used a
41:40
prerequisite packages then we used a
41:40
prerequisite packages then we used a quick start go snippit for showing you
41:44
quick start go snippit for showing you
41:44
quick start go snippit for showing you how we can
41:46
how we can
41:46
how we can build we can uh build chat room using as
41:50
build we can uh build chat room using as
41:50
build we can uh build chat room using as your signal
41:51
your signal
41:51
your signal Service uh so I hope you have enjoyed
41:54
Service uh so I hope you have enjoyed
41:54
Service uh so I hope you have enjoyed this uh in next episode we will will
41:57
this uh in next episode we will will
41:57
this uh in next episode we will will talk about securing secrets with Az your
42:02
talk about securing secrets with Az your
42:02
talk about securing secrets with Az your keyboard uh so basically uh in this
42:06
keyboard uh so basically uh in this
42:06
keyboard uh so basically uh in this episode we will focus on aure keyo a
42:10
episode we will focus on aure keyo a
42:10
episode we will focus on aure keyo a cloud service for securely storing and
42:13
cloud service for securely storing and
42:13
cloud service for securely storing and accessing Secrets keys and
42:16
accessing Secrets keys and
42:16
accessing Secrets keys and certificates uh this episode will guide
42:18
certificates uh this episode will guide
42:18
certificates uh this episode will guide you through setting up and managing key
42:21
you through setting up and managing key
42:21
you through setting up and managing key VA integration with your applications
42:24
VA integration with your applications
42:24
VA integration with your applications and following best practices
42:28
and following best practices
42:28
and following best practices for security and compliance and this is
42:30
for security and compliance and this is
42:30
for security and compliance and this is ideal for Security Professionals
42:32
ideal for Security Professionals
42:32
ideal for Security Professionals developers and it administrator who aim
42:35
developers and it administrator who aim
42:35
developers and it administrator who aim to enhance their security posture and
42:38
to enhance their security posture and
42:38
to enhance their security posture and manage Secrets efficiently uh so I think
42:41
manage Secrets efficiently uh so I think
42:41
manage Secrets efficiently uh so I think you guys have uh encounter this problem
42:45
you guys have uh encounter this problem
42:45
you guys have uh encounter this problem where you have to manage your app
42:48
where you have to manage your app
42:48
where you have to manage your app Secrets uh for production apps and for
42:51
Secrets uh for production apps and for
42:51
Secrets uh for production apps and for development environments and for staging
42:54
development environments and for staging
42:54
development environments and for staging environments and this is I think a very
42:57
environments and this is I think a very
42:57
environments and this is I think a very uh complicated toas so you guys if you
43:01
uh complicated toas so you guys if you
43:01
uh complicated toas so you guys if you guys have uh any curiosity for this you
43:04
guys have uh any curiosity for this you
43:04
guys have uh any curiosity for this you can join this next
43:06
can join this next
43:06
can join this next episode and thank you for being the part
43:10
episode and thank you for being the part
43:10
episode and thank you for being the part of seop corner Islam B chapter you can
43:13
of seop corner Islam B chapter you can
43:13
of seop corner Islam B chapter you can uh you can watch the previous episodes
43:15
uh you can watch the previous episodes
43:15
uh you can watch the previous episodes of this show uh by cop corner.com
43:20
of this show uh by cop corner.com
43:20
of this show uh by cop corner.com as your essential and I will also uh
43:25
as your essential and I will also uh
43:25
as your essential and I will also uh push this code on my uh GitHub Rao you
43:28
push this code on my uh GitHub Rao you
43:28
push this code on my uh GitHub Rao you can you guys can access it from my
43:31
can you guys can access it from my
43:31
can you guys can access it from my GitHub Rao which is Habib developer
43:34
GitHub Rao which is Habib developer
43:34
GitHub Rao which is Habib developer asure essential series uh hopefully you
43:37
asure essential series uh hopefully you
43:37
asure essential series uh hopefully you guys have enjoyed this session see you
43:40
guys have enjoyed this session see you
43:40
guys have enjoyed this session see you in next episode have a good day
43:43
in next episode have a good day
43:43
in next episode have a good day [Music]