搜索插件、代码仓与 APP 分类

插件详情v1.0.2

phoenix_wings

Phoenix Channel 客户端 for Dart

AndroidiOSmacOSWindowsLinux
近 30 天下载
478
喜欢数
13
Pub 分数
115

安装插件

flutter pub add phoenix_wings

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Phoenix Wings 是一个 Dart 客户端,用于 Phoenix Channels,可在 Flutter 应用中实现实时通信。它提供了一个简洁、响应式的接口,用于连接 Phoenix 服务器、管理频道并接收实时事件。专为与 Flutter 的状态管理无缝集成而设计,支持消息广播、在线状态跟踪以及强大的重连逻辑。非常适合构建聊天应用、实时仪表板和需要低延迟更新的协作工具。

适合场景

  • 实时聊天应用
  • 实时数据仪表板
  • 协作编辑工具
  • 存在检测
  • 事件驱动的UI更新

主要特点

  • 反应式通道订阅
  • 自动重连
  • 消息广播
  • 存在性跟踪
  • 清理Dart API

适合对象

  • Flutter 开发人员构建实时功能
  • 需要双向通信的应用程序
  • 使用 Phoenix Server 后端的项目

使用建议

  • 需要一个 Phoenix Server 实例
  • 限制为基于 WebSocket 的通信
  • 可能需要额外的错误处理来应对特殊情况

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Pub

phoenix_wings.dart

A Phoenix Channel implementation for Dart

Attempts to feature match the Javascript implementation found at phoenix.js

Usage

API Documentation

Much of the library is the same whether your code is running in the VM/Flutter or in a browser. Due to differences between the two platforms, the connection setup differs slightly.

Import & Connection (VM/Flutter)
import 'package:phoenix_wings/phoenix_wings.dart';


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

// equivalent to passing connectionProvider: PhoenixIoConnection.provider

// you can also pass params on connection if you for example want to authenticate using a user token like
final socket = PhoenixSocket("ws://localhost:4000/socket/websocket", socketOptions: PhoenixSocketOptions(params: {"user_token":  'user token here'}, ));

Options that can be passed on connection include :-

  • timeout - How long to wait for a response in miliseconds. Default 10000
  • heartbeatIntervalMs - How many milliseconds between heartbeats. Default 30000
  • reconnectAfterMs - Optional list of milliseconds between reconnect attempts
  • params - Parameters sent to your Phoenix backend on connection.
Import & Connection (HTML)
import 'package:phoenix_wings/html.dart';


final socket = new PhoenixSocket("ws://localhost:4000/socket/websocket", connectionProvider: PhoenixHtmlConnection.provider);

Common Usage
await socket.connect();

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

chatChannel.on("user_entered", PhoenixMessageCallback (Map payload, String _ref, String, _joinRef) {
    print(payload);
});

chatChannel.join();
Examples

Mobile - when running the flutter example in your emulator, with the server also running in the same computer host, remember that the emulator is running in a segregated VM, so you need to configure it to point your server that is running on the host machine.


# check your IP configuration
$ ifconfig
enp0s20u5c4i2: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
inet 10.0.0.2  netmask 255.255.255.240  broadcast 172.20.10.15
  1. After checking your IP, go to your flutter Settings -> Proxy, and add the proxy host configuration with your IP, and port where your phoenix server with the websockets is listening.

  2. Configure your flutter app to point to your phoenix websocket server.

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

See here for an illustrated example.

Server - phoenix server with a channel that will communicate with the flutter app above.

Console - if you want to debug the websockets direclty, without phoenix_wings, using the phoenix protocol. See here for more info about the json protocol. You will have a lot of fun, connecting, and seeing the loop in this console app sending messages to your flutter app. To run, simply:

dart console.dart

Testing

Most of the tests are run on the VM. However, the PhoenixHtmlConnection tests must run in a browser.

By default tests will run on VM, Chrome and Firefox. This is set in dart_test.yaml

Tests are run via pub run test

所属分类

源码仓库

使用此插件的项目

暂无相关数据。