Blazor Serverでチャットアプリ - あきちゃんの飽き飽き備忘録

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はBlazorでチャットアプリについて書きます。

それでは早速・・・Blazroでチャットアプリ！

Lesson.1 事の発端

C#でチャットアプリ作りたいなあと思っていたところ、以下のような記事を見つけました。

基本なぞるだけですが、せっかくなのでやってみようと思います。

learn.microsoft.com

Lesson.2 プロジェクト作成（SignalRChat）

プロジェクト名は SignalRChatで、Blazor Server プロジェクト（.Net6）で作成します。

基本デフォルトのまま次へ押しとけば大丈夫ですが一応以下記事にまとめています。

akr9915.hatenablog.com

Lesson.3 実装

プロジェクトを右クリック→Nugetパッケージの管理からMicrosoft.AspNetCore.SignalR.Clientをインストールします。

プロジェクトを右クリック→追加→新しいフォルダーの追加からHubsフォルダを作成します。

Hubsフォルダを右クリック→追加→クラスからChatHub.csを作成します。

Hubs/ChatHub.csを以下のように修正します。

using Microsoft.AspNetCore.SignalR;
namespace SignalRChat.Hubs // SignalRChatはプロジェクト名に合わせる
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Program.csを以下のように修正します。

using SignalRChat.Data;
using Microsoft.AspNetCore.ResponseCompression;
using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

var app = builder.Build();
app.UseResponseCompression();

// 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.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");
app.Run();