Flutter WebSocket管理插件flutter_websocket_manager的使用

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

FlutterWebSocketManager

FlutterWebSocketManager 是一个简单且灵活的 Flutter 包，用于管理 WebSocket 连接。它帮助你轻松处理 WebSocket 连接、消息、错误和连接状态。

特性

  • 使用自定义头部和查询参数连接到 WebSocket 服务器。
  • 发送和接收 WebSocket 消息。
  • 处理连接状态（已连接、已断开等）。
  • 优雅地处理错误和断开连接。
  • 设置消息处理和错误处理的回调函数。

安装

要安装此包，请在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  flutter_websocket_manager: ^0.0.1

然后运行：

flutter pub get

使用

创建 WebSocket 连接

import 'package:flutter_websocket_manager/flutter_websocket_manager.dart';

void main() {
  // 创建一个 FlutterWebSocketManager 实例，可选的头部和查询参数
  final wsManager = FlutterWebSocketManager(
    "wss://example.com/ws",
    queryParameters: {
      'token': '12345',  // 你可以在这里添加查询参数
    },
    headers: {
      'Authorization': 'Bearer your_access_token',  // 你可以在这里添加自定义头部
    },
  );

  // 连接到 WebSocket
  wsManager.connect();

  // 设置接收消息的回调
  wsManager.onMessage((message) {
    print("Received message: $message");
  });

  // 设置处理错误的回调
  wsManager.onError((error) {
    print("Error: $error");
  });

  // 发送文本消息
  wsManager.sendMessage("Hello, server!");

  // 发送数据消息（JSON）
  wsManager.sendDataMessage({'type': 'ping'});

  // 获取当前连接状态
  switch (wsManager.state) {
    case SocketConnectionState.connected:
      print("WebSocket is connected.");
      break;
    case SocketConnectionState.disconnected:
      print("WebSocket is disconnected.");
      break;
    case SocketConnectionState.none:
      print("WebSocket connection state is none.");
      break;
  }

  // 断开连接
  wsManager.disconnect();
}

添加 queryParameters 和 headers

你可以在创建 FlutterWebSocketManager 实例时传递 queryParameters 和 headers：

  • queryParameters: 以 Map 形式传递查询参数，这些参数将被添加到 WebSocket URL 中。
  • headers: 可以添加自定义头部，例如 “Authorization”。
final wsManager = FlutterWebSocketManager(
  "wss://example.com/ws",
  queryParameters: {
    'orderId': '2631',  // 按需添加查询参数
  },
  headers: {
    'Authorization': 'Bearer your_token_here',  // 添加自定义头部
    'Custom-Header': 'CustomValue',
  },
);

实际示例

import 'package:flutter_websocket_manager/flutter_websocket_manager.dart';

void main() {
  final wsManager = FlutterWebSocketManager(
    "wss://example.com/ws",
    queryParameters: {'orderId': '2631'}, // 查询参数
    headers: {'Authorization': 'Bearer token'}, // 自定义头部
  );

  // 连接到 WebSocket
  wsManager.connect();

  wsManager.onConnect((msg) {
    print(msg);
  });

  // 监听消息
  wsManager.onMessage((message) {
    print("Received message: $message");
  });

  wsManager.onDone((msg) {
    print(msg);
  });

  // 处理错误
  wsManager.onError((error) {
    print("Error: $error");
  });

  // 发送文本消息
  wsManager.sendMessage("Hello WebSocket");

  // 发送数据消息（JSON）
  wsManager.sendDataMessage({'action': 'ping'});

  // 断开连接
  wsManager.disconnect();
}

以上是一个完整的示例，展示了如何使用 FlutterWebSocketManager 包来管理 WebSocket 连接。希望这对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_websocket_manager 插件在 Flutter 应用中管理 WebSocket 连接的代码示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_websocket_manager 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_websocket_manager: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以按照以下步骤在你的 Flutter 应用中使用 flutter_websocket_manager：

  1. 初始化 WebSocket 连接
import 'package:flutter/material.dart';
import 'package:flutter_websocket_manager/flutter_websocket_manager.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WebSocketManager? _webSocketManager;

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

  void initWebSocket() {
    var url = "wss://your-websocket-url.com";  // 替换为你的 WebSocket URL
    _webSocketManager = WebSocketManager(url);

    _webSocketManager!.connect();

    _webSocketManager!.onMessageReceived.listen((message) {
      print("Received message: $message");
    });

    _webSocketManager!.onError.listen((error) {
      print("WebSocket error: $error");
    });

    _webSocketManager!.onClose.listen((closeCode, closeReason) {
      print("WebSocket closed with code: $closeCode and reason: $closeReason");
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebSocket Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              if (_webSocketManager!.isConnected) {
                _webSocketManager!.sendMessage("Hello WebSocket!");
              } else {
                print("WebSocket is not connected");
              }
            },
            child: Text('Send Message'),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _webSocketManager?.close();
    super.dispose();
  }
}
  1. 发送消息和处理接收到的消息

在上面的代码中，我们已经在 initWebSocket 方法中初始化了 WebSocket 连接，并设置了消息接收、错误和关闭的监听器。在按钮点击事件中，我们检查 WebSocket 是否已连接，如果已连接，则发送消息。

  1. 处理 WebSocket 关闭

在 dispose 方法中，我们确保在组件销毁时关闭 WebSocket 连接，以避免内存泄漏。

这个示例展示了如何使用 flutter_websocket_manager 插件在 Flutter 应用中管理 WebSocket 连接，包括初始化连接、发送消息和处理接收到的消息。根据你的需求，你可以进一步扩展这个示例，比如添加更多的错误处理、重连逻辑等。

回到顶部