I am going to explain the work over a chat application (as a tradition). Because the needs are really obvious and everyone knows how a chat app works :)

First, create a .Net Core app with the angular template using the CLI or Visual Studio.

dotnet new angular --name websocket-demo

Step 1: Preparing .Net Core

In startup.cs add the code below in method ConfigureServices

Then, in Configure method, put these lines:

KeepAliveInterval holds the time value for sending ping messages to keep the connection alive.

Please pay attention to Line:14 that we register our hubs with URL.

You can think of Hubs as controllers for WebSocket in SignalR. We are going to create a hub called ChatHub and put relevant actions in that file.

In ChatHub.cs you see three async methods. These are the actions that will be called when a WebSocket client dispatches an action with the name.

Clients object gives you to reach all connected clients and to dispatch new actions.

— Dependency Injection

To be able to send data to clients from a controller or a job, you need to access the hub context. You can use IHubContext<> instead.

Step 2: Preparing Angular

First, install @microsoft/signalr using npm

npm install @microsoft/signalr

Then navigate the component you want to implement web socket. In ngOnInit prepare the connection like below.

In .withUrl method, pass the path of a hub that you want to connect. (We specified that path in Startup.cs when registering.).

this.connetion.on method allows us to subscribe to WebSocket events and handle the payload with our code.

Now we have configured our client but haven’t started the connection yet. To start connection use

this.connection.start();

You can chain events after start like this.connection.start().then() .

After starting connection you should see an HTTP call to the server to negotiate

Then, it should upgrade the connection to the web socket. After that, in WS tab in ChromeDevTools you should see the WebSocket connection with payloads

Step 3: Publishing

— Server

To be able to use WebSocket in the production environment, you should enable WebSocket protocol in Server. Follow the instructions below to enable WebSocket Protocol on Server:

Open Server Manager. Under the Manage menu, click Add Roles and Features. Select Role-based or Feature-based Installation, and then click Next. Select the appropriate server, (your local server is selected by default), and then click Next. Expand Web Server (IIS) in the Roles tree, then expand Web Server, and then expand Application Development. Select WebSocket Protocol, and then click Next. If no additional features are needed, click Next. Click Install. When the installation completes, click Close to exit the wizard.

Source: https://docs.microsoft.com/en-us/iis/get-started/whats-new-in-iis-8/iis-80-websocket-protocol-support#step-by-step-instructions

— Azure

Navigate through Azure Console and open your application dashboard.

Go to Configure section.

Switch to General Settings tab and enable WebSockets