---
sidebar_position: 1
title: Websocket
---

This course explains how to get started with WebSockets in ASP.NET Core.
[WebSocket](https://wikipedia.org/wiki/WebSocket) ([RFC 6455](https://tools.ietf.org/html/rfc6455)) is a protocol that allows persistent two-way communication channels over TCP connections.
Its use benefits applications that take advantage of fast, real-time communication, such as chat, dashboard, and game applications.

For our examples we will use a small example project available [here](/DemoWebsocket.zip).

## WebSocket definition

In the traditional web paradigm, the client was responsible for initiating communication with a server, and the server could not send data back unless it had been previously requested by the client.
With WebSockets, you can send data between server and client over a single TCP connection, and typically WebSockets are used to provide real-time functionality to modern applications.

![Définition WebSocket](/img/websocket/sockets.png)

## What is a SignalR Hub?

The SignalR hubs API lets you call methods on connected clients from the server.

* In server code, you define methods that are called by the client.
* In client code, you define methods that are called from the server.

SignalR takes care of everything in the background that makes real-time client-to-server and server-to-client communications possible.

## Install the SignalR .NET client package

The `Microsoft.AspNetCore.SignalR.Client` package is required for .NET clients to connect to SignalR hubs.

Install the `Microsoft.AspNetCore.SignalR.Client` package in its latest version.

![required library](/img/websocket/nuget-Microsoft.AspNetCore.SignalR.Client.png)

Or using the Package Manager console: `PM> Install-Package Microsoft.AspNetCore.SignalR.Client`

## Use SignalR

To establish a connection, create a `HubConnectionBuilder` and call the `Build` method.
Hub URL, protocol, transport type, logging level, headers, and other options can be configured when creating a connection.
Configure all required options by inserting one of the `HubConnectionBuilder` methods into the `Build` method.

Start the connection with `StartAsync`.

```csharp title="DemoSignalR.razor.cs"
public partial class DemoSignalR
{
	private HubConnection connection;

	private string connectionUrl = "https://localhost:44391/ChatHub";
	private List<Chat> logs = new List<Chat>();
	private string message = "";
	private string userName = "UserName";

	public DemoSignalR()
	{
		// Create the new SignalR Hub
		connection = new HubConnectionBuilder()
		   .WithUrl(connectionUrl)
		   .Build();
	}

	public void Dispose()
	{
		OnClose();
	}

	private async void OnClose()
	{
		// Send message for user disconnect
		await connection.InvokeAsync("SendMessage", new Chat { Type = "disconnect", Name = userName });

		// Stop the connection
		await connection.StopAsync();
	}

	private async void OnConnect()
	{
		// Handler to treat the receive message
		connection.On<Chat>("ReceiveMessage", chat =>
		{
			logs.Add(chat);
			StateHasChanged();
		});

		// Start the connection
		await connection.StartAsync();

		// Send message for user connect
		await connection.InvokeAsync("SendMessage", new Chat { Type = "connect", Name = userName });
	}

	private async Task SendMessageAsync()
	{
		// Send the user message
		await connection.InvokeAsync("SendMessage", new Chat { Type = "message", Name = userName, Message = message });
	}
}
```