Flutter即时通讯插件talkjs的使用

Flutter即时通讯插件TalkJS的使用

TalkJS

TalkJS 是一个用于实现即时通讯功能的 JavaScript 库。通过该库，开发者可以轻松地将聊天功能集成到自己的应用中。

示例

以下是一个完整的示例，展示了如何在 Flutter 中使用 TalkJS 插件来实现即时通讯功能。

import 'dart:html';

import 'package:talkjs/talkjs.dart';

Future<void> main() async {
  // 添加 TalkJS 脚本
  addTalkJsScript();
  // 等待 TalkJS 准备就绪
  await TalkJs.ready;
  // 创建并挂载聊天界面
  createInbox();
}

void createInbox() {
  // 定义用户信息
  final me = User(
    UserOptions()
      ..id = '12345' // 用户ID
      ..name = '乔治·卢尼' // 用户名
      ..email = 'george@looney.net' // 用户邮箱
      ..photoUrl = 'https://talkjs.com/docs/img/george.jpg' // 用户头像URL
      ..welcomeMessage = '嘿！你好吗？:-)' // 欢迎消息
  );

  // 创建 TalkJS 会话
  final talkSession = Session(
    SessionOptions()
      ..appId = '<APP_ID>' // 应用ID
      ..me = me,
  );

  // 定义另一个用户信息
  final other = User(
    UserOptions()
      ..id = '54321' // 用户ID
      ..name = '罗纳德·雷根' // 用户名
      ..email = 'ronald@teflon.com' // 用户邮箱
      ..photoUrl = 'https://talkjs.com/docs/img/ronald.jpg' // 用户头像URL
      ..welcomeMessage = '嘿！很高兴聊天:-)' // 欢迎消息
  );

  // 获取或创建对话ID
  final conversationId = TalkJs.oneOnOneId(me, other);
  // 创建或获取对话
  final conversation = talkSession.getOrCreateConversation(conversationId);
  // 将参与者添加到对话中
  conversation.setParticipant(me);
  conversation.setParticipant(other);

  // 创建并挂载聊天界面
  final inbox = TalkJsInbox(
    talkSession.createInbox(
      InboxOptions()..selected = conversation,
    ),
  );

  // 获取容器元素
  final el = document.getElementById('talkjs-container');
  // 如果容器存在，则挂载聊天界面
  if (el == null) return;
  inbox.mount(el);
}

说明

  1. 导入必要的包：

    import 'dart:html';
import 'package:talkjs/talkjs.dart';

  2. 初始化 TalkJS：

    Future<void> main() async {
  addTalkJsScript();
  await TalkJs.ready;
  createInbox();
}
    • addTalkJsScript()：添加 TalkJS 的脚本。
    • await TalkJs.ready：等待 TalkJS 准备就绪。

  3. 创建用户对象：

    final me = User(
  UserOptions()
    ..id = '12345'
    ..name = '乔治·卢尼'
    ..email = 'george@looney.net'
    ..photoUrl = 'https://talkjs.com/docs/img/george.jpg'
    ..welcomeMessage = '嘿！你好吗？:-)'
);
    • UserOptions()：定义用户信息的选项。
    • id：用户的唯一标识符。
    • name：用户名。
    • email：用户邮箱。
    • photoUrl：用户头像 URL。
    • welcomeMessage：欢迎消息。

  4. 创建 TalkJS 会话：

    final talkSession = Session(
  SessionOptions()
    ..appId = '<APP_ID>'
    ..me = me,
);
    • SessionOptions()：定义会话的选项。
    • appId：应用 ID。
    • me：当前用户。

  5. 创建另一个用户对象：

    final other = User(
  UserOptions()
    ..id = '54321'
    ..name = '罗纳德·雷根'
    ..email = 'ronald@teflon.com'
    ..photoUrl = 'https://talkjs.com/docs/img/ronald.jpg'
    ..welcomeMessage = '嘿！很高兴聊天:-)'
);

  6. 获取或创建对话：

    final conversationId = TalkJs.oneOnOneId(me, other);
final conversation = talkSession.getOrCreateConversation(conversationId);
conversation.setParticipant(me);
conversation.setParticipant(other);
    • TalkJs.oneOnOneId(me, other)：生成一对一对话的 ID。
    • getOrCreateConversation(conversationId)：获取或创建对话。
    • setParticipant(me) 和 setParticipant(other)：将参与者添加到对话中。

  7. 创建并挂载聊天界面：

    final inbox = TalkJsInbox(
  talkSession.createInbox(
    InboxOptions()..selected = conversation,
  ),
);

final el = document.getElementById('talkjs-container');
if (el == null) return;
inbox.mount(el);

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中集成和使用Talk.js进行即时通讯的基本代码示例。Talk.js 是一个强大的实时聊天API，可以帮助你快速构建聊天功能。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 Talk.js 的 Flutter 封装依赖。注意，Talk.js 并没有官方的 Flutter SDK，但你可以通过 WebView 或直接使用其 Web SDK 来实现功能。这里我们假设你通过 WebView 来嵌入 Talk.js 的 Web SDK。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 确保使用最新版本

2. 初始化 Talk.js

在 lib 目录下创建一个新的 Dart 文件，比如 talkjs_chat.dart，用于封装 Talk.js 的初始化逻辑。

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

class TalkJSChat extends StatefulWidget {
  @override
  _TalkJSChatState createState() => _TalkJSChatState();
}

class _TalkJSChatState extends State<TalkJSChat> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Talk.js Chat'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '''
          <!DOCTYPE html>
          <html>
          <head>
            <script src="https://cdn.talkjs.com/v4/talk.min.js"></script>
            <script>
              document.addEventListener('DOMContentLoaded', function() {
                const client = new Talk.Client({
                  serverURL: 'YOUR_SERVER_URL', // 替换为你的Talk.js服务器URL
                  appId: 'YOUR_APP_ID', // 替换为你的Talk.js App ID
                  userId: 'USER_ID', // 替换为当前用户的ID
                });

                client.connect().then(function() {
                  const conversation = client.getConversationById('CONVERSATION_ID'); // 替换为你想加入的聊天室ID
                  const chatView = new Talk.ChatView({
                    conversation: conversation,
                    container: document.getElementById('chat-container')
                  });
                }).catch(function(error) {
                  console.error('Failed to connect:', error);
                });
              });
            </script>
          </head>
          <body>
            <div id="chat-container"></div>
          </body>
          </html>
          ''',
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

3. 使用 Talk.js Chat 组件

在你的主应用文件（比如 main.dart）中导入并使用这个 TalkJSChat 组件。

import 'package:flutter/material.dart';
import 'talkjs_chat.dart'; // 导入Talk.js Chat组件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Talk.js Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Talk.js Demo'),
      ),
      body: Center(
        child: TalkJSChat(),
      ),
    );
  }
}

注意事项

  1. 安全性：在实际项目中，不要直接在 WebView 中硬编码敏感信息（如 appId、userId）。考虑使用更安全的方法来传递这些信息，比如通过环境变量或安全的API调用。
  2. Talk.js 配置：确保你已经正确配置了 Talk.js 的服务器URL、App ID等。
  3. 权限管理：Talk.js 的聊天功能需要适当的用户权限管理，确保用户只能访问他们被授权的聊天室。

这个示例展示了如何在 Flutter 应用中使用 WebView 来嵌入 Talk.js 的 Web SDK。如果你有更复杂的需求，比如自定义聊天界面或处理更多的事件，你可能需要进一步深入 Talk.js 的文档，并根据需要进行调整。

回到顶部