Flutter实时通信插件laravel_flutter_pusher的使用

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

Flutter实时通信插件laravel_flutter_pusher的使用

Laravel Flutter Pusher

pub package

Laravel Flutter Pusher 是一个非官方的Flutter插件,它在Android上包装了pusher-websocket-java,在iOS上包装了pusher-websocket-swift。这是为Flutter Pusher Client 继续开发的插件。

这个包允许你从Pusher服务器消费事件。为了使用这个库,你需要在https://pusher.com上注册一个免费账户。注册后,您将需要应用程序的凭据。 注意 这个包要求 json_annotation : ^4.0.0

安装方法

1. 在pubspec.yaml中添加依赖

dependencies:
  laravel_flutter_pusher: ^0.0.4

2. iOS配置(可选)

如果您的项目是基于Objective-C的Flutter应用,可能会遇到一些问题。可以通过以下步骤解决:

  • /ios/Podfile中设置全局平台至少为10.0:
platform :ios, '10.0'
  • 添加use_frameworks!到Runner部分的末尾:
target 'Runner' do
  use_frameworks!
  # ...其他代码...
end
  • 打开Xcode中的项目,创建一个Swift文件,并按照提示创建桥接头文件。完成后删除Swift文件和桥接头文件。
  • 设置Swift版本:在Runner的Build Settings中将SWIFT_VERSION设置为4.2或5.0。
  • 清理项目并更新Pod:
flutter clean
cd ios
pod install --repo-update

开始使用

下面是一个简单的例子,演示如何连接到Pusher服务器并监听特定频道上的事件:

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
    setUpServices();
  }

  void setUpServices() {
    var options = PusherOptions(
        host: '10.0.2.2', // 注意:这里应该替换为您自己的服务器地址
        port: 6001,
        encrypted: false,
        cluster: 'eu'); // 替换为您的集群ID

    LaravelFlutterPusher pusher =
        LaravelFlutterPusher('app_key', options, enableLogging: true); // 替换为您的应用密钥
    pusher.subscribe('channel').bind('event', (event) {
      print('Received event: ${event.toString()}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

懒加载连接(Lazy Connect)

如果您希望延迟与服务器的连接,可以在客户端构造函数中设置lazyConnect属性为true

R8/Proguard代码混淆

如果您启用了R8或proguard进行代码混淆,则需要添加以下规则:

android/app/build.gradle中:

buildTypes {
  release {
    minifyEnabled true
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
}

android/app/proguard-rules.pro中:

-keep class com.github.olubunmitosin.laravel_flutter_pusher.** { *; }

发展

要生成模型和工厂,请运行以下命令:

flutter packages pub run build_runner build --delete-conflicting-outputs

以上就是关于laravel_flutter_pusher插件的基本介绍和使用方法。请根据实际需求调整示例代码中的参数,如服务器地址、端口、集群ID等。如果有任何问题,欢迎随时提问!


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

1 回复

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


当然,以下是如何在Flutter项目中使用laravel_flutter_pusher插件来实现实时通信的示例代码。这个插件允许你通过Pusher Beams(或者Pusher Channels,如果你使用的是老版本的Pusher服务)与Laravel后端进行实时通信。

1. 安装依赖

首先,你需要在Flutter项目中添加laravel_flutter_pusher依赖。打开你的pubspec.yaml文件,并添加以下依赖:

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

然后运行以下命令来安装依赖:

flutter pub get

2. 配置Pusher

你需要在你的Laravel后端配置Pusher。确保你已经安装了Pusher的PHP SDK,并且在.env文件中配置了Pusher的密钥:

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=your_app_cluster

3. Flutter前端代码

在你的Flutter项目中,你需要初始化Pusher并订阅频道。以下是一个简单的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PusherScreen(),
    );
  }
}

class PusherScreen extends StatefulWidget {
  @override
  _PusherScreenState createState() => _PusherScreenState();
}

class _PusherScreenState extends State<PusherScreen> {
  PusherClient? pusherClient;

  @override
  void initState() {
    super.initState();
    initPusher();
  }

  void initPusher() async {
    // 初始化Pusher客户端
    pusherClient = await PusherClient.init(
      key: 'your_app_key',
      cluster: 'your_app_cluster',
      useTLS: true,
    );

    // 订阅频道
    if (pusherClient != null) {
      pusherClient!.subscribe('your_channel_name')
        .bind('your_event_name', (data) {
          // 处理接收到的数据
          print('Received event: ${data}');
          setState(() {
            // 更新UI,例如显示收到的消息
          });
        })
        .listen((error) {
          // 处理错误
          print('Error: $error');
        });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pusher Demo'),
      ),
      body: Center(
        child: Text('Listening for events...'),
      ),
    );
  }

  @override
  void dispose() {
    // 取消订阅并释放资源
    pusherClient?.disconnect();
    super.dispose();
  }
}

4. Laravel后端代码

在你的Laravel后端,你可以通过广播事件来触发Pusher通知。例如,你可以创建一个事件并使用Pusher进行广播:

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class YourEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('your_channel_name');
    }

    public function broadcastWith()
    {
        return ['message' => $this->message];
    }
}

然后,你可以在你的控制器或其他地方触发这个事件:

event(new YourEvent('Hello, this is a test message!'));

这样,你的Flutter前端就会接收到这个事件并处理它。

注意事项

  1. 确保你的Pusher配置正确,包括密钥、集群和事件名称。
  2. 确保你的Laravel后端和Flutter前端在同一个网络环境中,或者正确配置了CORS(跨源资源共享)。
  3. 监听和处理事件时,注意异常处理和错误日志记录。

希望这个示例代码能帮助你在Flutter项目中使用laravel_flutter_pusher插件实现实时通信。

回到顶部