Flutter WebSocket通信插件ws的使用

发布于 1周前 作者 ionicwang 来自 Flutter

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%测试覆盖率
  • ✅ 连接/重连后的第一条消息
  • ✅ 拦截器(中间件)

更多资源

许可证

MIT License

标签

web, socket, ws, wss, WebSocket, cross, platform

希望以上内容能帮助你更好地理解和使用 ws 插件进行WebSocket通信。如果有任何问题,欢迎随时提问!


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

1 回复

更多关于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'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明:

  1. 依赖添加:在pubspec.yaml中添加web_socket_channel依赖。
  2. WebSocket连接:在initWebSocket方法中,使用WebSocketChannel.connect方法连接到WebSocket服务器。这里使用的是wss://echo.websocket.org,一个公共的回声WebSocket服务器,你可以替换为你的WebSocket服务器URL。
  3. 消息监听:通过_channel!.stream.listen方法监听来自服务器的消息,并更新UI。
  4. 发送消息:通过_channel!.sink.add方法发送消息到服务器。
  5. 资源管理:在dispose方法中释放资源,关闭WebSocket连接和文本控制器。

这个示例展示了基本的WebSocket通信功能,包括连接、监听消息、发送消息和资源管理。你可以根据需要扩展这个示例,添加更多的功能或处理更复杂的业务逻辑。

回到顶部