Flutter Socket.IO通信插件 socket_io_common 的使用

socket_io_common 是一个用于Dart 2的Socket.io通用解析库。它支持不同版本的Socket.io服务器，并且提供了与之对应的版本兼容性信息。

版本信息

示例Demo

下面是一个简单的Flutter应用示例，展示了如何使用socket_io_client（基于socket_io_common）与Socket.io服务器进行通信。

添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  socket_io_client: ^2.0.0 # 根据需要选择合适的版本

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

客户端代码示例

以下是一个完整的客户端示例，演示了如何连接到Socket.io服务器、发送和接收消息。

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: 'Flutter Socket.IO Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late IO.Socket socket;
  String message = '';

  @override
  void initState() {
    super.initState();
    // 初始化Socket.io客户端并连接到服务器
    socket = IO.io('http://localhost:3000', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    });

    socket.connect();

    // 监听来自服务器的消息
    socket.on('connect', (_) {
      print('连接成功');
      socket.emit('msg', '测试消息');
    });

    socket.on('event', (data) => print(data));

    socket.on('disconnect', (_) => print('断开连接'));
  }

  void sendMessage() {
    if (message.isNotEmpty) {
      socket.emit('msg', message);
      setState(() {
        message = '';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Socket.IO Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) {
                setState(() {
                  message = value;
                });
              },
              decoration: InputDecoration(hintText: "输入消息"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: sendMessage,
              child: Text("发送消息"),
            ),
          ],
        ),
      ),
    );
  }
}

服务器端代码示例（Node.js）

为了测试这个客户端，你需要一个简单的Socket.io服务器。以下是使用Node.js编写的服务器示例：

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('新用户连接');

  socket.on('msg', (data) => {
    console.log('收到消息:', data);
    socket.emit('event', '服务器已收到消息: ' + data);
  });

  socket.on('disconnect', () => {
    console.log('用户断开连接');
  });
});