ASP.NET Core SignalR Chat with Angular 5
Introduction
In one of the previous posts, we saw how we can make a simple chat with ASP.NET Core SignalR. It takes about 5-10 mins for someone who is familiar with the environment and ASP.NET Core. Or even less.
The example was done using ASP.NET Core SignalR and Razor Pages. If you are wondering what are Razor Pages, it is a new feature of MVC that shipped with ASP.NET Core 2. You can read more about it here.
In this post, we will use only core of the ASP.NET Core with Angular 5. We will use command line prompt with dotnet CLI and Angular CLI.
Setting up the projects and dependencies
Creating the projects
We will create a new empty ASP.NET Core Web project. You can either do it with Visual Studio or execute dotnet new web in the command line.
I have Angular CLI installed on my machine. If you don’t either install it or create a new empty Angular application. I am using Angular CLI 1.5 and creating a new project with it – Angular 5 application.
I will just execute ng new CodingBlastChat in the command line, inside of solution folder. And now I have basic working Angular application. To start it, I just type in ng serve and I my application is running on localhost port 4200.
Installing dependencies
We need to install both server-side and client-side libraries for ASP.NET Core SignalR.
To install the server-side library we will use NuGet. You can either use Visual Studio or do it via command line. The package name is Microsoft.AspNetCore.SignalR
dotnet add package Microsoft.AspNetCore.SignalR
We will use npm to add client-side library:
npm install @aspnet/signalr-client
If you are using npm 4 or older you will need to add the –save argument, if you want it to be saved inside of your package.json as well. And that’s it for library dependencies. We are all set and we can now use SignalR.
Setting up server-side
We can now add the simple ChatHub class:
This will call the sendToAll client method for ALL clients.
For SignalR to work we have to add it to DI Container inside of ConfigureServices method in Startup class:
Also, we have to tell the middleware pipeline that we will be using SignalR. When the request comes to the /chat endpoint we want our ChatHub to take over and handle it.
Your Startup class should look something like this.
Enabling CORS
Since we will be serving the Angular application on a separate port, for it to be able to access the SignalR server we will need to enable CORS on the Server.
Add the following inside of ConfigureServices, just before the code that adds SignalR to DI container.
We also have to tell the middleware to use this CORS policy. Add the following inside of Configure method, BEFORE SignalR:
Now your Configure method should look like this:
Also, make sure to check your Properties/launchSettings.json file so you can know which port is your app running. You can also configure it to use any port you want. I will set it to 5000.
Client-side
You would ideally want to have a separate service for communicating with ChatHub on the server. Also, you would want to store your endpoints in some kind of Angular service for constants. But for the simplicity sake, we will skip that for now and add it after we make the chat functional.
I will use existing AppComponent that Angular CLI created, and extend it.
I will add properties for nick, message and list of messages. Also, I will add a property for HubConnection.
HubConnection is part of the signalr-client library built by ASP.NET team. And we will use it to establish the connection with the server and also to send messages and listen for messages from the server.
We will establish the connection before any other code runs in our component. Hence, we will use the OnInit event.
Notice the ngOnInit method. We are asking the user to enter his name and we store that inside of nick property that we created previously.
After that, we create the HubConnection object and try to establish the connection with the server.
Inside of that method, we will also add the listener for sendToAll event from the server:
After the event is received, we get two parameters: nick and the message itself. Now we form the new string from these two parameters and we add it to our messages array on AppComponent.
Inside of AppComponent we also need a method for sending messages from client TO server. We will use it from our view and here is the code:
View
Now we need to set up the view. Since we plan to use the form element, we will import FormsModule in our AppModule. We will change the app.module.ts file. You can see the commit here.
We can now add the view to app.component.html:
Code Sample
You can find the code sample on GitHub: ASP.NET Core SignalR Chat
You can find step by step (commits) on this repository: AngularAspNetCoreSignalR
