Flutter即时通讯插件 twilio_programmable_chat 的使用

注意事项

Twilio 已宣布在2022年7月25日停止支持 Programmable Chat。更多信息可以参考 Twilio 官方公告。

尽管如此，如果您仍然希望了解如何在 Flutter 应用中集成 Twilio Programmable Chat 插件，以下内容将为您提供指导。

插件简介

twilio_programmable_chat 是一个社区维护的 Flutter 插件，用于构建基于 Twilio Programmable Chat 的聊天应用。该插件目前处于开发阶段，尚未达到稳定版本（v1.0.0），因此不建议用于生产环境。

支持平台

• Android
• iOS
• Web（暂不支持）

示例代码

以下是一个简单的示例，展示了如何在 Flutter 应用中集成 Twilio Programmable Chat 并处理推送通知。

项目初始化

首先，确保您已经配置了 Firebase 和 APNs（iOS）以接收推送通知。接下来，在 main.dart 中进行初始化：

import 'dart:convert';
import 'dart:io';

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:provider/provider.dart';
import 'join/join_page.dart'; // 替换为您的登录页面或频道选择页面
import 'shared/services/backend_service.dart'; // 替换为您的后端服务实现

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  _configureNotifications();
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(TwilioProgrammableChatExample());
}

// 配置通知
void _configureNotifications() {
  if (Platform.isAndroid) {
    FlutterLocalNotificationsPlugin().initialize(
      InitializationSettings(
        android: AndroidInitializationSettings('icon_192'), // 替换为您应用的图标
      ),
    );
    FirebaseMessaging.onMessage.listen(onMessage);
    FirebaseMessaging.onMessageOpenedApp.listen(onMessageOpenedApp);
    FirebaseMessaging.onBackgroundMessage(onBackgroundMessage);
  }
}

// 处理前台消息
void onMessage(RemoteMessage message) {
  print('Main::FirebaseMessaging.onMessage => ${message.data}');
}

// 处理点击通知时的消息
void onMessageOpenedApp(RemoteMessage message) {
  print('Main::FirebaseMessaging.onMessageOpenedApp => ${message.data}');
}

// 处理后台消息
Future<void> onBackgroundMessage(RemoteMessage message) async {
  print('Main::FirebaseMessaging.onBackgroundMessage => ${message.data}');
  final data = Map<String, dynamic>.from(message.data);
  if (data['message_index'] != null && data['channel_title'] != null && data['twi_body'] != null) {
    await FlutterLocalNotificationsPlugin().show(
      int.parse(data['message_index']),
      data['channel_title'],
      data['twi_body'],
      NotificationDetails(
        android: AndroidNotificationDetails(
          '0',
          'Chat',
          'Twilio Chat Channel 0',
          importance: Importance.high,
          priority: Priority.high,
          showWhen: true,
        ),
      ),
      payload: jsonEncode(data),
    );
  }
}

class TwilioProgrammableChatExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Provider<BackendService>(
      create: (_) => TwilioFirebaseFunctions.instance, // 替换为您的后端服务实现
      child: MaterialApp(
        title: 'Twilio Programmable Chat',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: AppBarTheme(
            color: Colors.blue,
            textTheme: TextTheme(
              headline6: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
        ),
        home: JoinPage(), // 替换为您的登录页面或频道选择页面
      ),
    );
  }
}

后端服务示例

为了简化示例，假设您已经有了一个后端服务来管理用户身份验证和获取 Twilio 访问令牌。以下是 backend_service.dart 的一个简单实现：

class BackendService {
  Future<String> getAccessToken(String identity) async {
    // 实现获取访问令牌的逻辑，例如通过 HTTP 请求从您的服务器获取
    // 返回格式如 "your_access_token"
    return "your_access_token";
  }
}

class TwilioFirebaseFunctions implements BackendService {
  static final TwilioFirebaseFunctions instance = TwilioFirebaseFunctions._internal();

  TwilioFirebaseFunctions._internal();

  [@override](/user/override)
  Future<String> getAccessToken(String identity) async {
    // 实现获取访问令牌的逻辑
    return "your_access_token";
  }
}

登录页面示例

创建一个简单的登录页面，允许用户输入用户名并获取访问令牌：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../shared/services/backend_service.dart';

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

class _JoinPageState extends State<JoinPage> {
  final TextEditingController _controller = TextEditingController();

  void _onJoinPressed() async {
    final String identity = _controller.text;
    final BackendService backendService = Provider.of<BackendService>(context, listen: false);
    final String token = await backendService.getAccessToken(identity);

    // 使用获取到的 token 连接到 Twilio Chat
    // 这里可以导航到聊天页面或其他页面
    Navigator.pushNamed(context, '/chat', arguments: {'token': token});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Join Chat'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your username'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _onJoinPressed,
              child: Text('Join'),
            ),
          ],
        ),
      ),
    );
  }
}