少有人走的路

创建 Blazor Web 应用

创建一个Blazor Server应用。

这里有一个坑

就是你不能选择.net 8.0。

因此你先选择.net 7.0，创建成功后，双击你的项目名字。

把目标框架人为改为8.0

为啥要这么做呢？

原因是你.net 7.0的项目，其实是可以安装最新的8.0.6的SingalR的nuget包的。

而这个包只支持.net 8.0。

当然你可以把nuget包降下版本，以支持.net 7.0，也是可以的。

添加 SignalR 客户端库

在“管理 NuGet 包”对话框中

选择“浏览”后，在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。

添加 SignalR 集线器

创建 Hubs（复数）文件夹，并将以下 ChatHub 类 (Hubs/ChatHub.cs) 添加到应用的根目录：

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

为 SignalR 中心添加服务和终结点

在program.cs中修改

using BlazorApp1.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;

namespace BlazorApp1
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                      new[] { "application/octet-stream" });
            });

            // Add services to the container.
            builder.Services.AddRazorPages();
            builder.Services.AddServerSideBlazor();
            builder.Services.AddSingleton<WeatherForecastService>();

            var app = builder.Build();


            // Configure the HTTP request pipeline.
            if (!app.Environment.IsDevelopment())
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseResponseCompression();
            app.UseHttpsRedirection();

            app.UseStaticFiles();

            app.UseRouting();

            app.MapBlazorHub();

            app.MapHub<ChatHub>("/chathub");

            app.MapFallbackToPage("/_Host");

            app.Run();
        }
    }
}

添加用于聊天的 Razor 组件代码

把index.razor 替换成下面代码：

@using static Microsoft.AspNetCore.Components.Web.RenderMode
@page "/"
@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();
        }
    }
}

运行后，你右键菜单，复制一个窗口出来。

然后任何一个浏览器窗口send出消息，在两个窗口都会同步显示，这个就叫实时通讯。
SingalR就是实现这种实时通讯。

源码下载：

链接：https://pan.baidu.com/s/1ikOZ7CL26Di6pqNV7hUAfw 

提取码：gbhq 

--来自百度网盘超级会员V6勇哥的分享

--------------------- 

作者：hackpig

来源：www.skcircle.com

版权声明：本文为博主原创文章，转载请附上博文链接！

本文出自勇哥的网站《少有人走的路》wwww.skcircle.com，转载请注明出处！讨论可扫码加群：