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
更多关于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();
}
}
在这个示例中:
- 依赖添加:在
pubspec.yaml
中添加了tarsier_websocket_client
依赖。 - WebSocket 连接:在
WebSocketPage
的initState
方法中,使用WebSocketClient.connect
方法连接到 WebSocket 服务器。 - 事件处理:处理了 WebSocket 的
onOpen
、onMessage
、onClose
和onError
事件。 - 发送消息:提供了一个按钮来发送消息到 WebSocket 服务器。
- UI 显示:使用
ListView
和TextField
来显示接收到的消息和发送消息。
请根据你的实际需求修改 WebSocket 服务器 URL 和其他细节。这个示例代码为你提供了一个基本的 WebSocket 通信框架,可以在此基础上进行扩展和定制。