1

ASP.NET Core SignalR – Simple chat

Introduction

In the last post, we briefly mentioned what SignalR is all about and talked about the history of the SignalR.

In this post, we will be building a simple chat. Yes, a brand new chat. I see you thinking: “Really creative and unique..”. Do forgive me for that! However, in next few posts, we will be building something entirely different, a game!

Let’s focus on showing how we can quickly put SignalR to action!

 

Setting up ASP.NET Core SignalR

Installing .NET CLI

Let’s first install latest (preview) dotnet 2.1 CLI, which you can find on this master branch.

I will check if everything is alright:

I get the output: 2.1.0-preview1-007002. Perfect!

I will create a new folder for my project and run the following inside of it:

As you can see, with version 2.0 of CLI dotnet restore is triggered just after CLI finishes creating a project. And that is cool, 1 step less for us.

 

Setting up MyGet feed

Since ASP.NET Core SignalR is still not available on NuGet, we have to use MyGet feed that ASP.NET team uses. 

The address of the MyGet feed: https://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json

We will add it to our NuGet config.

Location of the NuGet.Config file:

  • Mac ~/.config/NuGet/NuGet.Config
  • Windows %AppData%\NuGet\NuGet.Config
  • Linux ~/.config/NuGet/NuGet.Config

Or we can do it via CLI

 

Updating and installing packages

Now I want to update Microsoft.AspNetCore.All meta package and add needed SignalR packages. And I want them to have the latest version and their versions to match.

I will go to MyGet gallery page that ASP.NET team uses for their repositories. I can see that latest build at the moment is 26559. Now I can update and install packages.

Update Microsoft.AspNetCore.All package:

Now we can add SignalR package to our project:

Another thing we need to do is to install the client side package:

I will copy the signalr-client.js from node_modules folder to wwwroot/js folder.

 

Setting up SignalR middleware

Now we will add SignalR service and SignalR middleware to our project.

Inside of our Startup.cs:

And we need to use SignalR middleware inside of our Configure method:

 

Adding chat

Let’s add a Chat Hub

The code above should be quite simple, it takes a message and broadcasts it to all clients by calling Send method on clients, sending in one parameter message along.

 

To make the Hub accessible from the client side, change the usage of SignalR middleware in Startup.cs:

Regarding server-side code, that is all! Really.

Let’s move to client-side.

Inside of our Index Page (.cshtml file), we will add the HTML needed for a chat:

We have an input for message and simple submit button. Also, we have ul element for messages.

For all this to work, we will have to reference and use SignalR client-side library.

Just a line after that we will reference the SignalR client file:

 

Now we can add client side code:

First 3 lines are about setting up the transport type (WebSockets in our case) and HttpConnection. We provide the URL of the Hub and transport type.

After that, we start the connection. We listen for the Send event, which will happen once server triggers its Send method. When we get the message from the server, we just add it to the list.

On form submit, we fetch the message from the input and simply invoke Send on server Hub sending in one parameter (message).

Do notice that we will see our own messages appended to the list of the message. Since we are broadcasting the message to everyone on the server, once we submit the form and it triggers Send on the server, immediately after our client side Send Hub method will be triggered and the message will be appended.

That’s all there is to it.

 

Adding name identifier

Extending our chat by adding a name to the messages is easy.

First, let’s update ChatHub on server-side to receive and broadcast nickname as well:

 

We will change our HTML a bit. We will add a div with input for a nickname. Once the user enters the nick and continues, we will hide that div and show our old chat div.

Here is the extended HTML:

 

And our JavaScript:

 

 

Working sample

You can find the working example at this repository.

Stay tuned for more posts on SignalR!

Share now!
Ibrahim Šuta
 

  • Александр Лытысов

    ReferenceError: Can’t find variable: signalR in JavaScript 🙁