Flutter网络通信插件flutter_socket的使用

Flutter网络通信插件flutter_socket的使用

flutter_socket 是一个用于在 Flutter 中连接 WebSocket 的插件。它基于 Android 的 Java-WebSocket:1.4.0 插件实现，支持多种功能，如连接、断开、发送消息、心跳检测等。

开始使用

首先，在项目中引入插件：

dependencies:
  flutter_socket: ^版本号

然后，创建一个工具类来管理 WebSocket 连接。

1. 连接

使用工具类 FlutterWebSocketUtil 来连接 WebSocket 服务器。

示例代码：

final util = FlutterWebSocketUtil();

// 连接 WebSocket
util.connect(
  url: "ws://your-websocket-server-url",
  onClose: (SocketConnectCloseModel detail) {
    print('是否远程地址:${detail.remote}');
    print('连接被断开code:${detail.code}');
    print('连接被断开:${detail.message}');
  },
  onMessage: (String message) {
    print('收到消息:$message');
  },
  onOpen: (String url) {
    print('连接成功,地址是:$url');
  },
  onError: (String message) {
    print('连接失败:$message');
  },
);

说明：

• url: 服务端的 WebSocket 地址。
• onClose: 连接被断开时的回调。
• onMessage: 接收到消息时的回调。
• onOpen: 连接成功时的回调。
• onError: 连接失败时的回调。

注意： 连接后会启动一个后台服务，通知栏可能会显示一个正在运行的通知。

2. 断开连接

通过调用 close() 方法断开连接。

示例代码：

util.close();

3. 开启心跳检测

为了保持连接活跃，可以开启心跳检测功能。

示例代码：

util.openHeart();

默认情况下，心跳检测每 30 秒触发一次。

4. 检测是否连接

可以通过静态方法 FlutterSocket.isOpen() 检查当前连接状态。

示例代码：

bool isConnected = FlutterSocket.isOpen();
print('是否已连接:$isConnected');

5. 发送消息

通过 send() 方法向服务器发送消息。

示例代码：

util.send("hello world");

工具类示例

以下是一个完整的工具类示例，封装了 WebSocket 的初始化和事件处理。

示例代码：

import 'package:flutter_socket/connect_close_model.dart';
import 'package:flutter_socket/flutter_socket_util.dart';

class WebSocketUtilsV3 {
  WebSocketUtilsV3._();

  static final WebSocketUtilsV3 _instance = WebSocketUtilsV3._();

  factory WebSocketUtilsV3() => _instance;

  final util = FlutterWebSocketUtil();

  // 初始化 WebSocket 连接
  Future<void> init() async {
    final _connectUrl = 'ws://your-websocket-server-url';
    util.connect(
      url: _connectUrl,
      onOpen: onOpen,
      onClose: onClose,
      onMessage: onMessage,
      onError: onError,
    );
  }

  // 连接成功回调
  void onOpen(String url) {
    print('连接成功啦;$url');
    util.openHeart(); // 开启心跳检测
  }

  // 连接关闭回调
  void onClose(SocketConnectCloseModel detail) {
    print('连接被断开啦:${detail.code}');
  }

  // 收到消息回调
  void onMessage(String message) {
    print('收到消息啦:$message');
  }

  // 连接失败回调
  void onError(String message) {
    print('连接错误啦:$message');
  }
}

运行示例

以下是运行示例的界面截图：

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_socket 插件。

示例代码：

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_socket/connect_close_model.dart';
import 'package:flutter_socket/flutter_socket.dart';
import 'package:flutter_socket/flutter_socket_util.dart';

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

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

class _MyAppState extends State<MyApp> {
  final String _url = 'ws://your-websocket-server-url';
  final util = FlutterWebSocketUtil();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('WebSocket 示例'),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              renderBtn("初始化连接", () {
                util.connect(
                  url: _url,
                  onClose: (SocketConnectCloseModel detail) {
                    print('是否远程地址:${detail.remote}');
                    print('连接被断开code:${detail.code}');
                    print('连接被断开:${detail.message}');
                  },
                  onMessage: (String message) {
                    print('收到消息:$message');
                  },
                  onOpen: (String url) {
                    print('连接成功,地址是:$url');
                  },
                  onError: (String message) {
                    print('连接失败:$message');
                  },
                );
              }),
              renderBtn("断开连接", util.close),
              renderBtn("开启心跳", util.openHeart),
              renderBtn("检测是否已经连接", FlutterSocket.isOpen),
              renderBtn("是否打开了GPS设置", () async {
                final isOpen = await FlutterSocket.gpsIsOpen();
                print('gps是否打开:$isOpen');
              }),
              renderBtn("打开gps设置页面", FlutterSocket.openGPSSystemPage),
            ],
          ),
        ),
      ),
    );
  }

  // 渲染按钮
  Widget renderBtn(String text, Function onTap) {
    return MaterialButton(
      color: Colors.blue,
      onPressed: onTap as VoidCallback,
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}