Flutter WebSocket通信插件web_socket的使用
Flutter WebSocket通信插件web_socket的使用
简介
web_socket
是一个易于使用的库,用于与WebSockets进行通信,它具有多种实现方式。该库旨在提供一个简单、定义明确的WebSocket接口,以确保在不同实现之间具有一致的行为。
为什么需要另一个WebSocket包?
目前最流行的WebSocket包是web_socket_channel。它有两种实现,一种基于package:web
,另一种基于dart:io WebSocket
。然而,这些实现并不具有一致的行为。而web_socket
包当前有三种实现(未来还会有更多),它们都通过了相同的一致性测试:
使用方法
示例代码:基本连接和消息收发
import 'package:web_socket/web_socket.dart';
void main() async {
// 创建WebSocket连接
final socket = await WebSocket.connect(Uri.parse('wss://ws.postman-echo.com/raw'));
// 监听来自服务器的消息
socket.events.listen((e) async {
switch (e) {
case TextDataReceived(text: final text):
print('Received Text: $text');
await socket.close();
case BinaryDataReceived(data: final data):
print('Received Binary: $data');
case CloseReceived(code: final code, reason: final reason):
print('Connection to server closed: $code [$reason]');
}
});
// 向服务器发送消息
socket.sendText('Hello Dart WebSockets! 🎉');
}
示例代码:实时比特币价格查询
以下示例展示了如何使用web_socket
库来订阅并打印比特币的美元价值。
import 'dart:convert';
import 'dart:io';
import 'package:web_socket/web_socket.dart';
const requestId = 305;
/// Prints the US dollar value of Bitcoins continuously.
void main() async {
// Whitebit public WebSocket API documentation:
// https://docs.whitebit.com/public/websocket/
final socket =
await WebSocket.connect(Uri.parse('wss://api.whitebit.com/ws'));
socket.events.listen((e) {
switch (e) {
case TextDataReceived(text: final text):
final json = jsonDecode(text) as Map;
if (json['id'] == requestId) {
if (json['error'] != null) {
stderr.writeln('Failure: ${json['error']}');
socket.close();
}
} else {
final params = (json['params'] as List).cast<List<dynamic>>();
print('₿1 = USD\$${params[0][2]}');
}
case BinaryDataReceived():
stderr.writeln('Unexpected binary response from server');
socket.close();
case CloseReceived():
stderr.writeln('Connection to server closed');
}
});
// 发送订阅请求
socket.sendText(jsonEncode({
'id': requestId,
'method': 'candles_subscribe',
'params': ['BTC_USD', 5]
}));
}
状态:实验性
请注意,此包目前处于实验阶段,并在labs.dart.dev pub发布商下发布,以征求反馈。对于labs.dart.dev下的发布包,我们通常计划在经过一段时间的反馈和迭代后,将包升级为支持的发布商(如dart.dev,tools.dart.dev),或停止该包。这些包的API和破坏性更改的预期率要高得多。
您的反馈对我们改进这个包非常重要。如果您有任何一般性的反馈、建议或评论,请在bug tracker中提交问题。
更多关于Flutter WebSocket通信插件web_socket的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter WebSocket通信插件web_socket的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个使用Flutter中的web_socket_channel
插件进行WebSocket通信的示例代码。这个插件提供了一个简单的方法来在Flutter应用中建立和管理WebSocket连接。
首先,你需要在你的pubspec.yaml
文件中添加web_socket_channel
依赖:
dependencies:
flutter:
sdk: flutter
web_socket_channel: ^2.0.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:convert';
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> {
final WebSocketChannel _channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.org/') // 替换为你的WebSocket服务器URL
);
final TextEditingController _controller = TextEditingController();
String _response = '';
@override
void dispose() {
_channel.sink.close();
_controller.dispose();
super.dispose();
}
void _sendMessage() {
final message = _controller.text;
_channel.sink.add(message);
_controller.clear();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter WebSocket Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Message',
),
maxLines: 4,
keyboardType: TextInputType.multiline,
),
SizedBox(height: 16),
ElevatedButton(
onPressed: _sendMessage,
child: Text('Send'),
),
SizedBox(height: 16),
Text(
'Response:',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Flexible(
child: SelectableText(
_response,
style: TextStyle(fontSize: 16),
maxLines: null,
),
),
],
),
),
);
}
@override
void initState() {
super.initState();
_channel.stream.listen(
(message) {
setState(() {
_response = jsonDecode(message) as String; // 假设服务器返回的是JSON格式的字符串
});
},
onError: (error) {
print('WebSocket error: $error');
},
onDone: () {
print('WebSocket connection closed');
},
);
}
}
代码说明
- 依赖安装:在
pubspec.yaml
中添加web_socket_channel
依赖。 - 建立WebSocket连接:在
_WebSocketPageState
中,使用WebSocketChannel.connect
方法连接到WebSocket服务器(在此示例中使用的是wss://echo.websocket.org
,这是一个公共的WebSocket回声服务器,它会返回你发送的任何消息)。 - 发送消息:通过
_channel.sink.add(message)
方法发送消息。 - 接收消息:通过监听
_channel.stream
来接收消息,并更新UI显示接收到的消息。 - 错误处理:在监听器中处理WebSocket错误和连接关闭事件。
请注意,这个示例假设服务器返回的是JSON格式的字符串,并使用jsonDecode
函数解析它。根据你的实际情况,你可能需要调整这部分代码。