Flutter的web_socket_channel握手成功后如何接收返回数据

我在Flutter中使用web_socket_channel建立了WebSocket连接，已经成功完成了握手。现在想接收服务器返回的数据，但不知道具体该如何操作。请问应该使用哪个方法来监听和接收服务器发送的消息？能否提供一个简单的代码示例来说明如何正确处理这些返回数据？

2 回复

使用web_socket_channel接收数据，需监听stream属性：

final channel = WebSocketChannel.connect(Uri.parse('ws://url'));
channel.stream.listen(
  (message) {
    print('收到数据: $message');
  },
  onError: (error) {
    print('错误: $error');
  },
  onDone: () {
    print('连接关闭');
  }
);

通过stream.listen处理消息、错误和连接关闭事件。

更多关于Flutter的web_socket_channel握手成功后如何接收返回数据的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用web_socket_channel接收返回数据，可以通过监听stream来实现。握手成功后，WebSocket会持续接收服务器发送的数据。

基本使用方法：

  1. 建立连接：
import 'package:web_socket_channel/web_socket_channel.dart';

final channel = WebSocketChannel.connect(
  Uri.parse('wss://your-websocket-url'),
);
  1. 监听接收数据：
channel.stream.listen(
  (message) {
    // 处理接收到的数据
    print('收到消息: $message');
    
    // 如果是JSON数据可以解析
    // var data = jsonDecode(message);
  },
  onError: (error) {
    print('WebSocket错误: $error');
  },
  onDone: () {
    print('WebSocket连接关闭');
  },
);

完整示例：

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

class WebSocketExample extends StatefulWidget {
  @override
  _WebSocketExampleState createState() => _WebSocketExampleState();
}

class _WebSocketExampleState extends State<WebSocketExample> {
  late final WebSocketChannel channel;
  List<String> messages = [];

  @override
  void initState() {
    super.initState();
    
    // 建立连接
    channel = WebSocketChannel.connect(
      Uri.parse('wss://echo.websocket.org'),
    );
    
    // 监听消息
    channel.stream.listen(
      (data) {
        setState(() {
          messages.add('收到: $data');
        });
      },
      onError: (error) {
        print('错误: $error');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(messages[index]));
        },
      ),
    );
  }

  @override
  void dispose() {
    channel.sink.close(); // 关闭连接
    super.dispose();
  }
}

关键点：

  • channel.stream 是一个Stream对象，通过listen()方法监听数据
  • 收到的数据自动转换为String类型
  • 记得在dispose()中关闭连接
  • 支持错误处理和连接关闭回调

这样就能持续接收WebSocket服务器发送的所有消息了。

回到顶部