Flutter WebSocket通信插件tarsier_websocket_client的使用

Flutter WebSocket通信插件tarsier_websocket_client的使用

简介

Tarsier WebSocket 客户端

文档问题反馈示例代码许可证Pub.dev

Tarsier WebSocket 客户端 是一个用于管理 WebSocket 连接和实时事件处理的 Dart 包。它设计为与由 pusher.com 使用的 Pusher WebSocket 协议兼容。此包扩展了 pusher_client 包的功能,以支持 Windows 平台,同时保持与其他平台的兼容性。

该包已在 Laravel WebSockets 上进行过测试。虽然未在官方 pusher.com 服务上明确测试,但由于协议兼容性,预计它应该可以在 Pusher 上正常工作。来自开发者在 Pusher.com 上测试此包的反馈将非常受欢迎。

✨ 特性

  • WebSocket 连接管理:无缝连接、断开连接和状态管理。
  • 频道类型
    • 公开频道:无需认证的基本频道。
    • 私有频道:需要认证的安全频道。
    • 存在频道:用于跟踪在线用户和存在数据的频道。
    • 私有加密频道:用于敏感数据的安全且加密的频道。
  • 事件处理:绑定、解绑和处理自定义事件。
  • 认证:使用认证选项保护私有和存在频道。
  • 加密:支持使用 SecretBox 进行加密通信的安全频道。
  • Windows 平台支持:扩展了 pusher_client 包,使其在 Windows 上可用。
  • 重连逻辑:自动重连,配置重试次数和间隔。
  • 日志记录:可配置的日志记录用于调试和监控。

👋 免责声明

该包设计用于与 Pusher WebSocket 协议配合使用。它已在 Laravel WebSockets 上进行了充分测试,但未在官方 pusher.com 服务上明确测试。如果它能在 Laravel WebSockets 上正常工作,则由于协议兼容性,很可能也能在 pusher.com 上正常工作。来自开发者在 Pusher.com 上测试此包的反馈将非常受欢迎。

🚀 安装

pubspec.yaml 文件中添加包:

dependencies:
  tarsier_websocket_client: ^1.0.1

运行以下命令安装:

flutter pub get

在 Dart 代码中导入:

import 'package:tarsier_websocket_client/tarsier_websocket_client.dart';

📒 使用

基本设置

以下是一个设置和使用 Tarsier WebSocket 客户端的示例:

import 'package:tarsier_websocket_client/tarsier_websocket_client.dart';

void main() {
  final client = TarsierWebsocketClient(
    options: PusherOptions(
      key: 'your-app-key',
      authOptions: PusherAuthOptions(
        endpoint: 'https://example.com/auth',
        headers: {
          'Authorization': 'Bearer your-token',
        },
      ),
    ),
  );

  // 当连接错误时打印日志
  client.onConnectionError((error) {
    print("连接错误: $error");
  });
  client.onError((error) {
    print("错误: $error");
  });
  client.onDisconnected((data) {
    print("已断开连接: $data");
  });

  // 连接到 WebSocket 服务器
  client.connect();

  // 订阅一个公共频道
  final channel = client.subscribe<Channel>('my-channel');
  channel.bind('my-event', (data) {
    print('接收到事件: $data');
  });

  // 订阅一个私有频道
  final privateChannel = client.private('private-my-channel');
  privateChannel.bind('my-private-event', (data) {
    print('接收到私有事件: $data');
  });

  // 完成后断开连接
  client.disconnect();
}

存在频道示例

final presenceChannel = client.presence('presence-my-channel');
presenceChannel.bind('user-joined', (data) {
  print('新用户加入: $data');
});

日志记录

启用日志记录以供调试:

final client = TarsierWebsocketClient(
  options: PusherOptions(
    key: 'your-app-key',
    enableLogging: true, // 设置为 true 以启用日志记录
    authOptions: PusherAuthOptions(endpoint: 'https://example.com/auth'),
  ),
);

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

1 回复

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


当然,下面是一个使用 tarsier_websocket_client 插件在 Flutter 中实现 WebSocket 通信的示例代码。这个示例包括连接到 WebSocket 服务器、发送消息和接收消息的基本功能。

首先,确保你的 Flutter 项目已经添加了 tarsier_websocket_client 依赖。在 pubspec.yaml 文件中添加以下内容:

dependencies:
  flutter:
    sdk: flutter
  tarsier_websocket_client: ^2.0.0  # 确保使用最新版本

然后运行 flutter pub get 以获取依赖。

接下来,在你的 Flutter 项目中创建一个简单的 WebSocket 通信示例。以下是一个完整的示例代码:

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

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

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

class WebSocketPage extends StatefulWidget {
  @override
  _WebSocketPageState createState() => _WebSocketPageState();
}

class _WebSocketPageState extends State<WebSocketPage> {
  WebSocketClient? _webSocketClient;
  TextEditingController _messageController = TextEditingController();
  List<String> _messages = [];

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

  void connectToWebSocket() async {
    try {
      // 替换成你的 WebSocket 服务器 URL
      String url = "wss://echo.websocket.org";
      _webSocketClient = await WebSocketClient.connect(url);

      _webSocketClient!.onOpen = () {
        print("WebSocket connection opened");
        _messages.add("Connected to WebSocket server");
        setState(() {});
      };

      _webSocketClient!.onMessage = (message) {
        print("Received message: ${message.data}");
        _messages.add("Received: ${message.data}");
        setState(() {});
      };

      _webSocketClient!.onClose = (code, reason) {
        print("WebSocket connection closed with code: $code, reason: $reason");
        _messages.add("Disconnected from WebSocket server");
        setState(() {});
      };

      _webSocketClient!.onError = (error) {
        print("WebSocket error: $error");
        _messages.add("Error: $error");
        setState(() {});
      };
    } catch (e) {
      print("Failed to connect to WebSocket server: $e");
      _messages.add("Failed to connect: $e");
      setState(() {});
    }
  }

  void sendMessage() async {
    if (_webSocketClient != null && _webSocketClient!.isOpen) {
      String message = _messageController.text;
      _webSocketClient!.send(message);
      _messages.add("Sent: $message");
      setState(() {});
      _messageController.clear();
    } else {
      _messages.add("WebSocket is not open");
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
            ),
            TextField(
              controller: _messageController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Send Message',
              ),
            ),
            Button(
              onPressed: sendMessage,
              child: Text('Send'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _webSocketClient?.close();
    _messageController.dispose();
    super.dispose();
  }
}

在这个示例中:

  1. 依赖添加:在 pubspec.yaml 中添加了 tarsier_websocket_client 依赖。
  2. WebSocket 连接:在 WebSocketPageinitState 方法中,使用 WebSocketClient.connect 方法连接到 WebSocket 服务器。
  3. 事件处理:处理了 WebSocket 的 onOpenonMessageonCloseonError 事件。
  4. 发送消息:提供了一个按钮来发送消息到 WebSocket 服务器。
  5. UI 显示:使用 ListViewTextField 来显示接收到的消息和发送消息。

请根据你的实际需求修改 WebSocket 服务器 URL 和其他细节。这个示例代码为你提供了一个基本的 WebSocket 通信框架,可以在此基础上进行扩展和定制。

回到顶部