Flutter网络通信插件client_server_sockets的使用

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

Flutter网络通信插件client_server_sockets的使用

这是一个简单的客户端-服务器套接字包,它使用了Socket和ServerSocket类。

使用方法

启动服务器:

// 启动服务器实例
Server.instance.start();

通过地址连接客户端到服务器:

// 连接到指定IP地址的服务器
Client.instance.connect("192.168.1.10");

发送消息到服务器:

// 从客户端发送消息到服务器
Client.instance.send("Hello World!");

广播消息给所有客户端:

// 服务器向所有客户端广播消息
Server.instance.broadcast("Broadcasted message");

为了从一个客户端发送消息到另一个客户端,可以使用Payload类配合服务器上的sendTo()函数。更多详细信息请查看示例代码。

示例代码

以下是完整的示例代码,展示了如何使用这个插件来实现基本的客户端-服务器通信。

import 'dart:io';

import 'package:client_server_sockets/client_server_sockets.dart';

void main(List<String> args) {
  // 检查是否传入参数
  if (args.isEmpty) {
    print("No args passed");
    print("Usage:");
    print("Server: dart example/main.dart s");
    print("Client: dart example/main.dart c");
    print("Client with prompt: dart example/main.dart cp");
    return;
  }
  
  // 根据传入参数选择运行模式
  if (args.first == "s") _server();
  if (args.first == "c") _client();
  if (args.first == "cp") _client(true);
}

// 服务器端逻辑
void _server() async {
  final started = await Server.instance.start(
    onServerError: (error) {
      // 处理服务器错误
      print("Server error: $error");
    },
    onNewClient: (client) {
      // 新客户端连接时触发
      print("New client: ${client.remotePort}");
    },
    onClientData: (client, data) {
      // 接收到客户端数据时触发
      Payload payload = Payload.fromJson(data);
      print("Message from client ${client.remotePort}: $payload");
      // 将消息转发到指定端口的客户端
      Server.instance.sendTo(payload.port, payload.data);
    },
    onClientError: (client, error) {
      // 处理客户端错误
      print("Error from client ${client.remotePort}: $error");
    },
    onClientLeft: (client) {
      // 客户端离开时触发
      print("Client ${client.remotePort} left");
    },
  );

  if (!started) {
    print("Couldn't start server");
    return;
  }

  print("server running on ${Server.instance.port}");

  // 延迟30秒后广播消息
  Future.delayed(Duration(seconds: 30), () {
    String? message;
    do {
      print("Enter message to broadcast:");
      message = stdin.readLineSync();
    } while (message == null || message.isEmpty);

    Server.instance.broadcast(message);
  });
}

// 客户端逻辑
void _client([bool prompt = false]) async {
  final connected = await Client.instance.connect(
    "192.168.1.10", // 替换为你的服务器IP地址
    onClientError: (error) {
      // 处理客户端错误
      print("Client error: $error");
    },
    onServerData: (data) {
      // 接收到服务器数据时触发
      print("Message from sever: $data");
    },
    onServerError: (error) {
      // 处理服务器错误
      print("Error from server: $error");
    },
    onServerStopped: () {
      // 服务器停止时触发
      print("Server stopped");
    },
  );

  if (!connected) {
    print("Couldn't connect to server");
    return;
  }

  print("Connected to ${Client.instance.remotePort} from ${Client.instance.port}");

  if (prompt) _prompts();
}

// 客户端提示输入
void _prompts() {
  Future.delayed(Duration(seconds: 10), () {
    String? port;
    do {
      print("Enter client port you wish to send a message to:");
      port = stdin.readLineSync();
    } while (port == null || port.isEmpty);

    String? message;
    do {
      print("Enter message to send to client 2:");
      message = stdin.readLineSync();
    } while (message == null || message.isEmpty);

    // 创建Payload对象并发送消息
    Payload payload = Payload(port: int.parse(port), data: message);

    Client.instance.send(payload.toJson());
  });
}

更多关于Flutter网络通信插件client_server_sockets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络通信插件client_server_sockets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的网络通信插件 client_server_sockets 的使用,这里提供一个简单的示例代码,展示如何在Flutter应用中实现客户端与服务器之间的Socket通信。

首先,确保你已经在你的 pubspec.yaml 文件中添加了 client_server_sockets 依赖:

dependencies:
  flutter:
    sdk: flutter
  client_server_sockets: ^x.y.z  # 替换为最新版本号

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

以下是一个简单的示例,展示如何使用 client_server_sockets 插件:

服务器端(假设使用Dart编写一个简单的TCP服务器)

虽然 client_server_sockets 主要用于客户端,但这里提供一个简单的Dart TCP服务器代码以便测试:

// server.dart
import 'dart:io';

void main() async {
  final server = await ServerSocket.bind(InternetAddress.anyIPv4, 4040);
  print('Server listening on port ${server.port}');

  server.listen((Socket socket) {
    print('New client connected: ${socket.remoteAddress}:${socket.remotePort}');
    socket.listen((List<int> data) {
      String message = String.fromCharCodes(data);
      print('Received: $message');
      socket.write('Echo: $message');
    });

    socket.onDone.listen(() {
      print('Client disconnected: ${socket.remoteAddress}:${socket.remotePort}');
      socket.close();
    });

    socket.onError.listen((error, stackTrace) {
      print('Error: $error');
      socket.close();
    });
  });
}

运行这个服务器代码,它将监听本地4040端口。

客户端(Flutter应用)

接下来,在你的Flutter应用中实现客户端代码:

// main.dart
import 'package:flutter/material.dart';
import 'package:client_server_sockets/client_server_sockets.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SocketClientDemo(),
    );
  }
}

class SocketClientDemo extends StatefulWidget {
  @override
  _SocketClientDemoState createState() => _SocketClientDemoState();
}

class _SocketClientDemoState extends State<SocketClientDemo> {
  TextEditingController _controller = TextEditingController();
  String _response = '';

  void _connectAndSendMessage() async {
    try {
      var socket = await Socket.connect('localhost', 4040);
      socket.write(_controller.text);
      socket.listen((List<int> data) {
        setState(() {
          _response = String.fromCharCodes(data);
        });
      });
      socket.close();
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket Client Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Message',
              ),
              maxLines: 4,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _connectAndSendMessage,
              child: Text('Send Message'),
            ),
            SizedBox(height: 16),
            Text('Server Response: $_response'),
          ],
        ),
      ),
    );
  }
}

运行应用

  1. 启动你的Dart TCP服务器:

    dart server.dart
    
  2. 运行你的Flutter应用。在模拟器或真机上输入消息并点击“Send Message”按钮,你应该会看到服务器响应的消息显示在Flutter应用的界面上。

这个示例展示了如何使用 client_server_sockets 插件在Flutter应用中实现基本的Socket通信。当然,在实际应用中,你可能需要处理更多的边缘情况和错误处理逻辑。

回到顶部