Flutter WebSocket通信插件websok的使用

A high level websocket library. Use it when working with websockets to avoid a few boilerplate and make your code look cleaner.

支持IO和HTML类型的WebSocket。

开始使用

/// For HTML:
/// import 'package:websok/html.dart';
///
/// For IO (Flutter, Dart, etc.)
import 'package:websok/io.dart';

/// 测试库。
import 'package:test/test.dart';

/// 接收的消息字符串。
String received;
/// 回调函数，在操作完成后执行。
void onData(dynamic message) => received = message;

void main() {
  test('执行WebSocket连接测试', () async {
    /// 对于HTML: IOWebsok -> HTMLWebsok
    final sok = IOWebsok(host: 'echo.websocket.org', tls: true)
      ..connect()
      ..listen(onData: onData);
      
    // 验证连接是否成功。
    expect(sok.isActive, true);
    
    // 发送消息。
    final message = 'Hello, world!';
    sok.send(message);
    
    // 等待接收消息。
    await Future.delayed(Duration(seconds: 1), () => expect(received, message));
    
    // 关闭连接。
    sok.close();
    
    // 验证连接是否关闭。
    expect(sok.isActive, false);
  });
}

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用websok插件进行WebSocket通信：

/// For HTML:
/// import 'package:websok/html.dart';
///
/// For IO (Flutter, Dart, etc.)
import 'package:websok/io.dart';

/// 接收的消息字符串。
String received;
/// 回调函数，在操作完成后执行。
void onData(dynamic message) => received = message;

void main() async {
  /// For HTML: IOWebsok -> HTMLWebsok
  final sok = IOWebsok(host: 'echo.websocket.org', tls: true)
    ..connect()
    ..listen(onData: onData);
  
  // 发送消息。
  sok.send('Hello, world!');
  
  // 打印接收到的消息。
  await Future.delayed(Duration(seconds: 1), () => print(received));
  
  // 关闭连接。
  sok.close();
}

yuanlaile 1楼•14 天前

更多关于Flutter WebSocket通信插件websok的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中使用WebSocket进行通信时，web_socket_channel 是一个非常流行的插件。它提供了一个简单而强大的API来处理WebSocket连接。以下是如何使用 web_socket_channel 插件进行WebSocket通信的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0

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

2. 导入包

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

import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/io.dart';

3. 创建WebSocket连接

使用 IOWebSocketChannel.connect 方法来创建一个WebSocket连接：

final channel = IOWebSocketChannel.connect('ws://your.websocket.url');

4. 发送消息

你可以使用 channel.sink.add 方法来发送消息：

channel.sink.add('Hello, WebSocket!');

5. 接收消息

你可以使用 channel.stream.listen 方法来监听来自WebSocket服务器的消息：

channel.stream.listen((message) {
  print('Received: $message');
}, onError: (error) {
  print('Error: $error');
}, onDone: () {
  print('WebSocket connection closed');
});

6. 关闭连接

当你不再需要WebSocket连接时，记得关闭它：

channel.sink.close();

完整示例

以下是一个完整的示例，展示了如何在Flutter中使用 web_socket_channel 进行WebSocket通信：

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

void main() => runApp(MyApp());

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

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

class _WebSocketDemoState extends State<WebSocketDemo> {
  final TextEditingController _controller = TextEditingController();
  late WebSocketChannel channel;

  [@override](/user/override)
  void initState() {
    super.initState();
    channel = IOWebSocketChannel.connect('ws://your.websocket.url');
  }

  [@override](/user/override)
  void dispose() {
    channel.sink.close();
    super.dispose();
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            StreamBuilder(
              stream: channel.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text('Received: ${snapshot.data}'),
                  );
                } else if (snapshot.hasError) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text('Error: ${snapshot.error}'),
                  );
                } else {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 24.0),
                    child: Text('No data received'),
                  );
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }
}