Flutter实时通信插件pusher_beams的使用

简介

Pusher Beams for Flutter 是一个用于Flutter应用程序的官方插件，它允许开发者轻松集成Pusher Beams的推送通知功能。该插件使用Pigeon来构建平台插件接口，并遵循Federated Plugin Architecture。

• 支持版本
  • Dart >= 2.12.x
  • Flutter >= 2.x.x

功能概览

以下是该插件在不同平台上的功能实现情况：

平台支持

该插件支持Web、Android和iOS平台：

• Web：Chrome (mobile & desktop)，Safari (mobile & desktop)，Edge (mobile & desktop)，Firefox (mobile & desktop)
• Mobile：iOS 10及以上，Android 4.4及以上（>= SDK Version 19）

示例代码

下面是一个完整的示例代码，演示如何在Flutter项目中使用pusher_beams插件。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pusher_beams/pusher_beams.dart';

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

  await PusherBeams.instance.start(
      'your-instance-id'); // Supply your own instanceId

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pusher Beams Flutter Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Pusher Beams Flutter Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    initPusherBeams();
  }

  Future<void> getSecure() async {
    final BeamsAuthProvider provider = BeamsAuthProvider()
      ..authUrl = 'https://some-auth-url.com/secure'
      ..headers = {'Content-Type': 'application/json'}
      ..queryParams = {'page': '1'}
      ..credentials = 'omit';

    await PusherBeams.instance.setUserId(
        'user-id',
        provider,
        (error) => {
              if (error != null) {print(error)}

              // Success! Do something...
            });
  }

  Future<void> initPusherBeams() async {
    print(await PusherBeams.instance.getDeviceInterests());

    if (!kIsWeb) {
      await PusherBeams.instance.onInterestChanges((interests) => {print('Interests: $interests')});
      await PusherBeams.instance.onMessageReceivedInTheForeground(_onMessageReceivedInTheForeground);
    }
    await _checkForInitialMessage();
  }

  Future<void> _checkForInitialMessage() async {
    final initialMessage = await PusherBeams.instance.getInitialMessage();
    if (initialMessage != null) {
      _showAlert('Initial Message Is:', initialMessage.toString());
    }
  }

  void _onMessageReceivedInTheForeground(Map<Object?, Object?> data) {
    _showAlert(data["title"].toString(), data["body"].toString());
  }

  void _showAlert(String title, String message) {
    AlertDialog alert = AlertDialog(
        title: Text(title), content: Text(message), actions: const []);

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          OutlinedButton(
              onPressed: () async {
                await PusherBeams.instance.addDeviceInterest('bananas');
              },
              child: const Text('I like bananas')),
          OutlinedButton(
              onPressed: () async {
                await PusherBeams.instance.removeDeviceInterest('bananas');
              },
              child: const Text("I don't like banana anymore")),
          OutlinedButton(
              onPressed: () async {
                await PusherBeams.instance.addDeviceInterest('apples');
              },
              child: const Text('I like apples')),
          OutlinedButton(
              onPressed: () async {
                await PusherBeams.instance.addDeviceInterest('garlic');
              },
              child: const Text('I like garlic')),
          OutlinedButton(onPressed: getSecure, child: const Text('Get Secure')),
          OutlinedButton(
              onPressed: () async {
                await PusherBeams.instance.clearDeviceInterests();
              },
              child: const Text('Clear my interests'))
        ],
      ),
    );
  }
}

安装与初始化

1. 添加依赖 在pubspec.yaml文件中添加pusher_beams依赖：

   dependencies:
     pusher_beams: ^1.0.1
   

   或者通过命令行添加：

   flutter pub add pusher_beams
   

2. 初始化 在main函数中初始化Pusher Beams：

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await PusherBeams.instance.start('YOUR INSTANCE ID');
     runApp(MyApp());
   }
   

3. 平台特定配置

   • Android

     • 添加以下内容到android/build.gradle文件中的dependencies部分：

       classpath 'com.google.gms:google-services:4.2.0'
       

     • 在android/app/build.gradle文件末尾添加：

       apply plugin: 'com.google.gms.google-services'
       

   • Web

     • 创建web/service-worker.js文件并添加以下内容：

       importScripts("https://js.pusher.com/beams/service-worker.js");
       

     • 在web/index.html文件的<body>标签开头添加以下脚本：

       <script src="https://js.pusher.com/beams/1.0/push-notifications-cdn.js"></script>
       

注意事项

• Prerequisites：确保你已经有一个Pusher Beams账户并获取了instanceId。
• Android Additional：需要Firebase账号和google-services.json文件。
• iOS Additional：启用相关能力并配置APNs。

通过以上步骤，你可以顺利地在Flutter应用中集成Pusher Beams进行实时通信和推送通知。