Flutter即时通讯插件rocket_chat_flutter_connector的使用

Flutter即时通讯插件rocket_chat_flutter_connector的使用

开始使用

这个项目是一个用于Dart的库模块，可以轻松地在多个Flutter或Dart项目中共享代码。如果你是Flutter新手，可以查看我们的在线文档，里面包含教程、示例、移动开发指导和完整的API参考。

完整示例

以下是一个完整的示例代码，展示了如何使用rocket_chat_flutter_connector插件进行即时通讯。

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:loggy/loggy.dart';
import 'package:rocket_chat_flutter_connector/models/authentication.dart';
import 'package:rocket_chat_flutter_connector/models/channel.dart';
import 'package:rocket_chat_flutter_connector/models/room.dart';
import 'package:rocket_chat_flutter_connector/models/user.dart';
import 'package:rocket_chat_flutter_connector/services/authentication_service.dart';
import 'package:rocket_chat_flutter_connector/services/http_service.dart' as rocket_http_service;
import 'package:rocket_chat_flutter_connector/web_socket/notification.dart' as rocket_notification;
import 'package:rocket_chat_flutter_connector/web_socket/web_socket_service.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

void main() {
  Loggy.initLoggy(
    logPrinter: const PrettyPrinter(
      showColors: true,
    ),
    logOptions: const LogOptions(
      LogLevel.all,
      stackTraceLevel: LogLevel.off,
    ),
  );
  runApp(MyApp());
}

final String serverUrl = "serverUrl";
final String webSocketUrl = "websocketUrl";
final String username = "user";
final String password = "password";
final Channel channel = Channel(id: "GENERAL");
final Room room = Room(id: "roomId");
final rocket_http_service.HttpService rocketHttpService = rocket_http_service.HttpService(Uri.parse(serverUrl));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Rocket Chat WebSocket Demo';

    return MaterialApp(
      title: title,
      home: MyHomePage(
        title: title,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, @required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  WebSocketChannel webSocketChannel;
  WebSocketService webSocketService = WebSocketService();
  User user;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Authentication>(
        future: getAuthentication(),
        builder: (context, AsyncSnapshot<Authentication> snapshot) {
          logInfo('🚀🚀 FutureBuilder Authentication ${snapshot.hasData}');
          logInfo('🚀🚀 FutureBuilder Authentication error ${snapshot.hasError}');
          if (snapshot.hasData) {
            user = snapshot.data.data.me;
            logInfo('🚀🚀 login ${user.name}');
            webSocketChannel = webSocketService.connectToWebSocket(
                webSocketUrl, authToken: snapshot.data.data.authToken);
            webSocketService.streamNotifyUserSubscribe(webSocketChannel, user);
            return _getScaffold();
          } else {
            return Center(child: CircularProgressIndicator());
          }
        });
  }

  Scaffold _getScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Form(
            child: TextFormField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Send a message'),
            ),
          ),
          StreamBuilder(
            stream: webSocketChannel.stream,
            builder: (context, snapshot) {
              rocket_notification.Notification notification = snapshot.hasData
                  ? rocket_notification.Notification.fromMap(
                      jsonDecode(snapshot.data))
                  : null;
              print(notification);
              webSocketService.streamChannelMessagesSubscribe(
                  webSocketChannel, channel);
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                child: Text(
                    notification != null ? '${(notification?.fields!=null && notification?.fields?.args!=null && notification.fields.args.isNotEmpty)?notification.fields?.args[0].payload.message.msg:''}' : ''),
              );
            },
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      // webSocketService.sendMessageOnChannel(
      //     _controller.text, webSocketChannel, channel);
      webSocketService.sendMessageOnRoom(
          _controller.text, webSocketChannel, room);
    }
  }

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if(_controller.text.isNotEmpty){
        webSocketService.streamNotifyRoom(
             webSocketChannel, user, room);
      }
    });
  }

  @override
  void dispose() {
    webSocketChannel.sink.close();
    super.dispose();
  }

  Future<Authentication> getAuthentication() async {
    final AuthenticationService authenticationService =
        AuthenticationService(rocketHttpService);
    return await authenticationService.login(username, password);
  }
}

代码解释

  1. 导入必要的包：

    import 'package:rocket_chat_flutter_connector/models/authentication.dart';
import 'package:rocket_chat_flutter_connector/models/channel.dart';
import 'package:rocket_chat_flutter_connector/models/room.dart';
import 'package:rocket_chat_flutter_connector/models/user.dart';
import 'package:rocket_chat_flutter_connector/services/authentication_service.dart';
import 'package:rocket_chat_flutter_connector/services/http_service.dart' as rocket_http_service;
import 'package:rocket_chat_flutter_connector/web_socket/notification.dart' as rocket_notification;
import 'package:rocket_chat_flutter_connector/web_socket/web_socket_service.dart';

  2. 初始化日志系统：

    void main() {
  Loggy.initLoggy(
    logPrinter: const PrettyPrinter(
      showColors: true,
    ),
    logOptions: const LogOptions(
      LogLevel.all,
      stackTraceLevel: LogLevel.off,
    ),
  );
  runApp(MyApp());
}

  3. 定义服务器URL、WebSocket URL、用户名和密码：

    final String serverUrl = "serverUrl";
final String webSocketUrl = "websocketUrl";
final String username = "user";
final String password = "password";

  4. 创建HTTP服务实例：

    final rocket_http_service.HttpService rocketHttpService = rocket_http_service.HttpService(Uri.parse(serverUrl));

  5. 创建应用入口点：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Rocket Chat WebSocket Demo';

    return MaterialApp(
      title: title,
      home: MyHomePage(
        title: title,
      ),
    );
  }
}

  6. 创建主页状态管理类：

    class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, @required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

  7. 实现主页状态类：

    class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  WebSocketChannel webSocketChannel;
  WebSocketService webSocketService = WebSocketService();
  User user;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Authentication>(
        future: getAuthentication(),
        builder: (context, AsyncSnapshot<Authentication> snapshot) {
          logInfo('🚀🚀 FutureBuilder Authentication ${snapshot.hasData}');
          logInfo('🚀🚀 FutureBuilder Authentication error ${snapshot.hasError}');
          if (snapshot.hasData) {
            user = snapshot.data.data.me;
            logInfo('🚀🚀 login ${user.name}');
            webSocketChannel = webSocketService.connectToWebSocket(
                webSocketUrl, authToken: snapshot.data.data.authToken);
            webSocketService.streamNotifyUserSubscribe(webSocketChannel, user);
            return _getScaffold();
          } else {
            return Center(child: CircularProgressIndicator());
          }
        });
  }

  Scaffold _getScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Form(
            child: TextFormField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Send a message'),
            ),
          ),
          StreamBuilder(
            stream: webSocketChannel.stream,
            builder: (context, snapshot) {
              rocket_notification.Notification notification = snapshot.hasData
                  ? rocket_notification.Notification.fromMap(
                      jsonDecode(snapshot.data))
                  : null;
              print(notification);
              webSocketService.streamChannelMessagesSubscribe(
                  webSocketChannel, channel);
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 24.0),
                child: Text(
                    notification != null ? '${(notification?.fields!=null && notification?.fields?.args!=null && notification.fields.args.isNotEmpty)?notification.fields?.args[0].payload.message.msg:''}' : ''),
              );
            },
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      // webSocketService.sendMessageOnChannel(
      //     _controller.text, webSocketChannel, channel);
      webSocketService.sendMessageOnRoom(
          _controller.text, webSocketChannel, room);
    }
  }

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if(_controller.text.isNotEmpty){
        webSocketService.streamNotifyRoom(
             webSocketChannel, user, room);
      }
    });
  }

  @override
  void dispose() {
    webSocketChannel.sink.close();
    super.dispose();
  }

  Future<Authentication> getAuthentication() async {
    final AuthenticationService authenticationService =
        AuthenticationService(rocketHttpService);
    return await authenticationService.login(username, password);
  }
}

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

1 回复

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


rocket_chat_flutter_connector 是一个用于在 Flutter 应用中集成 Rocket.Chat 即时通讯功能的插件。它允许开发者轻松地将 Rocket.Chat 的聊天功能集成到 Flutter 应用中，并提供了丰富的 API 来处理消息、用户、频道等。

以下是如何使用 rocket_chat_flutter_connector 的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 rocket_chat_flutter_connector 依赖：

dependencies:
  flutter:
    sdk: flutter
  rocket_chat_flutter_connector: ^latest_version

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

2. 初始化 Rocket.Chat 连接

在你的 Flutter 应用中，首先需要初始化 Rocket.Chat 连接。通常你可以在 main.dart 中或应用启动时进行初始化。

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Rocket.Chat 连接
  await RocketChatFlutterConnector.initialize(
    serverUrl: 'https://your-rocket-chat-server.com',
  );
  
  runApp(MyApp());
}

3. 用户登录

在连接到 Rocket.Chat 服务器后，你需要让用户登录。可以使用以下代码进行登录：

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

Future<void> login() async {
  try {
    await RocketChatFlutterConnector.login(
      username: 'your_username',
      password: 'your_password',
    );
    print('登录成功');
  } catch (e) {
    print('登录失败: $e');
  }
}

4. 获取频道列表

登录成功后，你可以获取用户所在的频道列表：

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

Future<void> getChannels() async {
  try {
    final channels = await RocketChatFlutterConnector.getChannels();
    print('频道列表: $channels');
  } catch (e) {
    print('获取频道列表失败: $e');
  }
}

5. 发送消息

你可以通过以下代码向频道发送消息：

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

Future<void> sendMessage(String channelId, String message) async {
  try {
    await RocketChatFlutterConnector.sendMessage(
      channelId: channelId,
      message: message,
    );
    print('消息发送成功');
  } catch (e) {
    print('消息发送失败: $e');
  }
}

6. 接收消息

你可以通过监听消息流来接收实时消息：

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

StreamSubscription? _messageSubscription;

void startListeningMessages(String channelId) {
  _messageSubscription = RocketChatFlutterConnector.getMessageStream(channelId).listen((message) {
    print('收到新消息: $message');
  });
}

void stopListeningMessages() {
  _messageSubscription?.cancel();
}

7. 用户登出

当用户需要登出时，可以使用以下代码：

import 'package:rocket_chat_flutter_connector/rocket_chat_flutter_connector.dart';

Future<void> logout() async {
  try {
    await RocketChatFlutterConnector.logout();
    print('登出成功');
  } catch (e) {
    print('登出失败: $e');
  }
}

8. 处理异常

在使用过程中，可能会遇到各种异常情况，建议在代码中添加异常处理逻辑，以确保应用的稳定性。

9. 清理资源

在应用退出或不再需要 Rocket.Chat 连接时，确保清理相关资源：

[@override](/user/override)
void dispose() {
  stopListeningMessages();
  super.dispose();
}
回到顶部