Flutter客户端通信插件polo_client的使用

Polo: WebSocket库

WebSocket 库。纯 Dart 编写的简单 API，用于编写基于 WebSocket 的应用程序或游戏，同时支持 Flutter 和 Web。

包列表

名称	链接	语言/运行时
polo_server		Dart
polo_client		Dart
polo_client_ts		Deno (TypeScript)

特性

• 多平台
  • Android, iOS, Windows, Linux, macOS, Web。
• 类型化事件
  • 参考 PoloType 和 PoloTypeAdapter。
• 多种编程语言官方支持
  • Dart, TypeScript。
• 易于使用的 API

入门指南

基本聊天应用

服务器代码（Dart）

// Polo Server
PoloServer server = await Polo.createServer();

server.onClientConnect((client) {
  print("Client(${client.id}) Connected!");

  client.onEvent<String>('message',
      (message) => server.broadcastFrom<String>(client, 'message', message));
});

server.onClientDisconnect((client) {
  print("Client(${client.id}) Disconnected!");
});

客户端代码（Dart）

// Polo Client
PoloClient client = await Polo.connect("ws://127.0.0.1:3000/");

client.onConnect(() {
  print("Client Connected to Server");
});

client.onDisconnect(() {
  print("Client Disconnected from Server");
});

client.onEvent<String>('message', (message) {
  print("$message");
});

client.listen();

客户端代码（TypeScript）

// Polo Client
const client: PoloClient = await Polo.connect("ws://127.0.0.1:3000/");

client.onConnect(() => {
  console.log("Client Connected to Server");
});

client.onDisconnect(() => {
  console.log("Client Disconnected from Server");
});

client.onEvent<string>("message", (message) => {
  console.log(`${message}`);
});

client.listen();

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 中使用 polo_client 插件。

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

class UserType implements PoloType {
  final String name;
  final int age;

  UserType({required this.name, required this.age});

  [@override](/user/override)
  factory UserType.fromMap(Map<String, dynamic> map) {
    return UserType(name: map['name'], age: map['age']);
  }

  [@override](/user/override)
  Map<String, dynamic> toMap() {
    return {'name': name, 'age': age};
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Polo Client Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // Polo Client
              PoloClient client = await Polo.connect("ws://127.0.0.1:3000/");

              client.registerType(
                PoloTypeAdapter<UserType>(
                  toMap: ((type) => type.toMap()),
                  fromMap: (map) => UserType.fromMap(map),
                ),
              );

              client.onConnect(() {
                print("Client Connected to Server");

                client.send('dynamic', "Ayush");
                client.send('dynamic', 1);
                client.send('dynamic', 3.14);
                client.send('dynamic', true);
                client.send('dynamic', [1, 2, 3]);
                client.send('dynamic', null);
                client.send('dynamic', {
                  "String": {"dynamic": true}
                });
                client.send<String>('message', "Hello from Client");
                client.send<UserType>('userJoined', UserType(name: "Ayush", age: 22));
              });

              client.onEvent('dynamic', (dyn) {
                print("Dynamic: $dyn : ${dyn.runtimeType}");
              });

              client.onEvent<String>('message', (message) {
                print("Message: $message : ${message.runtimeType}");
              });

              client.onEvent<UserType>('userJoined', (user) {
                print("userJoined : ${user.toMap()} : ${user.runtimeType}");
              });

              client.onDisconnect(() {
                print("Client Disconnected from Server");
              });

              client.listen();
            },
            child: Text('Connect to Server'),
          ),
        ),
      ),
    );
  }
}