Flutter实时通信插件socket_io的使用

简介

socket.io-dart 是一个在Dart中实现的Socket.IO库，它移植了JavaScript Node.js库 Socket.io v2.0.1。这个库允许你在Dart应用中实现实时双向通信。

使用方法

服务器端

首先，你需要在服务器端设置一个Socket.IO服务器。以下是一个简单的示例：

import 'package:socket_io/socket_io.dart';

void main() {
  var io = Server();
  var nsp = io.of('/some');
  
  nsp.on('connection', (client) {
    print('connection /some');
    client.on('msg', (data) {
      print('data from /some => $data');
      client.emit('fromServer', "ok 2");
    });
  });

  io.on('connection', (client) {
    print('connection default namespace');
    client.on('msg', (data) {
      print('data from default => $data');
      client.emit('fromServer', "ok");
    });
  });

  io.listen(3000);
}

客户端

JavaScript客户端

如果你有一个JavaScript客户端，可以使用以下代码连接到服务器：

// JS client
var socket = io('http://localhost:3000');
socket.on('connect', function() {
  console.log('connect');
});
socket.on('event', function(data) {
  console.log(data);
});
socket.on('disconnect', function() {
  console.log('disconnect');
});
socket.on('fromServer', function(e) {
  console.log(e);
});

Dart客户端

在Flutter应用中，你可以使用 socket_io_client 包来连接到服务器：

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

void main() {
  IO.Socket socket = IO.io('http://localhost:3000');

  socket.on('connect', (_) {
    print('connect');
    socket.emit('msg', 'test');
  });

  socket.on('event', (data) {
    print(data);
  });

  socket.on('disconnect', (_) {
    print('disconnect');
  });

  socket.on('fromServer', (_) {
    print(_);
  });
}

多路复用支持

与Socket.IO一样，这个项目允许你创建多个命名空间（Namespaces），这些命名空间将作为独立的通信通道，但共享同一个底层连接。

房间支持

在每个命名空间内，你可以定义任意的频道（Rooms），客户端可以加入和离开这些频道。你可以向任何给定的房间广播消息，达到所有已加入该房间的客户端。

传输支持

socket.io-dart 支持以下传输方式：

• polling: XHR / JSONP 轮询传输。
• websocket: WebSocket 传输。

适配器支持

默认情况下，socket.io-dart 使用内存中的适配器类。更多详情请参阅 socket.io-adapter。

示例项目

以下是一个完整的示例项目，展示了如何在Flutter应用中使用 socket_io_client 进行实时通信。

服务器端代码

import 'package:socket_io/socket_io.dart';

void main() {
  var io = Server();

  io.on('connection', (client) {
    print('New client connected: ${client.id}');
    
    client.on('msg', (data) {
      print('Received message: $data');
      client.emit('fromServer', 'Message received: $data');
    });

    client.on('disconnect', (_) {
      print('Client disconnected: ${client.id}');
    });
  });

  io.listen(3000);
  print('Server running on port 3000');
}

客户端代码（Flutter应用）

1. 在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^2.0.0

1. 创建一个简单的Flutter应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Socket.IO Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Socket.IO Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late IO.Socket socket;
  List<String> messages = [];

  @override
  void initState() {
    super.initState();
    socket = IO.io('http://localhost:3000', <String, dynamic>{
      'transports': ['websocket'],
    });

    socket.on('connect', (_) {
      print('Connected to server');
    });

    socket.on('fromServer', (data) {
      setState(() {
        messages.add(data);
      });
    });

    socket.on('disconnect', (_) {
      print('Disconnected from server');
    });
  }

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

  void sendMessage(String message) {
    socket.emit('msg', message);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    onSubmitted: (value) {
                      sendMessage(value);
                    },
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    sendMessage('Hello from Flutter');
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

运行项目

1. 启动服务器端代码。
2. 在Flutter项目中运行客户端代码。

通过以上步骤，你可以在Flutter应用中实现与服务器的实时通信。希望这个示例对你有所帮助！