当然，以下是如何在Flutter应用中使用shelf_web_socket插件进行WebSocket通信的示例代码。不过，需要注意的是，shelf_web_socket实际上是一个Dart库，用于在服务器端处理WebSocket连接，而不是直接在Flutter客户端使用的插件。Flutter客户端通常使用如web_socket_channel或dart:io（在支持Dart VM的平台上）进行WebSocket通信。

不过，为了回答你的问题，我将展示如何在Flutter客户端使用web_socket_channel插件进行WebSocket通信，以及如何在服务器端使用shelf_web_socket处理连接。

Flutter 客户端代码

首先，在你的Flutter项目中添加web_socket_channel依赖：

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0  # 确保使用最新版本

然后，在你的Flutter代码中创建WebSocket连接并发送/接收消息：

import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebSocketPage(),
    );
  }
}

class WebSocketPage extends StatefulWidget {
  @override
  _WebSocketPageState createState() => _WebSocketPageState();
}

class _WebSocketPageState extends State<WebSocketPage> {
  WebSocketChannel? _channel;
  TextEditingController _controller = TextEditingController();
  List<String> _messages = [];

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

  void connectToWebSocket() async {
    _channel = WebSocketChannel.connect(Uri.parse('ws://localhost:8080'));

    _channel!.stream.listen(
      (message) {
        setState(() {
          _messages.add('Received: $message');
        });
      },
      onError: (error) {
        setState(() {
          _messages.add('Error: $error');
        });
      },
      onDone: () {
        setState(() {
          _messages.add('Connection closed');
        });
      },
    );
  }

  void sendMessage() {
    if (_channel != null && !_controller.text.isEmpty) {
      _channel!.sink.add(_controller.text);
      setState(() {
        _messages.add('Sent: ${_controller.text}');
        _controller.clear();
      });
    }
  }

  @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 Text(_messages[index]);
                },
              ),
            ),
            TextField(
              controller: _controller,
              decoration: InputDecoration(border: OutlineInputBorder()),
              onEditingComplete: sendMessage,
              onSubmitted: (value) {
                sendMessage();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }
}

Dart 服务器端代码（使用 shelf_web_socket）

接下来，在服务器端使用shelf和shelf_web_socket来处理WebSocket连接：

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

dependencies:
  shelf: ^1.0.0
  shelf_web_socket: ^1.0.0

然后，创建一个Dart文件（例如server.dart）来处理WebSocket连接：

import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';
import 'package:shelf_web_socket/shelf_web_socket.dart';
import 'dart:convert';

void main() {
  var handler = Router()
    .get('/', (Request request) async {
      return Response.ok('Hello, World!');
    })
    .ws('/ws', (WebSocket webSocket) async {
      webSocket.onMessage.listen((message) async {
        print('Received: ${utf8.decode(message)}');
        await webSocket.send(utf8.encode('Echo: ${utf8.decode(message)}'));
      });

      webSocket.onClose.listen((int? code, String? reason) {
        print('WebSocket closed with code $code and reason $reason');
      });
    });

  var server = Shelf.serve(handler, 'localhost', 8080);
  print('Serving at ws://localhost:8080/ws');
}

运行服务器后，Flutter客户端应该能够连接到WebSocket服务器，并发送和接收消息。

希望这能帮助你理解如何在Flutter客户端和Dart服务器端使用WebSocket进行通信。如果你有其他问题或需要进一步的帮助，请随时提问。