Blazorを始めよう
Let's start Blazor

YouTubeにアップした動画、「【日本語解説】Blazorを始めよう【Blazor, ASP.NET Core】」の補足説明の記事です。

Here's a little more about the 「【Blazor, ASP.NET Core】 Let's start Blazor」 video I uploaded to YouTube.

字幕を付けるなら、英語音声と日本語音声の二つに分けたほうが良いと思ったので、今回から同じ動画だが音声が日本語と英語に分かれたものをアップしました。

I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.

ページの頭に日本語解説動画、ページの最後に英語解説動画のリンクが貼られてます。

There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.

Microsoft Docsを参考にしました。

ASP.NET Core SignalR を Blazor WebAssembly と共に使用する

I referred to Microsoft Docs.

Use ASP.NET Core SignalR with Blazor WebAssembly

Visual Studio Installerを立ち上げて、[.NET Core クロスプラットフォームの開発]をインストールします。

Launch Visual Studio Installer and install [.NET Core Cross-Platform Development].

Visual Studioを立ち上げて、[Blazor アプリ]を選択して新しいプロジェクトを作成します。

Launch Visual Studio and select [Blazor App] to create a new project.

適当なプロジェクト名と保存場所を設定して次へ。

Set the appropriate project name and location, and then proceed.

[Blazor WebAssembly App]を選択し、[ASP.NET Core hosted]にチェックを入れてBlazorアプリを作成します。

Select [Blazor WebAssembly App] and check [ASP.NET Core hosted] to create the Blazor app.

ソリューションエクスプローラー内で右クリックをして、[NuGetパッケージの管理]を選択します。

Right-click in the Solution Explorer and select [Managing NuGet Packages].

[Microsoft.AspNetCore.SignalR.Client]ライブラリをインストールします。

Install [Microsoft.AspNetCore.SignalR.Client] library.

Hubsフォルダーを作成して、そのフォルダ内にクラスファイルを作成します。

Create a Hubs folder and create class files in that folder.

Hub、つまりチャット用の中継装置を用意します。

Prepare the Hub, that is, the relay device for the chat.

ChatHub.cs

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

この中継装置は複数のユーザーのメッセージのやり取りを、非同期で処理します。

This relay device handles the exchange of messages between multiple users asynchronously.

非同期処理と同期処理の違いを簡単に説明します。

A brief explanation of the difference between asynchronous and synchronous processing.

同期処理の場合は上から順番に処理が実行されます。

In the case of synchronous processing, the processing is performed in order from the top.

Aの処理が終わったら、Bの処理へ。そしてBの処理が終わらないとCの処理にはいけません。

After processing A, go to processing B. And if the process of B is not finished, the process of C cannot be completed.

逆に非同期処理の場合は、メッセージの送信など必要な時に実行される処理です。

In the case of asynchronous processing, on the other hand, the processing is executed when necessary, such as sending a message.

Aの処理が終わったら、Bの処理を飛ばして、Cの処理へ、しかしBの処理が必要になった時にはBの処理を実行します。

After processing A, skip processing B and proceed to processing C, but when processing B becomes necessary, execute processing B.

Bの処理はリクエストが来るまで待機しているイメージです。

It may be easier to understand if you think that B's processing is not performed until the request comes in, but is performed when the request comes in.

Hubの処理を設定したら、Hubとサービスのエンドポイントを[Startup.cs]に追加します。

Once you have set up the Hub process, Add the hub and service endpoints to [Startup.cs].

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.ResponseCompression;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System.Linq;
using BlazorSignalRApp.Server.Hubs;

namespace BlazorSignalRApp.Server
{
	public class Startup
	{
		public Startup(IConfiguration configuration)
		{
			Configuration = configuration;
		}

		public IConfiguration Configuration { get; }

		// This method gets called by the runtime. Use this method to add services to the container.
		// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
		public void ConfigureServices(IServiceCollection services)
		{

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

		// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			app.UseResponseCompression();

			if (env.IsDevelopment())
			{
				app.UseDeveloperExceptionPage();
				app.UseWebAssemblyDebugging();
			}
			else
			{
				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.UseBlazorFrameworkFiles();
			app.UseStaticFiles();

			app.UseRouting();

			app.UseEndpoints(endpoints =>
			{
				endpoints.MapControllers();
				endpoints.MapHub<ChatHub>("/chathub");
				endpoints.MapFallbackToFile("index.html");
			});
		}
	}
}

エンドポイントとは、簡単に言ってしまえばネットワークに繋がっている端末です。

In a nutshell, an endpoint is a networked device.

USBマウスとパソコンで考えてみましょう。

Let's think about it with a USB mouse and a computer.

ネットワークとはUSBケーブルだと思ってください。

Think of networking as a USB cable.

つまり、データのやり取りを行うための通信手段です。

In other words, it is a means of communication for exchanging data.

このUSBケーブル同士で繋がっているマウスコントローラー、パソコンをそれぞれエンドポイントと呼びます。

The end points are the mouse controller and the PC.

まあ、要するに必要な処理を担当をする機能同士がお互いに連絡を取りあえるようにしているだけです。

In short, it's just making it possible for the features that do the work they need to communicate with each other.

最後にチャット用のRazorコンポーネントコードを書いていきます。

Finally, you write the Razor component code for the chat.

Index.razor

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable

<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(NavigationManager.ToAbsoluteUri("/chathub"))
			.Build();

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

		await hubConnection.StartAsync();
	}

	Task Send() =>
		hubConnection.SendAsync("SendMessage", userInput, messageInput);

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

	public void Dispose()
	{
		_ = hubConnection.DisposeAsync();
	}
}

@記号を付けると変数や関数などをインラインで埋め込むことができます。

You can embed variables and functions inline by adding the @ symbol.

@記号と中括弧でＣ＃のコードがそのまま書けます。

The @ sign and curly braces allow you to write C # code as is.

準備ができたら、プレイボタンを押してみましょう。

When you are ready, let's press the play button.

ブラウザが立ち上がり、アプリが表示されるので、URLをコピーします。

The browser starts up and the application is displayed, so copy the URL.

そして、もう一つ新しいブラウザを起動して、URLをコピーして同じアプリを表示させます。

Then launch another new browser and copy the URL to bring up the same app.

後は好きなように遊んでみてください。

After that, please play as you like.

以上です。お疲れ様です。

That's all. Thank you for your hard work.