Calling an Azure Signalr Instance from an Azure function

I’ve been playing around with the Azure Signalr Service. I’m particularly interested in how you can bind to this from an Azure function. Imagine the following scenario:

You’re sat there on your web application, and I press a button on my console application and you suddenly get notified. It’s actually remarkably easy to set-up (although there are definitely a few little things that can trip you up – many thanks to Anthony Chu for his help with some of those!)

If you want to see the code for this, it’s here.

Create an Azure Signalr Service

Let’s start by setting up an Azure Signalr service:

You’ll need to configure a few things:

The pricing tier is your call, but obviously, free is less money than … well, not free! The region should be wherever you plan to deploy your function / app service to, although I won’t actually deploy either of those in this post, and the ServiceMode should be Serverless.

Once you’ve created that, make a note of the connection string (accessed from Keys).

Create a Web App

Follow this post to create a basic web application. You’ll need to change the startup.cs as follows:

        public void ConfigureServices(IServiceCollection services)

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            if (env.IsDevelopment())



            app.UseEndpoints(routes =>

Next, we’ll need to change index.html:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <script src="lib/@microsoft/signalr/dist/browser/signalr.js"></script>
    <script src="getmessages.js" type="text/javascript"></script>
    <link rel="stylesheet" href="">

    <div class="container">
        <div class="row">
            <div class="col-2">
                <h1><span class="label label-default">Message</span></h1>
            <div class="col-4">
                <h1><span id="messageInput" class="label label-default"></span></h1>
        <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-12">
            <hr />


The signalr package that’s referenced is an npm package:

npm install @microsoft/signalr

Next, we need the getmessages.js:

function bindConnectionMessage(connection) {
    var messageCallback = function (name, message) {
        if (!message) return;

        console.log("message received:" + message.Value);

        const msg = document.getElementById("messageInput");
        msg.textContent = message.Value;
    // Create a function that the hub can call to broadcast messages.
    connection.on('broadcastMessage', messageCallback);
    connection.on('echo', messageCallback);
    connection.on('receive', messageCallback);

function onConnected(connection) {
    console.log("onConnected called");

var connection = new signalR.HubConnectionBuilder()

    .then(function () {
    .catch(function (error) {

The automatic reconnect and logging are optional (although at least while you’re writing this, I would strongly recommend the logging).

Functions App

Oddly, this is the simplest of all:

    public static class Function1
        public static Task SendMessage(
            [HttpTrigger(AuthorizationLevel.Anonymous, "post")] object message,
            [SignalR(HubName = "InfoRelay")] IAsyncCollector<SignalRMessage> signalRMessages)
            return signalRMessages.AddAsync(
                new SignalRMessage
                    Target = "broadcastMessage",
                    Arguments = new[] { "test", message }

The big thing here is the binding – SignalRMessage binding allows it to return the message to the hub (specified in HubName). Also, pay attention to the Target – this needs to match up the the event that the JS code is listening for (in this case: “broadcastMessage”).

Console App

Finally, we can send the initial message to set the whole chain off – the console app code looks like this:

        static async Task Main(string[] args)
            Console.WriteLine($"Press any key to send a message");

            HttpClient client = new HttpClient();
            string url = "http://localhost:7071/api/messages";
            HttpContent content = new StringContent("{'Value': 'Hello'}", Encoding.UTF8, "application/json");

            HttpResponseMessage response = await client.PostAsync(url, content);
            string results = await response.Content.ReadAsStringAsync();

            Console.WriteLine($"results: {results}");

So, all we’re doing here is invoking the function.

Now when you run this (remember that you’ll need to run all three projects), press enter in the console app, and you should see the “Hello” message pop up on the web app.


3 thoughts on “Calling an Azure Signalr Instance from an Azure function

  1. Pingback: Dew Drop – February 10, 2020 (#3130) | Morning Dew

  2. Raj

    I am getting error in web console:

    signalr.js:3082 [2020-05-21T05:04:40.095Z] Error: Failed to complete negotiation with the server: Error
    ConsoleLogger.log @ signalr.js:3082
    signalr.js:3082 [2020-05-21T05:04:40.096Z] Error: Failed to start the connection: Error

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.