Flutter Laravel通知集成插件laravel_notify_fcm的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter Laravel通知集成插件 laravel_notify_fcm 的使用

Laravel Notify Fcm 是一个用于通过 Laravel FCM 向你的 Flutter 应用发送通知的包。以下是如何在项目中集成和使用这个插件的详细步骤。

开始前的准备

安装

首先,在你的 pubspec.yaml 文件中添加依赖:

dependencies:
  laravel_notify_fcm: ^2.0.0

或者,你也可以直接使用 Dart 命令行工具来添加依赖:

dart pub add laravel_notify_fcm

要求

使用方法

首先,导入 laravel_notify_fcm 包:

import 'package:laravel_notify_fcm/laravel_notify_fcm.dart';

将设备添加到数据库

调用 init 方法初始化包:

FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;

await LaravelNotifyFcm.instance.init(
  url: 'https://example.com/api/fcm/devices',
  firebaseMessaging: firebaseMessaging,
  debugMode: true, // 可选,默认为 false
);

参数说明:

  • url: 指向你的 Laravel 应用程序的 URL,用于发送设备令牌。
  • firebaseMessaging: FirebaseMessaging 实例。
  • debugMode: 是否启用调试模式,默认值为 false

然后,调用 storeFcmDevice 方法将设备添加到数据库:

await LaravelNotifyFcm.storeFcmDevice(
  sanctumToken: '从你的 Laravel 用户获取的 Sanctum Token',
);

此方法会请求权限以向设备发送通知。如果用户接受,设备将会被添加到数据库中。

示例应用

以下是一个完整的示例应用,展示了如何在 Flutter 中使用 laravel_notify_fcm

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:laravel_notify_fcm/laravel_notify_fcm.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;

  LaravelNotifyFcm.instance.init(
    firebaseMessaging: firebaseMessaging,
    url: "https://example.com/api/fcm",
    debugMode: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Laravel Notify FCM',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Laravel Notify Fcm")),
      body: SafeArea(
        child: Container(
          child: InkWell(
            child: Text("Enable notifications"),
            onTap: () async {
              // 获取你的 Laravel 应用中的 Sanctum Token

              await LaravelNotifyFcm.storeFcmDevice(
                  sanctumToken: 'sanctumToken');
            },
          ),
        ),
      ),
    );
  }
}

更多信息

  • 查看 CHANGELOG 了解最近的更新内容。
  • 关注我们的 Twitter 获取最新动态。
  • 查看 License 文件了解 MIT 许可证的详细信息。

希望这些信息能帮助你成功集成和使用 laravel_notify_fcm 插件!如果你有任何问题或需要进一步的帮助,请随时联系我。


更多关于Flutter Laravel通知集成插件laravel_notify_fcm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Laravel通知集成插件laravel_notify_fcm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中集成并使用laravel_notify_fcm插件来实现Laravel后端与Flutter前端之间的通知功能的代码案例。

前提条件

  1. Laravel 后端:确保你已经安装并配置了Laravel,以及Firebase Cloud Messaging (FCM)。
  2. Flutter 前端:确保你已经安装了Flutter和Dart环境。

步骤一:在Laravel后端配置FCM

  1. 安装依赖

    composer require laravel-notification-channels/fcm
    
  2. 配置Firebase服务账户密钥

    将你的Firebase服务账户密钥(serviceAccountKey.json)放在Laravel项目的根目录或config目录下,并在.env文件中添加以下配置:

    FCM_SERVICE_ACCOUNT=path/to/your/serviceAccountKey.json
    FCM_PROJECT_ID=your-firebase-project-id
    
  3. 创建FCM通知类(可选,但推荐):

    app/Notifications目录下创建一个新的通知类,例如UserNotification.php

    <?php
    
    namespace App\Notifications;
    
    use Illuminate\Bus\Queueable;
    use Illuminate\Contracts\Queue\ShouldQueue;
    use Illuminate\Notifications\Messages\MailMessage;
    use Illuminate\Notifications\Notification;
    use Kreait\Firebase\Messaging\CloudMessage;
    use NotificationChannels\Fcm\FcmChannel;
    use NotificationChannels\Fcm\FcmMessage;
    
    class UserNotification extends Notification implements ShouldQueue
    {
        use Queueable;
    
        protected $data;
    
        public function __construct($data)
        {
            $this->data = $data;
        }
    
        public function via($notifiable)
        {
            return [FcmChannel::class];
        }
    
        public function toFcm($notifiable)
        {
            return FcmMessage::create()
                ->setData([
                    'title' => $this->data['title'],
                    'body' => $this->data['body'],
                    'click_action' => 'FLUTTER_NOTIFICATION_CLICK'
                ]);
        }
    }
    
  4. 发送通知

    在你的控制器或任何需要发送通知的地方使用notify方法:

    use App\Models\User;
    use App\Notifications\UserNotification;
    
    $user = User::find(1);
    $data = [
        'title' => 'Hello',
        'body' => 'This is a test notification'
    ];
    $user->notify(new UserNotification($data));
    

步骤二:在Flutter前端集成FCM和laravel_notify_fcm

  1. 添加依赖

    pubspec.yaml文件中添加以下依赖:

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^1.0.0 # 确保版本是最新的
      firebase_messaging: ^10.0.0 # 确保版本是最新的
      laravel_notify_fcm: ^latest_version # 使用最新版本
    
  2. 配置Firebase

    按照Firebase的官方文档配置你的Flutter项目,获取google-services.json文件并放置在android/app/目录下。

  3. 初始化Firebase和FCM

    在你的Flutter应用的入口文件(通常是main.dart)中初始化Firebase和FCM:

    import 'package:flutter/material.dart';
    import 'package:firebase_core/firebase_core.dart';
    import 'package:firebase_messaging/firebase_messaging.dart';
    import 'package:laravel_notify_fcm/laravel_notify_fcm.dart';
    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await Firebase.initializeApp();
    
      FirebaseMessaging.instance.configure(
        onMessage: (RemoteMessage message) async {
          // 处理接收到的消息
          print('A new FCM message arrived!');
          print('Message data: ${message.data}');
        },
        onBackgroundMessage: myBackgroundMessageHandler,
        onLaunch: (RemoteMessage message) async {
          // 处理应用从后台打开时的消息
        },
        onResume: (RemoteMessage message) async {
          // 处理应用从终止状态恢复时的消息
        },
      );
    
      runApp(MyApp());
    }
    
    Future<void> myBackgroundMessageHandler(RemoteMessage message) async {
      // 在后台处理消息
      print('Handling a background message: ${message.data}');
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Flutter Demo Home Page'),
          ),
          body: Center(
            child: Text('Hello, Flutter with Laravel FCM!'),
          ),
        );
      }
    }
    
  4. 订阅主题或特定通知(如果需要):

    你可以根据Laravel后端发送通知时指定的主题或数据来订阅特定的通知。

这样,你的Flutter应用应该能够成功接收来自Laravel后端通过FCM发送的通知。确保在开发和测试时,Firebase项目配置正确,并且FCM服务正常运作。

回到顶部