/ ASP.NET Core

SignalR for ASP.NET Core 2.0

14 September 2017, Microsoft announced the alpha release of SignalR for ASP.NET Core 2.0. It is the first official preview release of a new SignalR that is compatible with ASP.NET Core. It consists of a server component, a .NET client targeting .NET Standard 2.0 and a JavaScript/TypeScript client.

What is new?

SignalR for ASP.NET Core is a rewrite of the original SignalR. We looked at common SignalR usage patterns and issues that users face today and decided that rewriting SignalR is the right choice. The new SignalR is simpler, more reliable, and easier to use. Despite these underlying changes, we’ve worked to ensure that the user-facing APIs are very similar to previous versions.

Quick howto...

I'll try to show how to use SignalR in an mvc project to send messages from the server (your code) to the client.

First add the following to your project file

<PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha2-final"/>

We will need to configure the app for SignalR, for this head to your Startup.cs file and add the following to ConfigureServices method:

services.AddSignalR();

Then add the following to the Configure method:

app.UseSignalR(routes =>
{
    routes.MapHub<Notify>("notify");
});

You will ask what is Notify, we didn't write any Notify classes. So, lets add one now. Create new file Notify.cs and add the following:

using System.Threading.Tasks;
using GreenTime.Models;
using Microsoft.AspNetCore.SignalR;

namespace MyTestApp
{
    public class Notify : Hub
    {
        public Task Send(string message)
        {
            return Clients.All.InvokeAsync("Send", message);
        }
    }
}

To finish our backend section, lets write the code that is responsible to send the messsage to the client. Our sample is simple, everytime someone open a notify page on our website, we will send a message to everyone that the page was opened.

Lets create a HomeController with one action, Notify

using System;
using MyTestApp;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;

namespace MyTestApp
{
    public class HomeController : Controller
    {
        private IHubContext<Notify> _messageHubContext; 

        public HomeController(IHubContext<Notify> messageHubContext)  
        {  
            _messageHubContext = messageHubContext;  
        } 

        public IActionResult Notify()
        {
            _messageHubContext.Clients.All.InvokeAsync(
                "send",
                "Hello from the hub server at " +   DateTime.Now.ToString("dd-MM-yyyy HH:mm:ss")
            );  
   
            return Ok();  
        }
    }
}

Everytime we call the page /Home/Notify we will send a message to all connected clients a hello message with the current date time. Simple as that :)

Now, the front end. We need this npm package @aspnet/signalr-client

npm i @aspnet/signalr-client --save

then copy the signalr-client.js to your script folder and include on your page using the script tag:

<script src="scripts/signalr-client.min.js"></script>

In your main js file, add the following code:

let connection = new signalR.HubConnection('/notify');

connection.on('send', data => {
    console.log(data);
});

connection.start();

Thats it. dotnet run open multiple windows and navigate to /Home/Notify check the console message usign chrome inspect feature. Keep one page open and refresh the other.

Happy coding...