Flutter WebSocket通信插件web_socket的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter WebSocket通信插件web_socket的使用

简介

pub package package publisher

web_socket是一个易于使用的库,用于与WebSockets进行通信,它具有多种实现方式。该库旨在提供一个简单、定义明确的WebSocket接口,以确保在不同实现之间具有一致的行为。

为什么需要另一个WebSocket包?

目前最流行的WebSocket包是web_socket_channel。它有两种实现,一种基于package:web,另一种基于dart:io WebSocket。然而,这些实现并不具有一致的行为。而web_socket包当前有三种实现(未来还会有更多),它们都通过了相同的一致性测试

使用方法

示例代码:基本连接和消息收发

import 'package:web_socket/web_socket.dart';

void main() async {
  // 创建WebSocket连接
  final socket = await WebSocket.connect(Uri.parse('wss://ws.postman-echo.com/raw'));

  // 监听来自服务器的消息
  socket.events.listen((e) async {
    switch (e) {
      case TextDataReceived(text: final text):
        print('Received Text: $text');
        await socket.close();
      case BinaryDataReceived(data: final data):
        print('Received Binary: $data');
      case CloseReceived(code: final code, reason: final reason):
        print('Connection to server closed: $code [$reason]');
    }
  });

  // 向服务器发送消息
  socket.sendText('Hello Dart WebSockets! 🎉');
}

示例代码:实时比特币价格查询

以下示例展示了如何使用web_socket库来订阅并打印比特币的美元价值。

import 'dart:convert';
import 'dart:io';

import 'package:web_socket/web_socket.dart';

const requestId = 305;

/// Prints the US dollar value of Bitcoins continuously.
void main() async {
  // Whitebit public WebSocket API documentation:
  // https://docs.whitebit.com/public/websocket/
  final socket =
      await WebSocket.connect(Uri.parse('wss://api.whitebit.com/ws'));

  socket.events.listen((e) {
    switch (e) {
      case TextDataReceived(text: final text):
        final json = jsonDecode(text) as Map;
        if (json['id'] == requestId) {
          if (json['error'] != null) {
            stderr.writeln('Failure: ${json['error']}');
            socket.close();
          }
        } else {
          final params = (json['params'] as List).cast<List<dynamic>>();
          print('₿1 = USD\$${params[0][2]}');
        }
      case BinaryDataReceived():
        stderr.writeln('Unexpected binary response from server');
        socket.close();
      case CloseReceived():
        stderr.writeln('Connection to server closed');
    }
  });
  
  // 发送订阅请求
  socket.sendText(jsonEncode({
    'id': requestId,
    'method': 'candles_subscribe',
    'params': ['BTC_USD', 5]
  }));
}

状态:实验性

请注意,此包目前处于实验阶段,并在labs.dart.dev pub发布商下发布,以征求反馈。对于labs.dart.dev下的发布包,我们通常计划在经过一段时间的反馈和迭代后,将包升级为支持的发布商(如dart.dev,tools.dart.dev),或停止该包。这些包的API和破坏性更改的预期率要高得多。

您的反馈对我们改进这个包非常重要。如果您有任何一般性的反馈、建议或评论,请在bug tracker中提交问题。


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

1 回复

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


当然,下面是一个使用Flutter中的web_socket_channel插件进行WebSocket通信的示例代码。这个插件提供了一个简单的方法来在Flutter应用中建立和管理WebSocket连接。

首先,你需要在你的pubspec.yaml文件中添加web_socket_channel依赖:

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.0.0  # 请检查最新版本号

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

接下来是一个完整的Flutter应用示例,它展示了如何使用web_socket_channel进行WebSocket通信:

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

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

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

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

class _WebSocketPageState extends State<WebSocketPage> {
  final WebSocketChannel _channel = WebSocketChannel.connect(
    Uri.parse('wss://echo.websocket.org/')  // 替换为你的WebSocket服务器URL
  );

  final TextEditingController _controller = TextEditingController();
  String _response = '';

  @override
  void dispose() {
    _channel.sink.close();
    _controller.dispose();
    super.dispose();
  }

  void _sendMessage() {
    final message = _controller.text;
    _channel.sink.add(message);
    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Message',
              ),
              maxLines: 4,
              keyboardType: TextInputType.multiline,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _sendMessage,
              child: Text('Send'),
            ),
            SizedBox(height: 16),
            Text(
              'Response:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Flexible(
              child: SelectableText(
                _response,
                style: TextStyle(fontSize: 16),
                maxLines: null,
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _channel.stream.listen(
      (message) {
        setState(() {
          _response = jsonDecode(message) as String;  // 假设服务器返回的是JSON格式的字符串
        });
      },
      onError: (error) {
        print('WebSocket error: $error');
      },
      onDone: () {
        print('WebSocket connection closed');
      },
    );
  }
}

代码说明

  1. 依赖安装:在pubspec.yaml中添加web_socket_channel依赖。
  2. 建立WebSocket连接:在_WebSocketPageState中,使用WebSocketChannel.connect方法连接到WebSocket服务器(在此示例中使用的是wss://echo.websocket.org,这是一个公共的WebSocket回声服务器,它会返回你发送的任何消息)。
  3. 发送消息:通过_channel.sink.add(message)方法发送消息。
  4. 接收消息:通过监听_channel.stream来接收消息,并更新UI显示接收到的消息。
  5. 错误处理:在监听器中处理WebSocket错误和连接关闭事件。

请注意,这个示例假设服务器返回的是JSON格式的字符串,并使用jsonDecode函数解析它。根据你的实际情况,你可能需要调整这部分代码。

回到顶部