Flutter WebSocket管理插件websocket_manager的使用

Websocket Manager

一个支持Android和iOS的Flutter插件，用于WebSocket通信。该插件基于两个不同的原生库：iOS上的Starscream和Android上的okHttp。

该插件的创建是因为我们需要在后台保持WebSocket连接活跃，而Flutter官方文档中的WebSocket实现（Flutter Cookbook WebSocket）在屏幕锁定或应用进入后台时无法保持连接。

引言

Websocket Manager 并不直接在Dart代码中操作WebSocket，而是通过Platform Channel暴露Dart API，使得Flutter应用程序可以与两个强大的原生WebSocket库进行交互。因此，所有功劳归于这些原生库。

如何安装

Android

仅当服务器没有SSL/TLS时才需要此配置

从Android P版本开始，默认情况下http请求被禁用，并且有多种配置方式。一种配置方法是显式声明接受某些主机的明文流量。

1. 创建 res/xml/network_security_config.xml 文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">your_domain</domain>
    </domain-config>
</network-security-config>

1. 在 AndroidManifest.xml 中引用此文件（为测试环境添加此配置）：

<application
    android:networkSecurityConfig="@xml/network_security_config"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">
    <activity android:name="(...)">
</application>

iOS

无需任何配置。

示例

以下是一个完整的示例代码，展示了如何使用 websocket_manager 插件来管理WebSocket连接。

import 'package:flutter/material.dart';

import 'package:websocket_manager/websocket_manager.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 控制WebSocket URL输入框
  final TextEditingController _urlController =
      TextEditingController(text: 'wss://echo.websocket.org');

  // 控制发送消息的输入框
  final TextEditingController _messageController = TextEditingController();

  // WebSocket管理器实例
  WebsocketManager socket;

  // 接收的消息
  String _message = '';

  // 关闭消息
  String _closeMessage = '';

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Websocket Manager Example'),
        ),
        body: Column(
          children: <Widget>[
            // 输入WebSocket URL
            TextField(
              controller: _urlController,
            ),
            // 按钮组
            Wrap(
              children: <Widget>[
                // 配置WebSocket
                RaisedButton(
                  child: Text('CONFIG'),
                  onPressed: () => socket = WebsocketManager(_urlController.text),
                ),
                // 连接WebSocket
                RaisedButton(
                  child: Text('CONNECT'),
                  onPressed: () {
                    if (socket != null) {
                      socket.connect();
                    }
                  },
                ),
                // 断开WebSocket
                RaisedButton(
                  child: Text('CLOSE'),
                  onPressed: () {
                    if (socket != null) {
                      socket.close();
                    }
                  },
                ),
                // 监听消息
                RaisedButton(
                  child: Text('LISTEN MESSAGE'),
                  onPressed: () {
                    if (socket != null) {
                      socket.onMessage((dynamic message) {
                        print('New message: $message');
                        setState(() {
                          _message = message.toString();
                        });
                      });
                    }
                  },
                ),
                // 监听关闭事件
                RaisedButton(
                  child: Text('LISTEN DONE'),
                  onPressed: () {
                    if (socket != null) {
                      socket.onClose((dynamic message) {
                        print('Close message: $message');
                        setState(() {
                          _closeMessage = message.toString();
                        });
                      });
                    }
                  },
                ),
                // 测试Echo功能
                RaisedButton(
                  child: Text('ECHO TEST'),
                  onPressed: () => WebsocketManager.echoTest(),
                ),
              ],
            ),
            // 发送消息输入框
            TextField(
              controller: _messageController,
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (socket != null) {
                      socket.send(_messageController.text);
                    }
                  },
                ),
              ),
            ),
            // 显示接收的消息
            Text('Received message:'),
            Text(_message),
            // 显示关闭消息
            Text('Close message:'),
            Text(_closeMessage),
          ],
        ),
      ),
    );
  }
}