Flutter WebSocket通信插件dart_websocket的使用

当然，下面是一个使用 dart_websocket 插件在 Flutter 中实现 WebSocket 通信的示例代码。这个示例展示了如何建立 WebSocket 连接、发送消息以及接收消息。

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

dependencies:
  flutter:
    sdk: flutter
  dart_websocket: ^0.0.4  # 请检查最新版本号

然后，运行 flutter pub get 以获取依赖。

接下来，是一个简单的 Flutter 应用示例，展示如何使用 dart_websocket 进行 WebSocket 通信：

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:dart_websocket/dart_websocket.dart';

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

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

class WebSocketScreen extends StatefulWidget {
  @override
  _WebSocketScreenState createState() => _WebSocketScreenState();
}

class _WebSocketScreenState extends State<WebSocketScreen> {
  WebSocket? _webSocket;
  TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];

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

  void initWebSocket() {
    String url = "ws://echo.websocket.org"; // 替换为你的 WebSocket 服务器 URL
    _webSocket = WebSocket(url);

    _webSocket!.onOpen = (dynamic event) {
      print("WebSocket is open now.");
      _messages.add("Connected to WebSocket server.");
      setState(() {});
    };

    _webSocket!.onMessage = (dynamic event) {
      print("Received message: ${event.data}");
      _messages.add("Received: ${event.data}");
      setState(() {});
    };

    _webSocket!.onClose = (dynamic event) {
      print("WebSocket is closed now.");
      _messages.add("Disconnected from WebSocket server.");
      setState(() {});
    };

    _webSocket!.onError = (dynamic event) {
      print("WebSocket error: ${event.error}");
      _messages.add("Error: ${event.error}");
      setState(() {});
    };
  }

  void sendMessage() {
    if (_webSocket!.readyState == WebSocket.OPEN) {
      String message = _controller.text;
      _webSocket!.send(message);
      _messages.add("Sent: $message");
      setState(() {});
      _controller.clear();
    } else {
      _messages.add("WebSocket is not open.");
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_messages[index]),
                  );
                },
              ),
            ),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Message',
              ),
              onEditingComplete: sendMessage,
            ),
            ElevatedButton(
              onPressed: sendMessage,
              child: Text('Send'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _webSocket?.close();
    _controller.dispose();
    super.dispose();
  }
}

代码说明：

1. 依赖引入：在 pubspec.yaml 中添加 dart_websocket 依赖。
2. WebSocket 连接：在 initWebSocket 方法中初始化 WebSocket 连接，并设置 onOpen、onMessage、onClose 和 onError 回调方法。
3. 发送消息：在 sendMessage 方法中发送消息到 WebSocket 服务器。
4. UI 界面：使用 Flutter 的 Material Design 组件构建简单的 UI 界面，显示接收到的消息和发送消息的输入框。
5. 资源释放：在 dispose 方法中关闭 WebSocket 连接并释放资源。

这个示例展示了如何使用 dart_websocket 插件在 Flutter 应用中实现基本的 WebSocket 通信功能。根据你的具体需求，你可以进一步扩展和优化这个示例。