Flutter实时通信插件flutter_socket_io的使用

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

Flutter实时通信插件flutter_socket_io的使用

Flutter Socket IO 插件支持 Android 和 iOS 平台（iOS 安装指南即将发布）。

如何在 iOS 上安装

  1. 将文件夹 example/ios/Runner/SocketObj 复制到 ${PROJECT_ROOT}/ios/Runner/。

  2. 替换 example/ios/Runner/AppDelegate.m 文件中的内容为 ${PROJECT_ROOT}/ios/Runner/AppDelegate.m。 （注意：如果你对这个文件进行了修改，你应该将旧版本与来自此插件的新版本合并）

  3. 打开 ${PROJECT_ROOT}/ios/Podfile 文件，在 target 'Runner' do 块之前添加以下行：

    pod 'Socket.IO-Client-Swift', '~> 13.3.0'

  4. 运行并享受插件带来的乐趣吧！

使用插件

1. 导入插件

在 Dart 代码中添加以下导入语句：

import 'package:flutter_socket_io/flutter_socket_io.dart';

2. SocketIOManager

用于管理（创建/销毁）SocketIO 列表。

创建 SocketIO

SocketIO socketIO = SocketIOManager().createSocketIO(
  "http://127.0.0.1:3000", // 服务器地址
  "/chat",                 // 命名空间
  query: "userId=21031",   // 查询参数
  socketStatusCallback: _socketStatus // 状态回调函数
);

销毁 SocketIO

SocketIOManager().destroySocket(socketIO);

3. SocketIO

获取 Socket 的 ID（URL + 命名空间）

String getId();

创建新的 Socket 并连接客户端

Future<void> connect();

初始化 Socket

在执行任何操作之前初始化 Socket：

Future<void> init();

订阅一个频道

Future<void> subscribe(String event, Function callback);

取消订阅

取消订阅某个频道。如果未提供回调函数，则取消该频道的所有订阅者；否则仅取消传递的回调函数：

Future<void> unSubscribe(String event, [Function callback]);

发送消息

通过频道发送消息（原生代码会将字符串消息转换为 JsonObject 后再发送）：

Future<void> sendMessage(String event, dynamic message, [Function callback]);

断开连接

断开与 Socket 的连接：

Future<void> disconnect();

取消所有频道的订阅

Future<void> unSubscribesAll();

4. 示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_socket_io/flutter_socket_io.dart';
import 'package:flutter_socket_io/socket_io_manager.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var mTextMessageController = new TextEditingController();
  SocketIO socketIO;
  SocketIO socketIO02;

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

  _connectSocket01() {
    // 更新你的域名后使用
    socketIO = SocketIOManager().createSocketIO(
        "http://127.0.0.1:3000", "/chat", query: "userId=21031", socketStatusCallback: _socketStatus);

    // 在做任何事情之前调用初始化方法
    socketIO.init();

    // 订阅事件
    socketIO.subscribe("socket_info", _onSocketInfo);

    // 连接 Socket
    socketIO.connect();
  }

  _connectSocket02() {
    socketIO02 = SocketIOManager().createSocketIO(
        "http://127.0.0.1:3000", "/map", query: "userId=21031", socketStatusCallback: _socketStatus02);

    // 在做任何事情之前调用初始化方法
    socketIO02.init();

    // 订阅事件
    socketIO02.subscribe("socket_info", _onSocketInfo02);

    // 连接 Socket
    socketIO02.connect();
  }

  _onSocketInfo(dynamic data) {
    print("Socket info: " + data);
  }

  _socketStatus(dynamic data) {
    print("Socket status: " + data);
  }

  _onSocketInfo02(dynamic data) {
    print("Socket 02 info: " + data);
  }

  _socketStatus02(dynamic data) {
    print("Socket 02 status: " + data);
  }

  _subscribes() {
    if (socketIO != null) {
      socketIO.subscribe("chat_direct", _onReceiveChatMessage);
    }
  }

  _unSubscribes() {
    if (socketIO != null) {
      socketIO.unSubscribe("chat_direct", _onReceiveChatMessage);
    }
  }

  _reconnectSocket() {
    if (socketIO == null) {
      _connectSocket01();
    } else {
      socketIO.connect();
    }
  }

  _disconnectSocket() {
    if (socketIO != null) {
      socketIO.disconnect();
    }
  }

  _destroySocket() {
    if (socketIO != null) {
      SocketIOManager().destroySocket(socketIO);
    }
  }

  void _sendChatMessage(String msg) async {
    if (socketIO != null) {
      String jsonData = '{"message":{"type":"Text","content": ${(msg != null && msg.isNotEmpty) ? '"${msg}"' : '"Hello SOCKET IO PLUGIN :))"'},"owner":"589f10b9bbcd694aa570988d","avatar":"img/avatar-default.png"},"sender":{"userId":"589f10b9bbcd694aa570988d","first":"Ha","last":"Test 2","location":{"lat":10.792273999999999,"long":106.6430356,"accuracy":38,"regionId":null,"vendor":"gps","verticalAccuracy":null},"name":"Ha Test 2"},"receivers":["587e1147744c6260e2d3a4af"],"conversationId":"589f116612aa254aa4fef79f","name":null,"isAnonymous":null}';
      socketIO.sendMessage("chat_direct", jsonData, _onReceiveChatMessage);
    }
  }

  void socketInfo(dynamic message) {
    print("Socket Info: " + message);
  }

  void _onReceiveChatMessage(dynamic message) {
    print("Message from UFO: " + message);
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _showToast() {
    _sendChatMessage(mTextMessageController.text);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              child: const Text('CONNECT SOCKET 01', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _connectSocket01,
            ),
            new RaisedButton(
              child: const Text('CONNECT SOCKET 02', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _connectSocket02,
            ),
            new RaisedButton(
              child: const Text('SEND MESSAGE', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _showToast,
            ),
            new RaisedButton(
              child: const Text('SUBSCRIBES', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _subscribes,
            ),
            new RaisedButton(
              child: const Text('UNSUBSCRIBES', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _unSubscribes,
            ),
            new RaisedButton(
              child: const Text('RECONNECT', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _reconnectSocket,
            ),
            new RaisedButton(
              child: const Text('DISCONNECT', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _disconnectSocket,
            ),
            new RaisedButton(
              child: const Text('DESTROY', style: TextStyle(color: Colors.white)),
              color: Theme.of(context).accentColor,
              elevation: 0.0,
              splashColor: Colors.blueGrey,
              onPressed: _destroySocket,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


flutter_socket_io 是一个用于在 Flutter 应用中实现实时通信的插件，它基于 Socket.IO 协议。Socket.IO 是一个基于事件的实时通信库，支持双向通信，适用于聊天应用、实时通知等场景。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_socket_io 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_socket_io: ^0.6.0

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

2. 初始化 Socket.IO 连接

在你的 Dart 文件中，导入 flutter_socket_io 并初始化 SocketIO 对象：

import 'package:flutter_socket_io/flutter_socket_io.dart';
import 'package:flutter_socket_io/socket_io_manager.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SocketIO socketIO;

  @override
  void initState() {
    super.initState();
    initSocket();
  }

  void initSocket() {
    socketIO = SocketIOManager().createSocketIO(
      'http://your-server-url', // 你的服务器地址
      '/', // 命名空间，默认为 '/'
    );

    socketIO.init();

    // 监听连接事件
    socketIO.onConnect((data) {
      print('Connected to server');
    });

    // 监听自定义事件
    socketIO.on('message', (data) {
      print('Received message: $data');
    });

    // 连接服务器
    socketIO.connect();
  }

  @override
  void dispose() {
    socketIO.disconnect();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Socket.IO'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 发送消息
              socketIO.sendMessage('message', 'Hello, Server!');
            },
            child: Text('Send Message'),
          ),
        ),
      ),
    );
  }
}

3. 发送和接收消息

在上面的代码中，我们通过 socketIO.sendMessage 方法向服务器发送消息，并通过 socketIO.on 方法监听服务器发送的消息。

4. 断开连接

在 dispose 方法中，我们调用 socketIO.disconnect() 来断开与服务器的连接。

5. 处理错误

你可以通过 socketIO.onError 方法来处理连接错误：

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

6. 其他事件

Socket.IO 还支持其他事件，如 disconnect、reconnect 等。你可以根据需要监听这些事件：

socketIO.onDisconnect((data) {
  print('Disconnected from server');
});

socketIO.onReconnect((data) {
  print('Reconnected to server');
});

7. 使用命名空间

如果你需要使用命名空间，可以在初始化 SocketIO 时指定：

socketIO = SocketIOManager().createSocketIO(
  'http://your-server-url',
  '/namespace', // 命名空间
);
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！