Category: SignalR

Practical ASP.NET Core SignalR: Server Hubs

Derek Comartin Leave a comment

Practical ASP.NET Core SignalR

In this section, I’m going to extend my existing ASP.NET Core application to explore more of what SignalR Server Hubs have to offer.

This blog post is apart of a course that is a complete step-by-setup guide on how to build real-time web applications using ASP.NET Core SignalR. By the end of this course, you’ll be able to build real-world, scalable, production applications using the tools and techniques provided in this course.

If you haven’t already, check out the prior sections of this course.

  1. Course Overview
  2. ASP.NET Core SignalR Overview
  3. Basics

SignalR Server Hubs

https://www.youtube.com/watch?v=irXaj-3buKQ

A SignalR Server Hub is a primary point at which all communication between client and server occur.  You define methods in a hub that can be called by the client. And in the client code, we can define methods that our hub can call.

We can define methods on our hub that can communicate directly with the specific client (caller) who is making the call to our hub. I’m going to add a new method to our existing MessageHub called SendMessageToCaller

Clients

https://www.youtube.com/watch?v=5Kqpca3kcsc

We can also send data to specific clients. To do so, we simply need to know the ConnectionId of the client we want to send data to.

I’ll add a new method called SendMessageToUser which will accept a connectionId as the first parameter which we will use.

In order for our clients to know about each other, I’m going to override two methods on our Hub. OnConnectedAsync and OnDisconnectedAsync. I’ll use these methods to let all connected clients know when a new client as connected or disconnected. This way the clients/browser can keep track of the ConnectionID’s available, in order to send to specific clients.

Groups

https://www.youtube.com/watch?v=o0d1NZTNv10

Lastly, we can also define Groups of connections. This giving us the ability to send data to specific groups. This is often useful for multi-tenant applications.

I’ll create two new methods, one method JoinGroup which will be used for our clients to join a specific group. SendMessageToGroup will be used to send data to the specific clients that have already called JoinGroup.

Client

First, I’ll update my Razor Page to contain a new select list to specify who we want to send the message to, All, Myself or PrivateGroup. I’ll also add a button that we will wire-up to call our JoinGroup on our Hub.

Now we will wire up our new UI by adding in SignalR client handlers for UserConnected, UserDisconnected events. I’ll also add UI for the Join button click as well as using the select list to determine which methodto invoke on our Hub.

Get The Course!

You’ve got several options:

  1. Check out my Practical ASP.NET Core SignalR playlist on my CodeOpinion YouTube channel.
  2. Access the full course now by enrolling for free on Teachable.
  3. Follow along with the blog post series here on CodeOpinion.com
    1. Course Overview
    2. ASP.NET Core SignalR Overview
    3. Basics
    4. Server Hubs
    5. HubContext
    6. Authorization
    7. Scaling with Redis
    8. Scaling with Azure SignalR Service
Follow @CodeOpinion on Twitter

Source Code

All of the source code for this blog post and this course is available the Practical.AspNetCore.SignalR repo on GitHub.

Practical ASP.NET Core SignalR: Basics

Derek Comartin Leave a comment
Practical ASP.NET Core SignalRIn this section, I’m going to create a simple ASP.NET Core application that will contain a SignalR Hub, Razor Page, and a JavaScript Client. This blog post is apart of a course that is a complete step-by-setup guide on how to build real-time web applications using ASP.NET Core SignalR. By the end of this course, you’ll be able to build real-world, scalable, production applications using the tools and techniques provided in this course. If you haven’t already, check out the prior sections of this course.
  1. Course Overview
  2. ASP.NET Core SignalR Overview

Server Hubs

https://www.youtube.com/watch?v=sdsCzyTtp6U
A hub is a primary point at which all communication between client and server occur.  You define methods in a hub that can be called by the client. And in the client code, we can define methods that our hub can call. First thing is first, we need to install the SignalR package from NuGet.  The simplest way is to modify your csproj by adding: 
<PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.1.0" />

Message Hub

I’m going to create the simplest hub which will just send a message to all connected clients.

Startup.cs

Next, we need to add SignalR to the IServiceCollection in the ConfigureServices method. As well, we configure a route to our message hub in the Configure Method.

SignalR JavaScript Client

https://www.youtube.com/watch?v=AuyAdcoWy3U
First thing will be to get the JavaScript client library from npm. 
npm install @aspnet/signalr
From here you will want to copy the client file from node_modules/signalr/dist/browser/signalr.js to your wwwroot/lib/signalr.js

Razor Page

Next, I’m going to create a Razor page that will just contain a simple textarea and button that we will wire up to the SignalR hub.  It will also contain a script tag to reference the signalr.js file and a file we will create next called messages.js

JavaScript

Now they are referencing messages.js, let’s actually create it.  This file will provide the functionality to connect to our SignalR Server Hub, send messages to the hub, and receive messages from the hub.

Get The Course!

You’ve got several options:
  1. Check out my Practical ASP.NET Core SignalR playlist on my CodeOpinion YouTube channel.
  2. Access the full course now by enrolling for free on Teachable.
  3. Follow along with the blog post series here on CodeOpinion.com
    1. Course Overview
    2. ASP.NET Core SignalR Overview
    3. Basics
    4. Server Hubs
    5. HubContext
    6. Authorization
    7. Scaling with Redis
    8. Scaling with Azure SignalR Service
Follow @CodeOpinion on Twitter

Source Code

All of the source code for this blog post and this course is available the Practical.AspNetCore.SignalR repo on GitHub.

Practical ASP.NET Core SignalR: Overview

Derek Comartin Leave a comment

Practical ASP.NET Core SignalRASP.NET Core SignalR is an excellent way to add real-time functionality to your web applications.  You may be wondering, what exactly is real-time web functionality and what problem does that solve?

Here’s an overview of what problems SignalR solves, and how it does it using various technologies.

This blog post is apart of a course that is a complete step-by-setup guide on how to build real-time web applications using ASP.NET Core SignalR. By the end of this course, you’ll be able to build real-world, scalable, production applications using the tools and techniques provided in this course.

If you haven’t already, check out the prior sections of this course.

  1. Course Overview
https://www.youtube.com/watch?v=WZ0lU7-XVyE

Problem Space

A common problem among web developer is refreshing data in real time.  HTTP by nature is a stateless request-response protocol.  The client (browser) makes a request to the server, which in turns provides a response.

Every time the client (browser) wants new data, it must make a request to the server.  HTTP doesn’t have any means to have the request originate from the server to the client.  The client must always make the request.  You can think of this as being a pull-based protocol.

Check out the video below for an example of a demo application that has a scenario where the pull-based nature of HTTP is less than ideal for the end user.

https://www.youtube.com/watch?v=PUtOLN5wI1s

Push Model

In contrast, moving towards a Push Model allows the server to push data to the client without the client to always make a request (pull) it.

SignalR supports 3 methods for enabling this:  WebSockets, Server Sent Events, and Long Polling.

Check out the video below for an overview of all three methods and how they work.

https://www.youtube.com/watch?v=OTjL2x0ztx0

Summary

In these videos, I’ve covered what problems SignalR solves and how it solves it using WebSockets, Server-Sent Events or Long Polling.  Let’s start digging into setting up SignalR in an ASP.NET Core web application in the next section.

https://www.youtube.com/watch?v=DF7jk4ERiF8

Get The Course!

You’ve got several options:

  1. Check out my Practical ASP.NET Core SignalR playlist on my CodeOpinion YouTube channel.
  2. Access the full course now by enrolling for free on Teachable.
  3. Follow along with the blog post series here on CodeOpinion.com
    1. Course Overview
    2. ASP.NET Core SignalR Overview
    3. Basics
    4. Server Hubs
    5. HubContext
    6. Authorization
    7. Scaling with Redis
    8. Scaling with Azure SignalR Service
Follow @CodeOpinion on Twitter

Source Code

All of the source code for this blog post and this course is available the Practical.AspNetCore.SignalR repo on GitHub.