Skip to content

Cross-link new 8.0 sample app #30872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guardrex merged 2 commits into from
Oct 30, 2023
+9 −88
Merged

Cross-link new 8.0 sample app #30872

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
103c024
Cross-link new 8.0 sample app
guardrex Oct 30, 2023
e804c71
Updates
guardrex Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 9 additions & 88 deletions aspnetcore/blazor/tutorials/signalr-blazor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ The Visual Studio Code instructions use the .NET CLI for ASP.NET Core developmen

---

## Sample app

Downloading the tutorial's sample chat app isn't required for this tutorial. The sample app is the final, working app produced by following the steps of this tutorial.

[View or download sample code](https://github.com/dotnet/blazor-samples)

## Create a Blazor Web App

Follow the guidance for your choice of tooling:
Expand Down Expand Up @@ -152,19 +158,7 @@ To add an earlier version of the package, supply the `--version {VERSION}` optio

Create a `Hubs` (plural) folder and add the following `ChatHub` class (`Hubs/ChatHub.cs`) to the root of the app:

```csharp
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Hubs;

public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
```
:::code language="csharp" source="~/../blazor-samples/8.0/BlazorSignalRApp/Hubs/ChatHub.cs":::

## Add services and an endpoint for the SignalR hub

Expand Down Expand Up @@ -193,7 +187,7 @@ Use Response Compression Middleware at the top of the processing pipeline's conf
app.UseResponseCompression();
```

Add an endpoint for the hub immediately after the line `app.MapRazorComponents<App>();`:
Add an endpoint for the hub immediately after the line that maps Razor comonents (`app.MapRazorComponents<T>()`):

```csharp
app.MapHub<ChatHub>("/chathub");
Expand All @@ -205,80 +199,7 @@ Open the `Components/Pages/Home.razor` file.

Replace the markup with the following code:

```razor
@page "/"
@rendermode RenderMode.InteractiveServer
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Home</PageTitle>

<div class="form-group">
<label>
User:
<input @bind="userInput" />
</label>
</div>
<div class="form-group">
<label>
Message:
<input @bind="messageInput" size="50" />
</label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
@foreach (var message in messages)
{
<li>@message</li>
}
</ul>

@code {
private HubConnection? hubConnection;
private List<string> messages = new List<string>();
private string? userInput;
private string? messageInput;

protected override async Task OnInitializedAsync()
{
hubConnection = new HubConnectionBuilder()
.WithUrl(Navigation.ToAbsoluteUri("/chathub"))
.Build();

hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
{
var encodedMsg = $"{user}: {message}";
messages.Add(encodedMsg);
InvokeAsync(StateHasChanged);
});

await hubConnection.StartAsync();
}

private async Task Send()
{
if (hubConnection is not null)
{
await hubConnection.SendAsync("SendMessage", userInput, messageInput);
}
}

public bool IsConnected =>
hubConnection?.State == HubConnectionState.Connected;

public async ValueTask DisposeAsync()
{
if (hubConnection is not null)
{
await hubConnection.DisposeAsync();
}
}
}
```
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSignalRApp/Components/Pages/Home.razor":::

> [!NOTE]
> Disable Response Compression Middleware in the `Development` environment when using [Hot Reload](xref:test/hot-reload). For more information, see <xref:blazor/fundamentals/signalr#disable-response-compression-for-hot-reload>.
Expand Down