Flutter WebSocket通信插件ws的使用
Flutter WebSocket通信插件ws的使用
简介
ws
是一个跨平台的WebSocket客户端,适用于Dart和Flutter应用程序。它允许你连接到WebSocket服务器,发送和接收消息,并处理连接状态的变化。
安装
在你的 pubspec.yaml
文件中添加以下依赖:
dependencies:
ws: ^latest_version
确保将 latest_version
替换为最新的版本号。
属性
- reconnectTimeout: 重连超时时间,默认为5秒。
- state: 当前WebSocket连接状态。
- stateChanges: WebSocket连接状态变化的流。
- stream: WebSocket处理的消息事件流。
- metrics: 包含WebSocket连接指标的
WebSocketMetrics
对象。
方法
- connect(String url): 连接到指定URL的WebSocket服务器。
- disconnect([int? code = 1000, String? reason = ‘NORMAL_CLOSURE’]): 关闭WebSocket连接,可选传递关闭码和原因。
- add(Object data): 发送数据(字符串或字节列表)到WebSocket连接。
- close([int? code = 1000, String? reason = ‘NORMAL_CLOSURE’]): 永久停止WebSocket连接并释放所有资源。
配置选项
常见配置
- connectionRetryInterval: 重连间隔策略,默认禁用重连。
- protocols: 指定客户端愿意使用的子协议。
- timeout: 连接建立的最大等待时间,默认30秒。
- afterConnect: 连接建立后的回调函数。
- interceptors: WebSocket消息拦截器。
VM平台配置
- headers: 设置连接的HTTP头。
- compression: 配置压缩选项。
- customClient: 使用自定义的
HttpClient
。 - userAgent: 设置自定义User-Agent。
JS平台配置
- useBlobForBinary: 是否将
Uint8List
作为Blob
发送,默认为typed data。
示例代码
下面是一个完整的示例,展示了如何使用 ws
插件连接到WebSocket服务器、发送和接收消息,并处理连接状态变化。
// ignore_for_file: avoid_print
import 'dart:async';
import 'dart:io' as io show exit;
import 'package:ws/ws.dart';
void main([List<String>? args]) {
// WebSocket服务器URL
const url = String.fromEnvironment('URL',
defaultValue: 'wss://echo.plugfox.dev:443/connect');
// 创建WebSocket客户端并配置自动重连
final client = WebSocketClient(
WebSocketOptions.common(
connectionRetryInterval: (
min: const Duration(milliseconds: 500),
max: const Duration(seconds: 15),
),
),
)
..stream.listen((message) => print('< $message'))
..stateChanges.listen((state) => print('* $state'))
..connect(url)
..add('Hello, ') // 发送消息 "Hello, "
..add('world!'); // 发送消息 "world!"
// 1秒后关闭连接
Timer(const Duration(seconds: 1), () async {
await client.close(); // 关闭连接
print('Metrics:\n${client.metrics}'); // 打印连接指标
io.exit(0); // 退出进程
});
}
重连机制
ws
插件支持自动重连功能。当连接丢失时,客户端会自动尝试重新连接。你可以通过监听 stateChanges
流来处理重连事件。重连延迟会按指数增长,以防止服务器过载。
指标收集
ws
插件会自动收集关于已发送和接收的消息数量及字节数的指标。你可以通过 metrics
属性获取这些指标。
JSON支持
ws
插件支持JSON解码。你可以通过 client.stream.json
获取解码后的消息流。
特性和路线图
- ✅ 跨平台WebSocket客户端
- ✅ 支持安全WebSocket连接 (
wss://
) - ✅ 自定义协议
- ✅ 连接状态变化
- ✅ 自动重连到新URL
- ✅ 并发支持
- ✅ 重连尝试的全抖动策略
- ✅ 自动JSON解码的消息流
- ✅ 指标与TX/RX字节数和计数器
- ✅ 平台特定选项
- ✅ 连接超时
- ✅ 从自定义实现创建WebSocket客户端
- ✅ 测试用的假客户端
- ✅ 自定义异常
- ✅ 90%测试覆盖率
- ✅ 连接/重连后的第一条消息
- ✅ 拦截器(中间件)
更多资源
- RFC 6455: The WebSocket Protocol
- WebSocket API on MDN
- Dart HTML WebSocket library
- Dart IO WebSocket library
许可证
标签
web, socket, ws, wss, WebSocket, cross, platform
希望以上内容能帮助你更好地理解和使用 ws
插件进行WebSocket通信。如果有任何问题,欢迎随时提问!
更多关于Flutter WebSocket通信插件ws的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter WebSocket通信插件ws的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用websocket
插件(假设你指的是web_socket_channel
插件)进行WebSocket通信的示例代码。这个插件是Flutter社区广泛使用的,用于在Flutter应用中建立和管理WebSocket连接。
首先,你需要在你的pubspec.yaml
文件中添加依赖:
dependencies:
flutter:
sdk: flutter
web_socket_channel: ^2.1.0 # 请检查最新版本号并更新
然后,运行flutter pub get
来安装依赖。
接下来,是一个简单的Flutter应用示例,展示了如何使用web_socket_channel
进行WebSocket通信:
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WebSocket Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
WebSocketChannel? _channel;
TextEditingController _controller = TextEditingController();
String _messages = '';
@override
void initState() {
super.initState();
initWebSocket();
}
void initWebSocket() {
_channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.org'), // 替换为你的WebSocket服务器URL
);
_channel!.stream.listen(
(message) {
setState(() {
_messages += '${message}\n';
});
},
onError: (error) {
print('WebSocket error: $error');
},
onDone: () {
print('WebSocket closed');
},
);
}
void _sendMessage() {
if (_channel != null && _controller.text.isNotEmpty) {
_channel!.sink.add(_controller.text);
_controller.clear();
}
}
@override
void dispose() {
_controller.dispose();
_channel?.sink.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WebSocket Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: SingleChildScrollView(
child: Text(
_messages,
style: TextStyle(fontSize: 16),
),
),
),
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Send a message',
),
onSubmitted: _sendMessage,
),
SizedBox(height: 8),
ElevatedButton(
onPressed: _sendMessage,
child: Text('Send'),
),
],
),
),
);
}
}
代码说明:
- 依赖添加:在
pubspec.yaml
中添加web_socket_channel
依赖。 - WebSocket连接:在
initWebSocket
方法中,使用WebSocketChannel.connect
方法连接到WebSocket服务器。这里使用的是wss://echo.websocket.org
,一个公共的回声WebSocket服务器,你可以替换为你的WebSocket服务器URL。 - 消息监听:通过
_channel!.stream.listen
方法监听来自服务器的消息,并更新UI。 - 发送消息:通过
_channel!.sink.add
方法发送消息到服务器。 - 资源管理:在
dispose
方法中释放资源,关闭WebSocket连接和文本控制器。
这个示例展示了基本的WebSocket通信功能,包括连接、监听消息、发送消息和资源管理。你可以根据需要扩展这个示例,添加更多的功能或处理更复杂的业务逻辑。