Flutter重生/恢复状态插件 phoenix_wings 的使用

phoenix_wings 是一个用于 Dart 的 Phoenix Channel 实现，旨在匹配 JavaScript 实现的功能。本文将详细介绍如何在 Flutter 中使用该插件。

1. 安装和导入

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  phoenix_wings: ^x.x.x  # 使用最新版本号替换 x.x.x

然后运行 flutter pub get 来安装依赖。

导入和连接 (VM/Flutter)

在 Dart 文件中导入包：

import 'package:phoenix_wings/phoenix_wings.dart';

创建一个新的 WebSocket 连接：

final socket = PhoenixSocket("ws://localhost:4000/socket/websocket");

你还可以传递参数进行身份验证：

final socket = PhoenixSocket(
  "ws://localhost:4000/socket/websocket",
  socketOptions: PhoenixSocketOptions(params: {"user_token": 'your_user_token'}),
);

可选参数

• timeout: 等待响应的时间（毫秒）。默认值为 10000。
• heartbeatIntervalMs: 心跳间隔时间（毫秒）。默认值为 30000。
• reconnectAfterMs: 重新连接尝试之间的间隔时间（毫秒）列表。
• params: 连接到 Phoenix 后端时发送的参数。

2. 常用操作

连接到服务器：

await socket.connect();

创建并加入一个频道：

final chatChannel = socket.channel("room:chat", {"id": "myId"});

// 监听特定事件
chatChannel.on("user_entered", (Map payload, String ref, String joinRef) {
  print(payload);  // 打印接收到的消息
});

// 加入频道
chatChannel.join();

3. 示例 Demo

下面是一个完整的 Flutter 示例应用，展示了如何与 Phoenix Channels 进行通信。

3.1 设置 Phoenix Server

确保你已经有一个运行中的 Phoenix 服务器，并且它监听 WebSocket 请求。假设服务器地址是 ws://10.0.0.2:4000/socket/websocket。

3.2 Flutter 应用示例

import 'package:flutter/material.dart';
import 'package:phoenix_wings/phoenix_wings.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Phoenix Wings Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PhoenixSocket _socket = PhoenixSocket("ws://10.0.0.2:4000/socket/websocket");

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

  void connectToServer() async {
    await _socket.connect();

    final chatChannel = _socket.channel("room:chat", {"id": "myId"});

    // 监听用户进入事件
    chatChannel.on("user_entered", (Map payload, String ref, String joinRef) {
      setState(() {
        print("User entered with payload: $payload");
      });
    });

    // 加入频道
    chatChannel.join().then((_) {
      print("Joined channel successfully!");
    }).catchError((error) {
      print("Failed to join channel: $error");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phoenix Channels Example'),
      ),
      body: Center(
        child: Text('Check the console for messages!'),
      ),
    );
  }
}

3.3 配置代理（仅限模拟器）

如果你在 Android 模拟器上运行应用，请确保配置正确的 IP 地址和端口。可以通过以下命令检查你的 IP 地址：

ifconfig

假设你的 IP 地址是 10.0.0.2，那么你应该将 Flutter 应用中的 WebSocket URL 修改为：

final socket = PhoenixSocket("ws://10.0.0.2:4000/socket/websocket");

4. 测试

大部分测试可以在 VM 上运行，但 PhoenixHtmlConnection 测试需要在浏览器中运行。你可以通过以下命令运行测试：

pub run test