Flutter实时通信插件fennec_socket_io_server的使用

Flutter实时通信插件fennec_socket_io_server的使用

fennec_socket_io_server 是一个用于实现服务器端Socket.IO的Dart插件。它属于Fennec框架，但也可以单独使用。

安装

安装该插件可以通过以下命令：

dependencies:
  fennec_socket_io_server: ^版本号

示例：使用自有HTTP服务器

以下是一个简单的示例，展示了如何使用fennec_socket_io_server与自己的HTTP服务器结合。

import 'dart:async';
import 'dart:io';

import 'package:fennec_socket_io_server/server_io.dart';

void main() async {
  // 初始化ServerIO实例
  ServerIO serverIO1 = ServerIO();
  
  // 监听客户端连接事件
  serverIO1.on('connection', (client) {
    print('connection');
    // 向客户端发送消息
    serverIO1.emit('fromServer', 'ok');
  });

  // 监听指定地址和端口
  await serverIO1.listen('0.0.0.0', 3000);
}

示例：使用Fennec HTTP服务器

以下是一个更复杂的示例，展示了如何将fennec_socket_io_server与Fennec HTTP服务器结合使用。

import 'dart:async';
import 'dart:io';

import 'package:fennec/fennec.dart';
import 'package:fennec_socket_io_server/server_io.dart';

void main() async {
  // 初始化Fennec应用
  Application application = Application();
  ServerIO serverIO = ServerIO();
  ServerIO serverIO1 = ServerIO();

  // 设置应用监听的端口和地址
  application.setPort(8000).setHost(InternetAddress.loopbackIPv4);

  // 处理动态路由请求
  application.get(
    path: '/dynamic_routes/@userId',
    requestHandler: (context, req, res) {
      // 发送时间戳到客户端
      serverIO.emit('fromServer', DateTime.now().toIso8601String());
      return res.ok(body: {'userId': req.pathParams['userId']}).json();
    },
    middlewares: [],
  );

  // 初始化路由器
  Router testRouter = Router(routerPath: '/v1/api');

  // 添加GET路由处理程序
  testRouter.get(
    path: '/simple',
    requestHandler: TestController().test,
    middlewares: [],
  );

  testRouter.get(
    path: '/simple1',
    requestHandler: (ServerContext context, Request req, Response res) {
      // 发送消息到客户端
      for (var i = 0; i < 7; i++) {
        serverIO.emit('message', 'hello fennec');
      }
      serverIO1.emit('message', 'hello fennec');
      return res.ok(body: 'ss');
    },
  );

  // 启用WebSocket支持
  application.useWebSocket(true);

  // 添加路由器
  application.addRouter(testRouter);

  // 处理WebSocket连接
  application.socketIO(socketIOHandler: (context, ws) {
    streamController.sink.add(ws);
  });

  // 监听HTTP服务器上的WebSocket连接
  await serverIO.listenToHttpServer(streamController);

  // 启动应用
  await application.runServer();

  // 监听独立的Socket.IO服务器
  serverIO1.on('connection', (client) {
    print('connection');
    serverIO1.emit('fromServer', 'ok');
  });

  // 监听指定地址和端口
  await serverIO1.listen('0.0.0.0', 3000);
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用fennec_socket_io_server插件来实现实时通信的示例代码。这个插件允许你在Flutter应用中创建一个Socket.IO服务器，并处理客户端的连接、消息传递等。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  fennec_socket_io_server: ^最新版本号 # 请替换为最新的版本号

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

2. 初始化Socket.IO服务器

接下来，在你的Flutter应用中初始化Socket.IO服务器。通常，你会在一个Dart文件中完成这个初始化过程，比如在lib/server.dart文件中。

import 'package:fennec_socket_io_server/fennec_socket_io_server.dart';
import 'dart:io';

void main() async {
  // 创建HTTP服务器
  HttpServer server = await HttpServer.bind(InternetAddress.anyIPv4, 4000);
  print('HTTP server is listening on port 4000');

  // 创建Socket.IO服务器
  IOServer ioServer = IOServer(server);

  // 监听连接事件
  ioServer.on('connection', (socket) {
    print('Client connected');

    // 监听客户端发送的消息
    socket.on('message', (data) {
      print('Received message: $data');
      
      // 发送消息给客户端
      socket.emit('message', 'Server response: $data');
    });

    // 监听断开连接事件
    socket.on('disconnect', () {
      print('Client disconnected');
    });
  });

  // 保持服务器运行
  await for (HttpRequest req in server) {
    // 通常这里不需要处理请求，因为Socket.IO会接管
  }
}

3. 在Flutter客户端连接Socket.IO服务器

在你的Flutter客户端应用中，你可以使用socket_io_client包来连接上面创建的Socket.IO服务器。首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^最新版本号 # 请替换为最新的版本号

然后，在客户端代码中连接到服务器：

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

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

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

class _MyAppState extends State<MyApp> {
  IO.Socket socket;

  @override
  void initState() {
    super.initState();
    // 连接到Socket.IO服务器
    socket = IO.io('http://localhost:4000', <String, dynamic>{
      'transports': ['websocket'],
    });

    // 监听服务器发送的消息
    socket.on('message', (data) {
      print('Received from server: $data');
    });

    // 连接成功后发送消息
    socket.onConnect((_) {
      print('Connected to server');
      socket.emit('message', 'Hello from client');
    });

    // 监听断开连接事件
    socket.onDisconnect((_) {
      print('Disconnected from server');
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Socket.IO Client'),
        ),
        body: Center(
          child: Text('Check console for logs'),
        ),
      ),
    );
  }
}

注意事项

  1. 端口号：确保HTTP服务器和Socket.IO服务器使用的端口号（在这个例子中是4000）没有被其他应用占用。
  2. 跨平台问题：fennec_socket_io_server主要用于服务器端逻辑，而Flutter主要用于客户端。在实际开发中，你可能需要在后端使用Node.js或其他服务器端语言来运行Socket.IO服务器，然后从Flutter客户端连接它。
  3. 调试：使用控制台日志来调试连接和消息传递。

这个示例展示了如何在Flutter项目中初始化和使用fennec_socket_io_server插件来实现实时通信。希望这对你有所帮助！

回到顶部