Flutter自动重连WebSocket插件websocket_reconnect的使用

开始使用

本项目是一个用于Flutter的插件项目，专门包含适用于Android和/或iOS的平台特定实现代码。

安装

首先，你需要在pubspec.yaml文件中添加websocket_reconnect依赖：

dependencies:
  websocket_reconnect: ^版本号

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

示例代码

以下是一个完整的示例代码，展示了如何使用websocket_reconnect插件进行WebSocket连接，并在断开连接时自动重新连接。

示例代码

import 'dart:async';

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:web_socket_channel/io.dart';
import 'package:web_socket_channel/status.dart' as status;
import 'package:web_socket_channel/web_socket_channel.dart';

import 'package:websocket_reconnect/websocket_reconnect.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebSocket Demo',
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  [@override](/user/override)
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;
  WebSocketChannel? _channel;
  bool _isConnected = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _connectToWebSocket();
  }

  [@override](/user/override)
  void dispose() {
    _disconnectFromWebSocket();
    super.dispose();
  }

  void _connectToWebSocket() async {
    final url = 'ws://echo.websocket.events';
    final delay = Duration(seconds: 3);

    // 创建WebSocket通道
    final channel = IOWebSocketChannel.connect(url);

    channel.stream.listen((message) {
      setState(() {
        _count = int.parse(message);
      });
    }, onError: (error) {
      print('WebSocket error: $error');
      _isConnected = false;
      _showConnectionLostDialog();
      // 调用WebsocketReconnect进行重连
      WebsocketReconnect(url: url, delay: delay).scheduleReconnect();
    }, onDone: () {
      print('WebSocket done');
      _isConnected = false;
      _showConnectionLostDialog();
      // 调用WebsocketReconnect进行重连
      WebsocketReconnect(url: url, delay: delay).scheduleReconnect();
    }, cancelOnError: true);

    _channel = channel;
    _isConnected = true;

    // 监听网络状态变化
    Connectivity().onConnectivityChanged.listen((result) {
      if ((result == ConnectivityResult.mobile || result == ConnectivityResult.wifi) && !_isConnected) {
        _connectToWebSocket();
      }
    });
  }

  void _disconnectFromWebSocket() {
    _channel?.sink.close(status.goingAway);
  }

  void _showConnectionLostDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('连接丢失'),
          content: Text('正在尝试重新连接...'),
        );
      },
    );
  }

  void _incrementCounter() {
    _channel?.sink.add((_count + 1).toString());
  }

  void _decrementCounter() {
    _channel?.sink.add((_count - 1).toString());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebSocket Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '计数器',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 16),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.headline1,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: '增加',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: _decrementCounter,
            tooltip: '减少',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}