【.NET MAUI】MagicOnion と連携してみる - MAUIを中心に勉強するブログ

.NET MAUI のプロジェクトを作るとサンプルでクリック回数をカウントするアプリが作成されますが、アプリ内でカウントしている回数をサーバーでカウントするようにします。（クライアントではカウントしない）

サーバーは gRPC が簡単に扱えるMagicOnion を使います。

参考： Unity+MagicOnion4.1.xを試す環境構築&サービスでの通信編

MagicOnion の導入方法が分かりやすく説明されています。

新しいプロジェクトの作成

Visual Studio 2022 Preview > 新しいプロジェクトの作成 > .NET MAUIアプリ

共通ライブラリの実装

ソリューション > 追加 > 新しいプロジェクト > クラスライブラリ > フレームワークは[.NET 5]を指定して作成します。 Nuget で magiconion を検索して MagicOnion.Abstractions をインストールします。 Sharedフォルダを作成して配下に IMyFirstService.cs を作成プロジェクト > クラスの追加 IMyFirstService.cs

using MagicOnion;

namespace ClassLibrary1.Shared
{
    public interface IMyFirstService : IService<IMyFirstService>
    {
        UnaryResult<int> CounterAsync();
    }
}

サーバーサイドの実装

新しいプロジェクトの追加 > ASP.NET Core gRPCサービス > フレームワークは[.NET 5]を指定して作成します。

以降作成した ASP.NET Core gRPCサービスのプロジェクトで操作します。

Protos、Servicesのフォルダを削除します。プロジェクト > プロジェクト参照の追加で共通ライブラリのプロジェクトを追加します。 Nuget で magiconion を検索して MagicOnion.Server をインストールします。

Startup.cs の内容を2つ修正します

① services.AddGrpc(); のしたに services.AddMagicOnion(); を追加します。

public void ConfigureServices(IServiceCollection services)
{
    services.AddGrpc();
    services.AddMagicOnion();
}

② endpoints.MapGrpcService(); を endpoints.MapMagicOnionService(); に書き換えます

app.UseEndpoints(endpoints =>
{
    endpoints.MapMagicOnionService();

    endpoints.MapGet("/", async context =>
    {
        await context.Response.WriteAsync("Communication with gRPC endpoints must be made through a gRPC client. To learn how to create a client, visit: https://go.microsoft.com/fwlink/?linkid=2086909");
    });
});

Serviceフォルダを作成して配下に MyFirstService.cs を作成

using System;
using GrpcService1.Shared;
using MagicOnion;
using MagicOnion.Server;

namespace GrpcService1.Service
{
    public class MyFirstService : ServiceBase<IMyFirstService>, IMyFirstService
    {
        static int count = 0;
        
        public async UnaryResult<int> CounterAsync()
        {
            Console.WriteLine($"Received");
            return ++count;
        }
    }
}

クライアントサイドの実装

以下から MAUIプロジェクトを操作します。

Nuget で magiconion を検索して MagicOnion.Client をインストールします。

プロジェクト > プロジェクト参照の追加で共通ライブラリのプロジェクトを追加します。

サーバーを呼び出すコードを実装します。

using ClassLibrary1.Shared;
using Grpc.Net.Client;
using MagicOnion.Client;

namespace MauiApp16;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnCounterClicked(object sender, EventArgs e)
    {
        var channel = GrpcChannel.ForAddress("https://localhost:5001");
        var client = MagicOnionClient.Create<IMyFirstService>(channel);
        var result = await client.CounterAsync();
        CounterBtn.Text = $"サーバーで {result} 回カウント";

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}

実行

プロジェクト > スタートアッププロジェクトの設定 > マルチスタートアッププロジェクトを設定するとプロジェクトを同時に実行できます。ボタンを押すごとにサーバー通信が発生し、サーバーサイドでクリックした回数がカウントされます。