Flutter实时通信插件socketio_native的使用

Flutter实时通信插件socketio_native的使用

在本教程中，我们将展示如何在Flutter项目中使用socketio_native插件来实现实时通信。此插件允许我们在Flutter应用中通过原生平台使用Socket.IO。

开始使用

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

dependencies:
  socketio_native: ^版本号

然后运行flutter pub get以安装该依赖项。

Android配置

在AndroidManifest.xml文件中添加互联网权限，并设置android:usesCleartextTraffic="true"：

<application
    android:name=".Application"
    android:label="application_name"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">
    ...
</application>

iOS配置

当前版本的socketio_native不支持iOS平台。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中初始化Socket.IO客户端并处理连接事件。

import 'package:flutter/material.dart';
import 'package:logger/logger.dart';
import 'package:socketio_native/socketio_native.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final SocketIO socketIO;

  Logger log = Logger(printer: PrettyPrinter(methodCount: 1));

  [@override](/user/override)
  void initState() {
    super.initState();
    initSocket();
  }

  initSocket() async {
    try {
      Option option = Option();
      option.setTransport([SocketIoTransport.polling, SocketIoTransport.websocket]);
      option.setSecure(true);
      option.setTimeout(60000);
      option.setAuth({"api_key": "4Mz8zGuOPFNOi95QMhjjZ85XsQIZzXBQ5VLJY6VDuS26"});
      socketIO = await IO.create("http://192.168.88.6:3000", option: option);

      socketIO.onConnect((p0) {
        debugPrint("Connected>>>>");
        log.w({"CONNECTED": p0});
        socketIO.emit("message", {"data": "Hello"});
      });

      socketIO.onDisconnect((p0) => {
        log.w({"DISCONNECT": p0})
      });

      socketIO.onError((p0) => {
        log.e({"ERROR": p0})
      });

      socketIO.on("message", (p0) {
        log.w({"Message": p0});
        socketIO.emit("message_ack", "Ok", ack: (ok) {
          log.w({"MessageACK": ok});
        });
      });

      // await socketIO.connect(); // 如果需要手动连接，可以取消注释这行
    } catch (e) {
      log.e(e.toString());
    }
  }

  [@override](/user/override)
  void dispose() {
    socketIO.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: const Center(
          child: Text('Running ...'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            socketIO.emit("message", "message");
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

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

1 回复

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


socketio_native 是一个用于在 Flutter 应用中实现实时通信的插件，它基于 socket.io 协议。使用这个插件，你可以轻松地在 Flutter 应用中实现客户端与服务器之间的实时双向通信。

以下是如何在 Flutter 项目中使用 socketio_native 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  socketio_native: ^0.1.0 # 请检查最新版本

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

2. 导入插件

在你的 Dart 文件中导入 socketio_native 插件：

import 'package:socketio_native/socketio_native.dart';

3. 创建 Socket 实例

创建一个 SocketIO 实例，并连接到服务器：

SocketIO socket = SocketIO(
  'http://your-server-url', // 替换为你的服务器地址
  <String, dynamic>{
    'transports': ['websocket'],
    'autoConnect': true,
  },
);

4. 连接和断开连接

你可以手动连接或断开连接：

socket.connect(); // 手动连接
socket.disconnect(); // 手动断开连接

5. 监听事件

你可以监听服务器发送的事件：

socket.on('eventName', (data) {
  print('Received data: $data');
});

6. 发送事件

你可以向服务器发送事件：

socket.emit('eventName', {'key': 'value'});

7. 处理连接状态

你可以监听连接状态的变化：

socket.onConnect((_) {
  print('Connected to server');
});

socket.onDisconnect((_) {
  print('Disconnected from server');
});

8. 错误处理

你可以监听错误事件：

socket.onError((error) {
  print('Error: $error');
});

9. 断开连接和清理

在不再需要时，记得断开连接并清理资源：

socket.disconnect();

完整示例

以下是一个完整的示例，展示了如何使用 socketio_native 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SocketExample(),
    );
  }
}

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

class _SocketExampleState extends State<SocketExample> {
  late SocketIO socket;

  [@override](/user/override)
  void initState() {
    super.initState();
    socket = SocketIO(
      'http://your-server-url',
      <String, dynamic>{
        'transports': ['websocket'],
        'autoConnect': true,
      },
    );

    socket.onConnect((_) {
      print('Connected to server');
    });

    socket.onDisconnect((_) {
      print('Disconnected from server');
    });

    socket.onError((error) {
      print('Error: $error');
    });

    socket.on('eventName', (data) {
      print('Received data: $data');
    });

    socket.connect();
  }

  [@override](/user/override)
  void dispose() {
    socket.disconnect();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Socket.IO Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            socket.emit('eventName', {'key': 'value'});
          },
          child: Text('Send Event'),
        ),
      ),
    );
  }
}
回到顶部