.Net Foundation On .NET, 9 Aug 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Going real-time with ASP.NET Core SignalR and the Azure SignalR Service

Description

Online chat, realtime dashboards, social media sites and even games are just a few examples of where real-time technology can make a huge impact on user experience. ASP.NET Core SignalR is an open-source library that simplifies adding real-time functionality to your applications.

In this episode, Anthony Chu (@nthonyChu) comes on to talk about how we can get started with ASP.NET Core SignalR. He also shows us how the Azure SignalR Service allows us to easily scale our real-time connections.

01:26 - What is SignalR?
02:10 - Why would we want to use SignalR instead of polling?
03:03 - (Demo) How do we setup SignalR?
08:48 - What are the scaling options for SignalR?
12:00 - How does the SignalR service help with scaling?
13:40- (Demo) How do we add the SignalR Service to an application?
18:07 - How can other languages or services integrate with Azure Functions?
19:23 - (Demo) How can we wire up the Azure Functions SignalR Binding?
25:17 - Where we can learn more and check out the demos?

Useful Links
Introduction to ASP.NET Core SignalR: https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.1&WT.mc_id=ondotnet-channel9-cephilli
What is Azure SignalR Service: https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-overview
Serverless Trivia: https://github.com/anthonychu/serverless-trivia
CosmosDB Real-time Update demo: https://github.com/anthonychu/cosmosdb-signalr-realtime-updates
Azure Functions Binding for Azure SignalR Service: https://github.com/anthonychu/AzureAdvocates.WebJobs.Extensions.SignalRService
Create a Free Account (Azure): https://aka.ms/azft-net

A

On this episode of the on.net show, we're going to learn how we can build real time, applications using signalr, and also the azure signalr service. save the date for .net conf 2018, on september 12th,.

A

Through 14th .net conf is a free three day virtual developer, event, co-organized by the .net community and microsoft.

A

you'll, enjoy a wide selection of live sessions that feature speakers from the community, and the .net product teams. head over to www.dotnetconf.net to learn more and save the date.

A

Welcome to another episode of the on.net show,, my name is russell philip, and with me today I have anthony chu.. What's going on anthony?, not bad., thanks for having me.

A

so,, you are actually here to talk to us about the azure signalr service and signalr in general,, but before we do that,, why don't you start off with just telling us a little bit about yourself, who are you?? What do you do? There?, sure. so,? My name is anthony chu.

B

I'm a cloud developer advocate at microsoft.

B

so, same as russell, and we actually working the same team, with a focus on.net. so,. Lately I've been working quite a bit with.

B

Asp.Net core signalr, and also with the new azure signalr service.

B

that was announced back at build., I'm also with azure functions, to see how we can actually take some of the signalr goodness and integrate it with azure functions.

B

so,. We can have serverless websockets, if you will.

A

Okay. so, you've been saying: signalr. we've used that word a couple of times before,, but what exactly is signalr?? What can we do with it?.

B

Yeah, so signalr it's a library for asp.net, and in this case it's been a core that allows us to add real time, capabilities to an asp.net core application.

B

so,. What I mean by real time, is,, if you imagine some of the use cases for real time.

B

so for instance,. If you have a stock app or a stock website where you go there, and the server is pushing real time stock prices to you,.

B

And the screen is updating it real time. or maybe your looking at some flights and you look at the map,. You see some planes moving around in real time.

B

so,. Those are some of the scenarios that signalr enables.

B

So,, what, if I know in the past.

A

We used to do this thing where we just pull the server, right? like hey,, we're ready for your information., we'll just ask for it. yeah.. What's the difference with me doing that and using something that's like signalr, for instance, that's real time.

B

Yeah. signalr by default, uses websockets if possible,.

B

And it's a lot more efficient to use. Websockets.

B

websockets is a persistent and bidirectional connection.

A

So,, that not only can the client push.

B

Information obviously send messages to the server,.

B

The server can use the connection to send information in real time., basically push information to the client. so, you get stuff right away instead of waiting, the five minute or five seconds, or whatever you're pulling into [inaudible].

A

Sure, so, instead of my clients having to worry about.

A

hey,, I need to check., I need to check.. Instead, the server would be like,, oh, hey,, it's ready, and I'll. Just give it to you, and here you go.

A

then,, now on our side,. We can react to that event or that change whenever it comes up.

A

Yeah. okay., that sounds pretty good.. Why don't we just start dive into demos and see what it looks. Like.

B

Yeah. so, here I have an asp.net core application.

B

Pretty much a vanilla, asp.net core application that I've already add signalr to., it happens to be a chat application, as I think we're required to have a chat application whenever we demo signalr.

B

so,. That's really the main piece.

B

That makes up any signalr application,, which is a hub, which is really a class that has method's on it, that clients can call.

B

sure. so,. Here I have a hub with a send method.

B

so, whenever someone types a message and sends a message: it's gonna invoke this method on the hub,.

B

And we're going to pass on the message text., then the more interesting piece is that, inside the hub or a hub method,.

B

We have access to this client's property, and then we actually address either all the connections or a subset of connections and then actually push messages down to it.

B

here,. I'm actually invoking a method on the clients called new message,.

B

And passing along the sender, information, and as well as the text of the message.

A

Right. so,, when you said client. client can be anything., it could be a web browser,, it could be a xamarin app,, it could be a desktop. Application. client doesn't necessarily mean it's a web thing, right?.

B

Yeah. absolutely., it can be anything. yeah. so,. Typically, we start out with,.

B

Most people start out with a javascript app that's running in the browser.

C

B

But signalr also has a .net sdk, as you mentioned.

B

So, we can actually use that inside of xamarin. sure. we're also working on java and c# clients,. Sorry, c++ clients.

A

C++ got it. okay,, cool., yeah. so,, let's see where you actually wire it up.. This is the hub,. But where do I actually say,?

A

Hey asp.net,? I want you to enable my signalr functionality.

B

Yeah. sounds good. so,, as with most things in asp.net,.

B

We would do this in the start of cs.

B

So, here you can see that I am just calling one line of code services.addsignalr..

B

This adds all the services that needed.

B

For signalr to run into the ioc container.

B

Then down here, I'm actually running app.usesignalr,.

B

And that adds the middleware that's required, to, that actually lights up signalr in our application.. We're letting signalr know.

B

About the different hubs that we have in our application.

B

here, we we only have one hub named chat, and we're mapping it to a route named /chat.

B

so,, pretty much. If I had more than one hub.

A

And have more than one routes per hub.

C

Is that how it works?.

A

B

So,, I think the last thing that we want to show you.

B

Before we actually run the app is the client side javascript that connects to the hub..

B

Oh yeah, sure.. Let's take a look at that. so,. This happens to be a vjs application, but it could be using any javascript framework, or just minola javascript. If you want it to., the main couple of pieces is that,.

B

You can see here that I'm pulling in the signalr client library in javascript from a cdn.

B

You can also pull it in from npm if you want to.

B

Then the key piece here is that, to establish a connection,. It's just a couple lines of code. here, I'm saying, build hub connection with url/chat.

B

Here you see that I'm wiring up a function basically to listen to.

B

The new message, event that can be booked by the server,.

B

And I'm writing some code, or running some code.

B

Lastly,, I am running connection.start that actually starts a connection and then, when the connection has been established, I'm just basically telling the page that it's ready, and then it lights up the ui so that we can actually start.

B

so,. We walk through the steps really quickly.

A

It's pulling the signal on client,, I create a connection, and then I say,.

A

These are the messages or these are the events that I want to subscribe. To.. I give it the actions that I want to have to those different methods, and then I say, well start. now, asynchronously,. It will just listen for those messages and as they come, in, they'll just react to them, based on whatever code. It is that you just wrote.

A

yeah. so,. Let's go ahead and start this application.

B

It should open up in the browser in a moment.

B

Here it is. it's a very simple chat: application.

B

If I just type, "hey, cecil", it'll show up right, away.

B

You can see that I'm actually logged into this application. so, signalr chat has the same context, in terms of the asp.net identity, information.

B

So, you can actually reach into that context and find out who you are if you're logged in. now,, let's quickly open up another browser to show you.

B

That this is actually real time and it's actually happening across browsers.

B

Here, I'm going to say, "hi!" and it shows up in both,.

C

And I happen to be not logged in this case.

B

So,, I'm actually seeing anonymous here.

A

Cool., that's pretty good. so,, pretty easily,!

A

I can bring in the nuget package, I'm guessing on the .net site.

B

Yeah., you actually don't have to do that,, because it's actually part of the app package that's brought in.

B

By default? yeah,, by default in an asp.net core application,.

B

2.1 application. so,, this particular line here,, it's a meta-package, and it includes basically everything.

B

That microsoft, produces.

A

Except in that release. yeah.

B

Got it. so,, it's a signalr happens to be in there.

A

So, then, from a.net perspective, or from an asp.net core perspective,, I don't really have to do anything, other than say, inside of my startup at cs, I had signalr,, I use signalr, map, my route, create the hub,, and then we get going, right?.

C

A

Cool,, that's sounds pretty good. yeah. now,. Let's talk about,, you are just running this in your machine, and then, obviously,. It's just your single machine,. You don't have a ton of users, that are hitting you and hammering you. right?.

C

A

What happens when it's time for us to scale some of these connections up??

A

What are some of the strategies that we use to do that with signalr, as it is right, now?.

B

Yeah. great question. so,. I have a couple of slides to demonstrate how scaling works in signalr.

B

So,, here's a picture of what's happening right now with our application.. We have one instance, happens to have run on my machine, can run in the cloud..

B

We have one or more clients connected to it., pretty straightforward.

B

but,. What happens to the actual scale of your application? right? so,. If you have more than one version, or instance of the application running,, you can have clients connected to either instance.

B

in this case,. When instance, one wants to broadcast messages to all clients,.

B

It only knows about the clients that are connected to it.

B

doesn't know about any other instances: they're running.

B

so,, with signalr in really any real time. Framework,.

B

There's usually an ability to add on a backplane,.

B

Which allows different instances of signalr running to talk to each other, so that it can do things like send messages to all connections.

B

so,. The job of the backplane.

A

Essentially, to propagates that connection information between those different instances.

A

Of signalr that's running pretty much?.

B

Yeah. signalr core or asp.net core, signalr,, we laid out,, we support, redis, and so uses redis pops up to fulfill this functionality.

A

So, is that package also available to that meta-package too, or that's something [inaudible]?.

B

I'm going to believe that we will put it in, as a separate meta-package. got it. but,, that's really just pull it in and then enable it, or just basically a couple lines of code,, and then it starts using a backplane.

B

got it. so,. How easy is.

A

This backplane for me to set up, right? because I'm guessing, as my application starts to scale up and now we have these multiple instances of signalr,.

A

I got to create,, I guess, my redis connection or my redis servers.

A

yeah.. I've got to plug that in and I'm sure I got to have to do with metrics and monitoring on that as well, right?.

B

Yeah. so,, you do have to set up your own redis instance, and typically you want to set up in a way that is highly available?.

C

B

So, azure is an easy way of doing that. you just go to azure and say, "hey,, give me a redis cluster.

B

Basically, that is highly available,, and then you supply the connection string to signalr, and that works fine.

B

But, there's a couple of other issues about a round rolling this, like implementing the scale yourself..

B

Another is that you can see here that the clients are actually connected to one specific instance, and forcing all to work. Properly,.

B

The clients need to always connect to the same instance.

B

so,. You need to actually set up.

B

In front of the application., you also want to set up sticky sessions,.

C

So that your clients are always talking.

B

About to the same servers for this to work, properly..

B

Is that something that's pretty.

A

Easy to set up or is that?.

B

It is. so,, you have to basically work with the whatever load balancer. You have and been using-.

A

B

-To make that happen, or if you're, using your azure web apps, use to flip a switch and says.

B

Enabling the sessions.

A

Yeah,, give me a session affinity and is there.

B

Got it. but, there's an easy way to do this, and that leads us.

B

Into signalr service in azure.

B

So, this is like another view of the application that we have right. Now.. You can see that both web traffic and signalr traffic talk to the same instance, basically, the same applications. but,. Quite often you have perhaps the app also has a web api. That's heavily hit,, or maybe you want to support like a lot of connections in signalr.

C

B

When you're scaling your application,, you have to scale both of these, when really what you want is you want to scale them all? Independently.

B

So, a couple months ago,, we came.

B

Up with a new service called azure signalr service, that allows to decouple the connections from the asp.net core application.

B

So, that now, clients actually connect to the signalr service for their signalr connections,.

B

But you can still hit the regular website. Other.

B

Than asp.net web app for their web traffic.

B

So,, quite often, if you just want to support, say a thousand or a few thousand signalr connections,, you set up the scale of the connection,, but you can still have just one instance of the app running. If you wanted to.

A

Okay. so, now, instead of me managing that redis cluster or whatever I'm using for my backplane,, I could just use,.

A

I could put my apps in the signalr service.

C

A

Now,, this is again a managed service. That's there to handle that backplane and handle some of those connections for me,. So I don't have to worry about that.

B

So, all this stuff, running the backplane, sticky shut sessions,. All that stuff is managed for you.

A

So, now,: what do need to do that plug that into my application? hey, good question. so,? Let's.

B

See how we get to add that to our application that we've been working at previously.

B

so,, let's go into the azure portal,.

B

And I'll quickly show you how you can create a signalr service. so,. You actually go into search here,, just search for signalr, click, "create" for the service.

B

There's actually not a lot of options that you have to supply.. I usually give it a name. choose a region,, and then you can choose a pricing tier.

B

so,. You can actually have a signalr service instance for free, supports up to 100 connections, or you can basically buy a thousand connections at a time, and with backed by sla and a higher message board as well.

B

Right now, in preview,, we are allowing you to scale up to 10 units,, but hopefully, by the time we hit general bill,, we've got to scale up to a lot more than 10 units.

A

Okay. so, with 10 units,, giving you 10,000 connections.

A

so, right now, if, as a developer hobbyist,, so I'm just playing around a little bit.. I could just start off with the free one. yeah. then,. Have it run my applications and test out what that scale up, feels like.

A

yeah. then,. Whenever I'm ready to go to production or run some heavier workloads,, I could switch over to a higher tier, standard, or get more units or something like that.

A

B

Okay. so, I've already have an instance created,.

B

So you want to watch me, create one and wait for it to come. Up.

A

Another thing I noticed that it says there and even says this on the screen as well,. It says: "preview".

A

so,. Does that mean that we're not ready for primetime yet or what does mean?

A

yeah. so, as with a lot of previews in azure,.

B

Is for developers and customers to go and try it out.

C

B

I've been using this for a while,, it works pretty well. hopefully, pretty soon we'll be able to release it. In general, availability.

B

got you., so here,, it's a pretty standard kind of azure kind of portal,.

B

You can see some metrics in our application..

B

You can also kind of see keys, here,.

B

You can scale up, and scale out.. What I'm going to do here is I'm actually going to grab that connection. String,.

B

And we're going to add this to our application.

B

So,, the first thing that we have to do is add a package to our nuget package to our application.

B

So,, I only have one here: that's commented., I'll uncomment it and save it,.

B

And that's really all we need to do.

B

So, we're bringing in the azure.signalr package and there's only two lines of code that we.

B

Have to add, in order to enable azure in our service, in our application.

B

So, we'll go back to our startup.cs,.

B

And at this line,.

B

We're adding the signalr services. I.

B

Will also go ahead and add on the azure.signalr services as well..

B

So it's the first line that we have to change and now,.

B

The second line that we have to change is instead of saying usesignalr,. We are going to use azure.signalr, and that's it.

B

So, and the other thing is,.

B

You might be wondering,, how does it know about the connection string. yes.? We have to give it to connection string. so,. We can pass it here, or we can set environment variable.

B

just to keep it as easy as it basically, does a hard code in our application right, now. sure. now,. When we run the application.

A

So now, I'm expecting what's going to happen, is that, instead of it just routing locally,, it's going to go out and connect to azure and it's going to use and signal. As my back plate?

A

yes. so, now, hopefully, we should be able to scale to a lot more users than just you and the other browser.

B

A

Now, you're talking to your machine.

B

Yes. so, we'd type, hi here., it still works. it all still works. yeah. so,. The only way to really tell that you're actually running against the service is if we actually go into the "developer tools" in the browser,.

B

And we can see down here that it's actually connecting to our service instance., that's true.,.

A

If we go back over to the portal,, would we be able to see any connectivity or any metrics or anything like that?.

B

Yeah,, probably in a couple minutes., I'm not sure if it actually happens right away,, but what you would expect is if it was trying to see little spikes like this.

A

Okay. I got you. yes., I noticed at the top,. You could see "show data" for an hour or six hours. right.

C

So, there's some a little bit of delay but eventually,.

A

That data would populate and you'll be able to see. That.

A

A

okay., so now, we saw how we could kind of plug my existing app inside of, to use azure signal as my back plate.

A

but now,. What if I had like a non-.net core.

A

Application or non traditional single core application,.

A

And I wanted to plug in my,, I don't know, like my javascript application or something like that?. Do we have another way that they can kind of come in and kind of plug in and kind of play together in the same space?.

B

Yes, we actually hear this question a lot, and that actually leads us really well into the next topic. okay. so,. A couple of questions that we typically get are: how do we integrate azure signalr service really easily with other azure services?

B

yes. also,? How do we get the signalr goodness into other languages as well?.

B

Thankfully, there's a service in azure that works really well with other azure services and supports mobile languages, and that is azure functions.

B

okay. so,. What we have built is an azure functions, binding.

B

For signalr that allows you to really easily output messages to a signalr hub,.

B

So that and effectively replaces the logic that it would have been running inside, of nhp core application for talking to the hub,, so they can run this effortlessly. cool. so,. Let's take a look at this model.

A

Let's see how this kind of plugs together. yes, you bet. so,. I have an application right. Here.

B

So,, I think the best thing to do is actually try to run this application. First. okay.

A

So,, what does this application do right, now??

A

Is this the same when you were running before, or is this something?.

B

This is something different, so no more shut, ups.

B

so,, I'm going to f5 this application right, now,.

B

And this starts up the azure function, host.

B

so,, it's an azure function, project, that's running locally on my machine, and the other thing I need to do is actually open up this web page.

B

looks like it's already have running,, so we let me open it. Again.

B

So,, it's a really simple kind of flight prices.

B

Sure. each one of these prices are pulling from a document inside of the cosmos db.

A

And we're able to update this live when.

B

An update is made to a document inside of the cosmos db.

A

So,, how does that information kind of flow all the way around, right? yeah. so,? I have cosmos db and cosmos db works on the concept of collections.

A

yes. right? so,. I have a cosmos db collection,. I have inserted a record.. How does that go from triggering a signal or notification all the way over into the browser?.

B

Yes,, so I'm actually showing you the azure function that actually does this. so, we're using azure functions to integrate the cosmos, db, change, feed.

C

B

With signal in our service,.

C

It actually broadcast these events when they happen.

B

So here, we can see a function called "ondocumentchanged"..

B

I will quickly take a look at the function of json,, which describes the bindings that are available to the function. sure. so,. The first binding you'll see is the cosmosdbtrigger.

B

so, we're telling it to watch a collection named "flights",.

A

And whenever there's a change,.

B

Run this "execute this as function", and I'm also adding a second binding to it, which is our signalr open, binding and that.

B

Allows us to output messages to signalr hub and named flights.

B

So, with those two things configured,, we can take a look at the function. Itself.

B

so,, this particular function, happens to run,. It used javascript,, but this could be c#,. It could be java, python,.

B

Anything else that functions b2.

B

Yeah. will support. so,. We can see here that the data that comes from the trigger is passed directly into the the function itself.

B

That happens in the documents that were changed., yes. here,, I'm just really quickly. Mapping.

B

The documents to an array of signalr message, objects,.

B

And all that is an object that indicates.

B

Which event to raise on the client,.

B

And also passing along an argument and which is.

B

Literally passing the document as the argument.

B

B

so now, we have an array of signalr message: objects which is a plain javascript objects, and we're assigning that to an open, binding, signalr, messages, and then that's it..

B

That's the whole function: itself. so,, we've kind of connected the documents that came in from the trigger to signalr service itself.

B

So,, that's going to get broadcast to the application.

A

So,, how do we actually get access to this binding??

A

You talked about how it works,, but is this a binding, that's already built into the azure functions sck, or is this something I have to bring in and kind of configure myself?.

B

Yes. so,, you have to bring this in. so, with azure functions. V2, we've actually moved a lot of the bindings that used to come with the functions run time in v1 outside,.

B

So we can kind of just pick and choose the extra bindings we want to bring in.

B

cosmos db is one and also.

B

The signalr binding is another that you can bring in.

A

B

So, the function cli gives you a fairly easy way to bring the those in..

B

The bindings are implemented as extensions which are.

B

Just really nuget packages and the function cli has an extensions, command.

B

So,, you can actually go func extensions, install,, I believe, and then a nuget package name, and I should bring that in as a function or as an extension..

B

Then,, once you do that,, the bindings are automatically there for you to use.

A

So then, we're also be writing javascript's or .nets or whatever other language that azure functions,.

A

They too, discuss and support.

C

A

All I need to do is bring it out nuget package, and it will work across all these languages?.

C

A

B

Yes,, that's the idea.

A

Okay. cool. sounds good. yes. so,. Let's just quickly see this work.

B

So, in our vs code,.

B

You can actually pull up documents that are.

B

In our cosmos, db. so,, let's pick one.

B

So,: here's one, here's a flight from seattle to jfk.

B

Let's say that we wanted to change that to $99 and we save it..

B

What we should see fairly quickly is that the price.

B

Will reflect on the client.

C

B

This change is going to cosmos db,, it's going out to the cosmos, db, change, feed,, it's triggering our function and our function is broadcasting that out on signalr service.

A

So,, we have real-time all the way. Around, right?.

C

A

We have real-time, as in this push notifications coming from the database.

C

A

There's push notifications coming from our signalr service.

A

Yeah. then, there's also now, like the client is now, just has to signal our client, just listening and reacting to that. yeah.

C

So,, it's all-around,. It's like real-time everywhere?,.

A

B

Everybody gets real-time, play? yes, and basically it's serverless too.

A

B

So,, you don't have to manage any infrastructures.

A

This is really awesome,. This is good. so,. If I wanted to get started with this, like where are some places, I could go to to get documentation or watch some videos or kind of just learn about it. In general?, yes. so,, I have a bunch of links. Here.

B

So, right now,, the signalr binding lives on my github account.

B

yeah., but we're in the process of moving that over to the azure organization. okay.

A

So that becomes an unofficial microsoft. Project.

A

B

So, hopefully, that will happen in the next couple of weeks., maybe by the time this video airs, you'll already be there, but we'll see how that goes.

B

I also have the flight sample on github as well.

B

I have another one that we didn't get a chance to get to that uses a c# and durable functions, application.

B

To use the binding.

C

B

Lastly,, you can find all about the azure signalr service by going to the website, on azure.com. all right, great. thank you, man.

A

Thank you so much for coming in and talking to us all about signalr.. This is really good. awesome,, thanks for having me. so,, we just learned all about using signalr and also the azure signalr service. On this episode of the on.net lecture.