Flutter通知推送插件notification_hub的使用

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

Flutter通知推送插件 notification_hub 的使用

notification_hub 是一个用于在Flutter应用中实现事件广播机制的插件,灵感来源于iOS的通知中心。它允许开发者通过不同的通知频道(channels)来发布和订阅消息。

视频演示

视频演示

插件说明

该插件支持多个通知频道,例如:

  • Mammals
  • Insects
  • Birds

示例场景

  • Widget A 订阅了 Mammals 通知频道。
  • Widget BWidget C 都订阅了 Insects 通知频道。
  • Widget D 同时订阅了 MammalsBirds 通知频道。

当发布一条关于“狗”的消息时,Widget AWidget D 将会收到这条消息;如果发布的是关于“蜜蜂”的消息,则只有 Widget BWidget C 会接收到;而如果是关于“猫头鹰”的消息,则仅 Widget D 可以接收到。

开始使用

添加依赖

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

dependencies:
  ...
  notification_hub: ^1.0.3

然后运行 flutter pub get 来安装这个包。

使用示例

订阅单个通知频道

你可以创建一个名为 ‘Greetings’ 的通知频道,并订阅它:

NotificationHub.instance.addSubscriber(
  object: this,
  notificationChannel: 'Greetings',
  onData: (data) {
    debugPrint("$data");
  }
);

订阅多个通知频道

如果你需要订阅多个频道,可以多次调用 addSubscriber 方法:

NotificationHub.instance.addSubscriber(
  object: this,
  notificationChannel: 'Morning',
  onData: (data) {
    debugPrint("$data");
  }
);

NotificationHub.instance.addSubscriber(
  object: this,
  notificationChannel: 'Afternoon',
  onData: (data) {
    debugPrint("$data");
  }
);

取消订阅

取消订阅可以通过调用 removeSubscriber 方法完成。如果你想取消所有频道的订阅,可以这样做:

NotificationHub.instance.removeSubscriber(object: this);

发布通知

要向特定频道发布消息,可以使用以下方法:

NotificationHub.instance.post(notificationChannel: 'Greetings', data: 'Hello');

完整的示例代码

下面是一个完整的Flutter应用程序示例,展示了如何集成并使用 notification_hub

import 'package:flutter/material.dart';
import 'package:notification_hub/notification_hub.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notification Hub Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notification Hub Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                NotificationHub.instance.post(notificationChannel: 'Greetings', data: 'Hello from Greetings Channel!');
              },
              child: Text('Post to Greetings Channel'),
            ),
            // Add more widgets as needed...
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // Subscribe to channels in initState or wherever appropriate
    NotificationHub.instance.addSubscriber(
      object: this,
      notificationChannel: 'Greetings',
      onData: (data) {
        print("Received data: $data");
      },
    );
  }

  [@override](/user/override)
  void dispose() {
    // Unsubscribe when the widget is disposed
    NotificationHub.instance.removeSubscriber(object: this);
    super.dispose();
  }
}

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

1 回复

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


当然,以下是如何在Flutter应用中使用notification_hub插件来实现通知推送的代码案例。请注意,为了完整实现这一功能,你需要已经在Azure Notification Hubs中创建了相应的Hub,并配置了必要的证书和密钥。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  notification_hub: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Android

android/app/src/main/AndroidManifest.xml中添加必要的权限和接收器的配置。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
    <application
        ...>
        <!-- 其他配置 -->

        <!-- Notification Hub Receiver -->
        <receiver android:name="com.microsoft.windowsazure.notifications.NotificationHubReceiver"
            android:permission="com.google.android.c2dm.permission.SEND">
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>

        <!-- Registration Intent Service -->
        <service
            android:name="com.microsoft.windowsazure.notifications.RegistrationIntentService"
            android:exported="false">
        </service>
    </application>
</manifest>

3. 配置iOS

ios/Runner/Info.plist中添加必要的配置,比如Firebase Cloud Messaging(FCM)的key(如果你使用的是Firebase作为推送后端)。

<key>FirebaseAppDelegateProxyEnabled</key>
<false/>
<key>GoogleService-Info.plist</key>
<string>Resources/GoogleService-Info.plist</string>

确保你已经在Xcode中配置了推送通知权限。

4. 初始化Notification Hub

在你的Flutter应用的入口文件(通常是main.dart)中初始化Notification Hub。

import 'package:flutter/material.dart';
import 'package:notification_hub/notification_hub.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 替换为你的Notification Hub的连接字符串和Hub名称
  String connectionString = "Endpoint=sb://your-namespace.servicebus.windows.net/;SharedAccessKeyName=DefaultFullSharedAccessSignature;SharedAccessKey=your-key;";
  String hubName = "your-hub-name";

  // 初始化Notification Hub
  await NotificationHub.init(connectionString, hubName);

  // 注册设备
  String installationId = await NotificationHub.getInstallationId();
  print("Installation ID: $installationId");

  // 你可以在这里注册设备标签等

  runApp(MyApp());
}

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 Notification Hub Demo'),
      ),
      body: Center(
        child: Text('Check the console for Installation ID.'),
      ),
    );
  }
}

5. 处理收到的通知

为了处理收到的通知,你需要创建一个新的Dart类来处理这些通知。这通常涉及到在iOSAndroid平台上特定的配置和代码。

Android:

在你的MainActivity.kt(或MainActivity.java)中添加代码来处理通知点击事件。

// MainActivity.kt
import android.content.Intent
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import com.microsoft.windowsazure.notifications.NotificationHub

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        handleNotification(intent)
    }

    private fun handleNotification(intent: Intent) {
        if (NotificationHub.getMessageIdFromIntent(intent) != null) {
            // 处理通知点击事件
        }
    }
}

iOS:

AppDelegate.swift中添加代码来处理通知点击事件。

// AppDelegate.swift
import UIKit
import Flutter
import UserNotifications

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    // 注册远程通知
    let center = UNUserNotificationCenter.current()
    center.requestAuthorization(options: [.alert, .sound, .badge]) { (granted, error) in
      if granted {
        DispatchQueue.main.async {
          application.registerForRemoteNotifications()
        }
      }
    }
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
  
  override func application(_ application: UIApplication,
                           didReceiveRemoteNotification userInfo: [AnyHashable : Any],
                           fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    // 处理远程通知
    if let messageID = userInfo["message_id"] as? String {
      // 处理通知点击事件
    }
    completionHandler(.newData)
  }
}

注意

  1. 确保你的Firebase配置(如果你使用的是Firebase)与Azure Notification Hubs配置相匹配。
  2. 在实际项目中,你可能需要处理更多的通知类型和场景,比如静默通知、数据通知等。
  3. 调试时,请确保你的设备和模拟器已正确配置以接收推送通知。

通过上述步骤,你应该能够在Flutter应用中成功集成并使用Azure Notification Hubs进行通知推送。

回到顶部