>> Azure SignalR Service brings
real-time messaging to your serverless apps.
With bindings for Azure Functions in just a few lines of code,
you can instantly broadcast messages to
thousands of connected clients all over the world,
Anthony Chu is here to show us how today on Azure Friday.
[MUSIC]
>> Hey everyone, Donovan Brown here
with another episode of Azure Friday.
I'm here with Anthony,
and he's going to show me how to use
Azure's SignalR Service with Azure Functions.
So why SignalR?
>> So Azure SignalR Service is actually managed service that
allows you to connect to
many clients around the world using WebSockets,
and then you can send messages to it,
and it works really well with Azure Functions using
Azure Function bindings infrastructure,
would be pulling bindings,
and then you can just output messages,
and you can broadcast them to everyone who's connected,
or subsets of those clients that are connected.
>> Right. But connecting devices
isn't what really makes SignalR cool,
what's really cool is that you now are getting like
real-time update on everybody, right?
>> Yeah.
>> Okay.
>> So you can send real-time
instant messages too. Yeah, pretty much anywhere.
>> Yes. I think we use SignalR on
the Azure DevOps team where when I drag a combine board tile,
everyone else on my team no matter where they are
looking at that board actually
sees that tile move at the same time.
They're using SignalR too, right?
>> Yeah. That's a great example of it.
>> All right. Perfect, cool.
So obviously browsers, where else can I use this stuff?
>> Yeah. So it works on desktops,
mobile apps, as well as games as well.
So all those things connect to
Azure SignalR Service over WebSockets,
and they also falls back to
the different transport as well if WebSockets isn't available.
>> Okay, so WebSockets isn't
the only way to get this information across,
and you're not crippled if you don't have WebSockets,
you can use these other mechanisms to get the information across.
>> Yeah. Okay, and as a programmer,
you don't even care how it works.
>> All right, great.
>> Yeah. So with
Azure Functions and the bindings for Azure SignalR Service,
you can send messages really easily with a couple lines of code.
>> Okay.
>> Then that means if you have an HTTP requests that you want
to trigger a message to be sent to all your clients,
you can do that on a timer,
as well as connect similar service to
a bunch of different on Azure services as well.
So if you want to send messages based
on events from Event Hubs, Event Grid.
Something happening in the change of
Cosmos DB or anything like that,
we'd make that really easy to do.
>> Okay, sounds good.
>> Yeah. Then if that's still not enough,
we can also use Azure Logic Apps to trigger from
many data sources from both inside Azure and outside.
>> Okay.
>> Then, we can
take a look at the different languages that we support.
So Azure Functions supports C Sharp , JavaScript,
TypeScript, Java, and Python and soon, PowerShell.
As far as clients that can connect
to Azure SignalR Service to receive these messages,
we support Client SDKs in JavaScript,
TypeScript.NET Standard, which means it
covers Xamarin well as well as Java.
>> Got it. Cool. Now, you're going to show us how this works.
>> Yeah.
>> Cool.
>> So let's talk about how we
can create an instance of Azure SignalR service first.
So here I am in the portal.
I will just search for SignalR,
and then there it is right there,
and we choose Create, and then let's fill in the name,
and then choose your pricing tier.
We actually provide a free tier.
So you not to pay any money if you just want to try it out.
Then, we want to choose the Serverless mode,
because we can also use Azure SignalR Service to scale our
ASP.NET and ASP.NET Core SignalR applications as well.
>> Okay.
>> So we're going to choose "Serverless," and then if we click,
"Create", we'll get an instance in the couple minutes.
>> Okay.
>> Now once that's ready, we're going to build an app like this.
So this a shared whiteboard application
that I built using HTML5 Canvas.
You can see as I draw,
the lines I'm drawing are being sent to other browsers.
I can also change colors if I wanted to, and draw.
I can also draw over here.
It's all working, and it's pretty much working in real-time.
>> Got you.
>> So let's take a look at the code.
>> Yep.
>> So this is the HTML. There's not much going on here.
It is this one Canvas element,
and then I have some JavaScript here
and every quarter of a second,
250 milliseconds, I am
sending the lines that I've drawn to an Azure Function,
and then that function is relaying
those lines to the other clients that are connected.
>> Okay.
>> All right. So let's take a look at
the functions that the application uses.
>> So we created the SignalR resource in Azure and at some point,
I'm assuming I get what a URL or something
that I put in my code? Where is the action?
>> It's a connection string.
>> Okay.
>> So I have set it here in my "Settings" file,
so you can see I have a connection string there.
>> Got it. So since this is just a web application,
everyone who visits the website would be
using the exact same SignalR connection string and therefore,
would see the same thing that everyone else is seeing.
>> Yeah.
>> Then now that have a connection string,
there has to be like I said,
there's a client-side API that I
must be passing that to that says, "Okay.
Now, you're the person that I'm going to
use to tell to do stuff," right?
>> Yeah. We actually create a function on
negotiate that the SDK talks to,
because don't forget the connection string
is only known to Azure Functions.
We don't want the pass it out everybody.
>> Sure.
>> So the SDK needs to call an endpoint to basically
retrieve basically a time-limited token.
> Okay.
>> So it's like how you get a SaaS to
connect to Blob storage for example.
This is pretty much the same thing here.
So it's a very simple function,
it's couple lines of code, and you're up ongoing.
But the actual functions that do
work are the functions here in this Java files.
So I'm writing this in Java,
and you can see,
it's just a regular HTTP trigger,
but I'm bringing in a SignalR output binding.
Then when the lines that I've
drawn are posted by the web application to this function,
we're simply building out a Azure SignalR message object,
and we're just relaying the collection
of strokes back to the rest of the world.
>> Okay.
>> Then also have one here,
so when someone clicks the "Clear" button,
we're just sending out a message to everybody
to clear their Canvas.
So we're going to take a look at
how we as a clients connect Azure SignalR Service.
So in my JavaScript file in the browser,
you can see that I have a few lines here that I'm using that
SignalR SDK to connect to the Azure Functions.
So this is actually the Azure Functions URL.
>> Okay.
>> You'll know how to call that function.
Get the connection string or basically,
the time-limited access token,
and then use that to make a connection,
and that happens when you call start.
Then in-between here, I'm just adding a couple of
event handlers for when the server says,
"I have some news strokes for you to draw," or "I want you to
clear the Canvas." That's all there is to it.
>> Interesting.
>> Yeah.
>> But everyone that visits that particular URL,
so I'm just curious real quick.
What if I wanted to have almost like there's
a room that when you and I are drawing,
you and I see it, but then when Corbett,
our engineer and Robert trying to use another version,
how would I then qualify
that you should only see the lines that he's drawing,
and I should only see the lines that you're drawing.
>> Yeah. So there's a couple of mechanisms
that we can use to make that happen.
One is a concept of hubs,
which are you can think of them as namespaces office.
So you can actually have different, for instance,
if you have different rooms for example,
each of those can be represented by hub.
>> Okay. Do I used the same SignalR resource and just qualify
what hub or what group I'm talking
to for it to syndicate the information to those individuals?
>> Yeah. I'm actually going to show you that here.
So in my function,
I actually specified the hub that I want to send messages to.
>> I see.
>> But this can be dynamic if I wanted to.
>> Got you. Okay, that makes sense. Cool.
>> Yeah. Then the other option is these groups.
You can actually group connections together,
and then you can address messages to groups instead of everybody.
>> Got it. But with key is that I don't
need multiple SignalR resources in Azure,
I just need to be able to qualify
what hub I want you to talk to you,
and it takes care of the complications
of making sure that only those people in that same hub,
and that would be like an extended chat room name
or group name whatever you wanted to call it,
that would make sure that they only get the right messages.
>> Yeah.
>> Very cool. What else can I do with this?
>> Yeah. Let's see another example.
So let's get rid of this thing here.
So this is a JavaScript app that runs in the browser.
I'm going to go ahead and start it,
and what it's going to do is it's going to do is send
what my browser is hearing from
the mic up to the Cloud to Azure Speech API,
and then it's going to get transcribed,
and also translated to six different languages,
and being sent back down to this browser on the left side.
>> Wow, yeah.
>> All right. So far, we haven't done any SignalR yet.
>> Okay.
>> Then, what this browsers doing it's actually taking
those translations and posting that off to an Azure Function.
Then and that function is relating it off
to these two browsers on
the right and potentially, thousands more.
What you can do on these browsers on
the right is that you can see that
it's only showing the translation that we have chosen,
and we've got to change it as well.
So we've got to change this to Japanese if I wanted to,
and you can see that right away it's switches.
When I change the drop-down,
it actually opts me into
a different group that SignalR is sending to.
>> So back to what we were talking about a second ago. Okay.
>> Yeah. You want to see the code?
>> Sure.
>> All right. Let's do it. So you
can see that I have a translator class here.
This is all running on the browser side.
>> Okay.
>> I've just written this, I've pulled them
the cognitive services speech SDK,
and then it's doing all the work for
me to connect to the microphone.
I'm telling it what language I'm speaking.
I'm telling it how many languages to translate it to,
and then just more or less tell it to start.
Then it goes off and starts listening to the mic,
and sends my audio off to the Cloud.
Does all the transcribing,
the translation, and sends it back to my browser.
Then when that happens, all I'm doing is that I'm
posting it to this captions URL,
which happens to be an Azure Function.
So I'm taking the six
different translations and just posting that off.
>> Okay.
>> Now, let's take a look at the function that actually does this.
So this is the captions function,
and we're not doing too much with it.
So this is a JavaScript function.
So the bindings are defined in a different file.
So you can see that I have the SignalR output binding again.
Just define a slightly different way.
I'm using a hub name of captions,
and then I'm not doing a heck of a lot here in my function.
I am just taking the captions from the body of the HTTP request,
and then I am just smallest,
slitting them off into six different messages.
Then I'm using the map function in JavaScript
to create six different SignalR message objects
to send off to SigalR Service.
All I'm doing is I'm just returning it,
and the binding that's all the work to actually
talk to SignalR Service and send those messages.
Then the only other interesting function to look
at is the one that switches languages.
So whenever we change the dropdown, that browser,
we'll call this function here,
and all we're doing is that we're
reading in all the languages that we support.
Then for every language that we support,
if the user didn't choose it,
I send a remove group message,
and then if that's the language that the user selected,
I send it Add to
Group message to the Azure Function or to Azure SignalR Service.
>> Okay.
>> That's that's what
opts people out of those groups that they're not listening to,
and opts them into the group that they want to listen to.
>> Got it. So back again, this
goes right back to what you were saying.
This is something we could have done
to have different drawing rooms for each one of
us is just opt in and out of the room
where you want to see the drawing line that's actually drawing.
>> Yeah.
>> All right. Very cool.
>> Yeah. That's all that took to create that up.
>> This is pretty cool stuff.
So again, SignalR allowing us to speak the thousands of people,
and you weren't bluffing when you said it just
takes a few lines of code to actually get this stuff to work.
>> Yeah.
>> Awesome. Well, we learning all about using
the Azure SignalR Service here on Azure Friday.
[MUSIC]