You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.4 KiB
101 lines
3.4 KiB
---
|
|
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.
|
|
|
|

|
|
|
|
## 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.
|
|
|
|

|
|
|
|
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 });
|
|
}
|
|
}
|
|
```
|