Flutter实时通信插件pusher_client的使用

Pusher Channels Flutter Client

这是一个针对Flutter的Pusher Channels客户端插件，支持Android和iOS平台。它包装了 pusher-websocket-java v2.2.5 和 pusher-websocket-swift v8.0.0。

更多关于Pusher Channels的教程和深入信息，请访问官方文档。

此客户端适用于官方Pusher服务器以及Laravel自托管的Pusher WebSocket服务器（laravel-websockets）。

支持的平台与部署目标

• Android API 16及以上
• iOS 9.0及以上

安装

在pubspec.yaml文件中添加以下内容：

dependencies:
    pusher_client: ^2.0.0

配置

iOS配置

在ios/Podfile文件中设置最低部署目标为9.0，将以下行取消注释并修改：

platform :ios, '9.0'

如果你使用的是本地Pusher服务器（如laravel-websockets），可能会遇到订阅私有频道的问题。可以在ios/Runner/Info.plist中添加如下代码解决：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

或者指定你将连接的域名：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

Android配置

如果你启用了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.chinloyal.pusher_client.** { *; }

API概览

以下是API的核心用法示例：

PusherOptions options = PusherOptions(
    host: 'example.com',
    wsPort: 6001,
    encrypted: false,
    auth: PusherAuth(
        'http://example.com/auth',
        headers: {
            'Authorization': 'Bearer $token',
        },
    ),
);

PusherClient pusher = PusherClient(
    YOUR_APP_KEY,
    options,
    autoConnect: false
);

// connect at a later time than at instantiation.
pusher.connect();

pusher.onConnectionStateChange((state) {
    print("previousState: ${state.previousState}, currentState: ${state.currentState}");
});

pusher.onConnectionError((error) {
    print("error: ${error.message}");
});

// Subscribe to a private channel
Channel channel = pusher.subscribe("private-orders");

// Bind to listen for events called "order-status-updated" sent to "private-orders" channel
channel.bind("order-status-updated", (PusherEvent event) {
    print(event.data);
});

// Unsubscribe from channel
pusher.unsubscribe("private-orders");

// Disconnect from pusher service
pusher.disconnect();

示例Demo

以下是一个完整的示例demo，展示了如何使用pusher_client插件进行实时通信：

import 'dart:developer';

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PusherClient pusher;
  Channel channel;

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

    String token = getToken();

    pusher = new PusherClient(
      "app-key",
      PusherOptions(
        // if local on android use 10.0.2.2
        host: 'localhost',
        encrypted: false,
        auth: PusherAuth(
          'http://example.com/broadcasting/auth',
          headers: {
            'Authorization': 'Bearer $token',
          },
        ),
      ),
      enableLogging: true,
    );

    channel = pusher.subscribe("private-orders");

    pusher.onConnectionStateChange((state) {
      log("previousState: ${state.previousState}, currentState: ${state.currentState}");
    });

    pusher.onConnectionError((error) {
      log("error: ${error.message}");
    });

    channel.bind('status-update', (event) {
      log(event.data);
    });

    channel.bind('order-filled', (event) {
      log("Order Filled Event" + event.data.toString());
    });
  }

  String getToken() => "super-secret-token";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Example Pusher App'),
        ),
        body: Center(
            child: Column(
          children: [
            ElevatedButton(
              child: Text('Unsubscribe Private Orders'),
              onPressed: () {
                pusher.unsubscribe('private-orders');
              },
            ),
            ElevatedButton(
              child: Text('Unbind Status Update'),
              onPressed: () {
                channel.unbind('status-update');
              },
            ),
            ElevatedButton(
              child: Text('Unbind Order Filled'),
              onPressed: () {
                channel.unbind('order-filled');
              },
            ),
            ElevatedButton(
              child: Text('Bind Status Update'),
              onPressed: () {
                channel.bind('status-update', (PusherEvent event) {
                  log("Status Update Event" + event.data.toString());
                });
              },
            ),
            ElevatedButton(
              child: Text('Trigger Client Typing'),
              onPressed: () {
                channel.trigger('client-istyping', {'name': 'Bob'});
              },
            ),
          ],
        )),
      ),
    );
  }
}

这个示例展示了如何创建一个简单的Flutter应用程序，并使用pusher_client插件订阅和绑定到实时事件。通过点击按钮，你可以执行取消订阅、解除绑定事件、重新绑定事件以及触发客户端事件等操作。