Flutter WebSocket通信插件flutter_web_socket的使用

flutter_web_socket 是一个用于建立WebSocket连接并与WebSocket服务器交互的Dart包。以下是详细使用步骤和示例代码。

连接到WebSocket

要连接到WebSocket服务器，请使用flutter_web_socket包提供的connectToWebSocket方法，并提供WebSocket服务器URL作为参数来建立连接。

使用步骤

1. 添加依赖

在你的pubspec.yaml文件中添加flutter_web_socket依赖：

dependencies:
  flutter_web_socket: ^1.0.2

2. 导入包

在你的Dart文件中导入该包：

import 'package:flutter_web_socket/flutter_web_socket.dart';

3. 建立WebSocket连接

使用connectToWebSocket方法建立WebSocket连接。将所需的WebSocket服务器URL作为参数传递：

void main() async {
  // 示例WebSocket URL
  String socketUrl = 'wss://socketsbay.com/wss/v2/1/demo/';

  // 尝试建立WebSocket连接
  WebSocket webSocket = await connectToWebSocket(socketUrl: socketUrl);

  if (webSocket != null) {
    // WebSocket连接成功，可以开始与服务器交互
    webSocket.listen(
      (data) {
        print('Received message: $data');
      },
      onError: (error) {
        print('Error occurred: $error');
      },
      onDone: () {
        print('WebSocket connection closed');
      },
    );

    // 向服务器发送消息
    webSocket.add('Hello, Server!');

    // 关闭WebSocket连接（如果需要）
    // webSocket.close();
  } else {
    // WebSocket连接失败
    print('WebSocket connection failed.');
  }
}

完整示例Demo

下面是一个完整的Flutter应用示例，展示了如何使用flutter_web_socket进行WebSocket通信：

import 'package:flutter/material.dart';
import 'package:flutter_web_socket/flutter_web_socket.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: WebSocketPage(),
    );
  }
}

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

class _WebSocketPageState extends State<WebSocketPage> {
  WebSocket? _webSocket;
  String _message = '';
  List<String> _messages = [];

  void _connectWebSocket() async {
    String socketUrl = 'wss://socketsbay.com/wss/v2/1/demo/';
    _webSocket = await connectToWebSocket(socketUrl: socketUrl);

    if (_webSocket != null) {
      _webSocket!.listen(
        (data) {
          setState(() {
            _messages.add('Received: $data');
          });
        },
        onError: (error) {
          print('Error occurred: $error');
        },
        onDone: () {
          print('WebSocket connection closed');
        },
      );

      // 发送初始消息
      _sendMessage('Hello, Server!');
    } else {
      print('WebSocket connection failed.');
    }
  }

  void _sendMessage(String message) {
    if (_webSocket != null && _webSocket!.readyState == WebSocket.open) {
      _webSocket!.add(message);
      setState(() {
        _messages.add('Sent: $message');
      });
    }
  }

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Demo'),
      ),
      body: Column(
        children: <Widget>[
          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: <Widget>[
                Expanded(
                  child: TextField(
                    onChanged: (value) {
                      _message = value;
                    },
                    decoration: InputDecoration(hintText: "Enter a message"),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage(_message);
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这个示例应用展示了如何使用flutter_web_socket插件进行WebSocket通信，包括连接、发送和接收消息等功能。你可以根据实际需求进一步扩展此示例。