Join Michael Sullivan for an in-depth discussion in this video Establishing connections with SignalR Hubs, part of Up and Running with ASP.NET.
When you establish two-way communication between your application and its clients using SignalR, there's really no limit to how rich in real-time you can make the user experience. In this video I'll show you what to do in order to establish a persistent connection to the server on a given webpage that allows for two-way communication. Most importantly, the ability of the server to send messages to the client without waiting for a request from the client. So we will continue with our ExploreCalifornia solution from the previous chapter.
I'm going to get there from the Exercise Files, Ch5, ExploreCalifornia, and open up the solution file. And the first thing I'm going to add to our MVC application is something called a signal R hub. So I'm going to right-click, Add and I can actually select it directly from this context menu. Signal R contains another class that we might have started with called persistent connection. But it provides a lower level API and it's a little more work to setup. So the Hub class is more appropriate for a quick intro.
In passing it the string. So we're going to do this on the Index view under Home. So we'll put it at the bottom of this file. And the SignalR client scripts require jQuery. And remember that this page uses a layout file, that already includes jQuery. Through the use of the Scripts.Render method on line 46. So we need to make sure that our SignalR client scripts appear after the jQuery scripts. And we're going to do that by putting it in the scripts section on the Content page.
So we begin the scripts section like this. And then we'll just drag the minified SignalR library, into this code block And if you don't see it in your project, remember you can get this very quickly using the handy library package manager new get. SignalR is going to make very easy for us to call server methods on the hub. Using a proxy class, and that's going to be provided in an autogenerated script file that will be available by default at signalr/hubs. I'm going to use the tilde for my application route directory, and then signalr/hubs here.
In the last bit of configuration that we'll have to do. Is in my application root in the Startup file. Without digressing too much, let me just mention that Signal R relies on components that implements something called the open web interface for .NET or OWEN, which is based on an open standard who's goal is to decouple web servers and applications. For example, to allow us to run a .Net application on a Unix system. So you can think of OWEN components as middleware between the server and the application. And to make sure that our Signal R messages are properly handled, we need to add just a single line here in the configuration method.
Then I'm going to define the introduce function. As a member of simple.client. So this is just going to take a string, I'll call it introduction, and we'll just have it pop an alert message. Next, I'm actually going to create the connection with connection.hub.start. Now I'm going to launch two browser windows. And at this point, I've defined my function on the client, but I still haven't done anything to invoke it.
But I'm going to open the same page, first in Internet Explorer, and then also in Chrome. You don't have to use two different browsers, but it's going to make it easier to see what's going on when you see the two different types of alert messages. Now I'm going to modify the script, and set up a call back function using the done method that will be executed upon successful connection. So, save this, go back to my browser windows, refresh in Internet Explorer and watch what happens in both windows.
The Internet Explorer client invoked the C# hello method on the server hub and the hub responded by invoking the introduce function in both connected clients a remote procedure call from the server to these clients in this case my IE browser and my Chrome browser. So we've now established two-way communication that doesn't rely on a request followed by a response, which you can see clearly, at least in the Chrome browser window since that was just sitting idly before the alert popped up.
Next, we'll add a little more functionality and implement the simple live help section on the contact page.
- Exploring .NET in general and ASP.NET in particular
- Creating controllers and views
- Working with models and forms
- Managing data
- Creating web APIs
- Establishing connections with SignalR