🙆‍♀️

[初心者ok]Flutter(Dart)でgRPC通信

2024/07/30に公開

Flutter

Flutter(Dart)でgRPCを用いた通信をサーバーサイドからフロントエンドまで説明したいとおもいます。また、gRPCでtoken扱い方も説明します。
本記事は、こちらの記事で紹介しているリポジトリで実装しております。

こんな人におすすめ

・gRPCをFlutterで使ってみたい
・gRPCでアクセストークンの扱い方について知りたい
・フロントエンドからバックエンドまで一貫した認証データの流れをみたい

⭐️ gRPCのデータの流れが見えるようになります

双方向通信などを知りたい方はこちらをご参照ください

手順

1. protoファイルからbufを用いてコードを自動生成しよう

gRPCの特徴として最初に protoファイルでスキーマ定義を行います。
その利点としてはビジネス要件をしっかりかため、バックエンド側とフロントエンド側で protoファイルを共有できれば仕様のずれがなく開発可能ということです。

💡 先にprotoを決めてしまえば APIが遅れてもフロント側はmockで開発できたりします

自動生成ツールは buf と protocがありますが bufがおすすめです。
詳しくはこちらの記事をご参照ください。

今回のスキーマはこちら
大まかに要約すると

こんにちはとリクエストをする
こんにちはとレスポンスをする
そんなサービス関数があるってことを定義する

こんな感じです。

syntax = "proto3";

package hello;

service HelloService {
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}
message HelloRequest {
  string name = 1;
}

message HelloReply {
  string message = 1;
}

2. APIをリクエストする

※ 本記事では、サーバー側がlocalで立ち上がっており、
android emulaterで local通信を前提としております。

final channel = ClientChannel(
  '10.0.2.2', // android emulater想定
  port: 50051, // grpc port 番号
  options: const ChannelOptions(
    // ローカル通信 TLSを無効化
    credentials: ChannelCredentials.insecure(),
  ),
);

final client = HelloServiceClient(channel);
final request = HelloRequest();  // proto のHelloRequest
// メタデータの追加
final options = CallOptions(
  metadata: {
    'authorization': 'Bearer $widgetCurrentToken', // firebase jwtのアクセストークン
  },
);

try {
  final response =
      await client.sayHello(request, options: options);   //protoの SayHello 関数
  logger.d('Response: ${response.message}'); // protoの HelloReplyのmessage
} catch (e) {
  logger.e('Error: $e');
} finally {
  await channel.shutdown();
}

上記のような定形コードになります。
ちなみに、本番ではsecureな通信に変えましょう。

options: const ChannelOptions(
    // ローカル通信 TLSを無効化
    credentials: ChannelCredentials.insecure(),
  ),
  ↓
// 本番の時
options: const ChannelOptions(credentials: ChannelCredentials.secure()),

メタデータでトークンを送信しサーバー側にリクエストを送るのですね！

まとめ

今回はgRPCを用いてAPI通信をおこないました。

こちらのリポジトリで全体は確認できますのでぜひご参照ください！