Part 2: Passing data from outside an Asp.Net MVC Core site to the browser using SignalR

In my last blog, I show how you can implement SignalR on a website running Asp.Net MVC Core. Although the libraries are still in Alpha, the functionality looks very promising.

In this blog, I will show you how you can pass data on to the website so it can be shown in the browser. Users will ‘instantly’ see updates coming on the website.

Let’s check this out.

This is a series of blogs regarding using SignalR on Asp.Net MVC Core:

  1. Getting SignalR running on Asp.Net MVC Core
  2. Passing data from outside an Asp.Net MVC Core site to the browser using SignalR
  3. Adding Basic Authentication to Asp.Net Core the right way

First, we install the Client NuGet Package of Microsoft.AspNetCore.SignalR in the application (Right-click the ‘dependencies’ in the application folder and choose Manage NuGet Packages):

Note: be sure to have the ‘Include prerelease’ filter checked.

Install that client NuGet Package and all other related NuGet packages. Just do it 😉

After that, add the following action to the MVC Controller named ‘Home’.

We will accept data from outside the website but we will manipulate the Hub from inside. We just expose an action for others to call, not the hub! This makes the interface much more simplistic (all the external client have to know is HTTP) and we can alter the hub without changing the interface:

public ActionResult ShowTelemetry([FromBody] Telemetry telemetry)
    var connection = new HubConnectionBuilder()
    var connection = new HubConnectionBuilder()
      var text = telemetry == null || string.IsNullOrEmpty(telemetry.text)
                                ? "***"
                                : telemetry.text;
      connection.SendAsync("Send", text).Wait(); // InvokeAsync("Send", text)
      return Json("Success");
    catch (Exception ex)
      return Json($"Exception {ex.Message}");

  public class Telemetry
    public string deviceName { get; set; }
    public string text { get; set; }
    public DateTime dateTime { get; set; }

Note: This function can be rewritten so it follows async/await pattern.

Update: The originally published code was following the Microsoft documentation which used the InvokeAsync method. I have seen better result using the SendAsync method, I first encountered blocking calls and timeouts but the other method gave better results.

If needed, add this namespace to the controller source file:

using Microsoft.AspNetCore.SignalR.Client;

Now publish the azure website again. Make sure no errors occur.

Now we need a client

Create a client (this can be Postman, a local console app or an Azure function) to make a call outside the website. I choose an Azure Function, manually triggered, which is ideal for out published website.

Just add a new Azure Function to an existing or new Azure Function App:

Give it a proper name:

And add the following code to the function:

#r "Newtonsoft.Json"

using Newtonsoft.Json;
using System;
using System.Text;
using System.Net.Http;
using System.Net.Http.Headers;

public static void Run(string input, TraceWriter log)
  log.Info($"C# manually triggered function called with input: {input}");

  var telemetryJsonObject = new TelemetryJsonObject
    deviceName = "Device",
    text = "Azure function Text",
    dateTime = new DateTime(2018,01,03,14,34,10)

  var myEventHubMessage = JsonConvert.SerializeObject(telemetryJsonObject);

  log.Info($"input {myEventHubMessage}");

  using (var client = new System.Net.Http.HttpClient())
    //var byteArray = new UTF8Encoding().GetBytes("name:password");
    //client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

    var response = client.PostAsync(
      new StringContent(myEventHubMessage,

    log.Info($"Website accepted message: {response.IsSuccessStatusCode.ToString()}");

public class TelemetryJsonObject
  public string deviceName { get; set; }
  public string text { get; set; }
  public DateTime dateTime { get; set; }

Note: We have to supply the type of data in the header of the message too, not only in the body.

Note: The basic authentication part is commented out, you do not need it for now… but this is an example of how to pass on a username and password. In part three of this series, you will implement basic authentication and you will need it.

We pass the message in JSON format to the Controller Action. That it will match with the class parameter and it is automatically deserialized by the action (hence the ‘FromBody’ attribute).

Finally, save and run the Azure Function:

Now go to the About screen. There, you will see the delivery of the messages (the Text of the message in this occasion) on the page in the web browser. And it all works quite fast too!


This is a nice addition to the website. We now have the possibility to mix external logic with user actions. And it is all easy to do, thanks to SignalR.

All communication is now exposed. In the next blog, we will add some basic security.



2 gedachten over “Part 2: Passing data from outside an Asp.Net MVC Core site to the browser using SignalR

Reacties zijn gesloten.