shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.FormsでSignalR

これまでのWebページ,WPFからSignalRでサーバーと通信する方法に関しては以下の記事.

shuhelohelo.hatenablog.com

shuhelohelo.hatenablog.com

ASP.NET Core SignalRはリアルタイム通信をアプリケーションに追加するプロセスを簡略化するアプリケーションモデル.

今回はXamarin.Formsから接続する.

詳しくはこちら.下の方にスクロールするとXamarin.Formsで作られたクライアントのGigHubリポジトリへのリンクがあるので,そちらを動かすと良い.

mindofai.github.io

このサンプル用のサーバー側はサンプルの作者がAzure上で動作させてくれているので,すぐにサンプルを動かすことができる.

パッケージのインストール

NugetでMicrosoft.AspNetCore.SignalR.ClientをSharedだけでなくAndroid, iOSにもインストールする.

f:id:shuhelohelo:20191025092500p:plain

他にもMicrosoft.AspNet.SignalR.Clientもあるので間違わないように.

クライアント側

サーバー側はこれまでと同じく,以下のようにクライアントから2つの文字列を受け取り,それを接続している全てのクライアントにメッセージを送るようになっている.

サーバー側:

    internal class ChatHub : Hub
    {
        public async Task Send(string message, string from)//2つのstringを受け取る
        {
            await Clients.All.SendAsync("Receive", message, from);
        }

        public async Task SendObject(Message message)
        {
            await Clients.All.SendAsync("ReceiveObject", message);
        }
    }

これに対してクライアントであるXamarin.Forms側は,やはりWPFのときと同じ.

            private HubConnection _hubConnection;

            _hubConnection = new HubConnectionBuilder()
                .WithUrl("https://signalrcorepractice20191006060526.azurewebsites.net/chathub")
                .WithAutomaticReconnect()
                .Build();

            _hubConnection.On<string, string>("Receive", (message, from) =>
            {
                Messages.Add(new MessageModel { User = from, Message = message });
            });

メッセージを受け取ったらObservableCollectionにAddする.

ButtonにCommand,ListViewやEntryにプロパティをBindingしておく.

接続,切断もWPFと同じく

        private async Task Connect()
        {
            await _hubConnection.StartAsync();
            Messages.Add(new MessageModel { User = "Xamarin", Message = "Connection Started" });
        }

        private async Task Disconnect()
        {
            await _hubConnection.StopAsync();
            Messages.Add(new MessageModel { User = "Xamarin", Message = "Disconnected " });
        }

これでXamarin.Formsとサーバー側でリアルタイムのメッセージのやりとりができる.

クライアント側: f:id:shuhelohelo:20191025132715p:plain

サーバー側: f:id:shuhelohelo:20191025132847p:plain

今回作成したアプリケーションのGitHubリポジトリこちら.