Flutter笔记--WebSocket

Flutter中WebSocket这一块主要用的是插件web_socket_channel,它主要基于 WebSocket 协议,通过该协议实现与服务器之间的双向通信;

web_socket_channel 插件的几个主要步骤:

html 复制代码
1 连接到WebSocket服务器:
使用 WebSocketChannel.connect 方法可以连接到指定的 WebSocket 服务器。这个方法接受一个 URI 参数,返回一个 WebSocketChannel 对象,用于之后的通信操作。
2 监听来自服务器的消息:
通过 stream 属性监听来自服务器的消息。这个 stream 是一个 Stream 类的实例,允许以异步方式接收多个事件。在 UI 层面,可以使用 StreamBuilder 组件绑定这个 stream,并自动更新界面显示新消息。
3 将数据发送到服务器:
使用 WebSocketChannel 的 sink 对象的 add 方法向服务器发送数据。sink 是一个 StreamSink 类的实例,它提供一种方式向数据源添加事件。
4 关闭WebSocket连接:
完成通信后,通过调用 sink.close 方法关闭 WebSocket 连接,释放资源。

栗子:

Dart 复制代码
class MyApp2 extends StatelessWidget {
     @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage2(),
    );
  }
}

class HomePage2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage2> {

  final channel = IOWebSocketChannel.connect('ws://124.222.224.186:8800');
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: StreamBuilder(
          stream: channel.stream,
          builder: (context,snapshot) {
            if(snapshot.connectionState == ConnectionState.active) {
              print(snapshot.data);
              return Container(
                width: double.infinity,
                height: 200,
                child: Center(
                  child: Text('${snapshot.data}'),
                ),
              );
            }
            return SizedBox(height: 100,);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    print("send event!");
    channel.sink.add(jsonEncode({
      "event":"events",
      "data":"Hi 007"
    }));
  }

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

WebSocketChannel提供了一个来自服务器的消息Stream 。该Stream类是dart:async包中的一个基础类。它提供了一种方法来监听来自数据源的异步事件。与Future返回单个异步响应不同,Stream类可以随着时间推移传递很多事件。该StreamBuilder Widget将连接到一个Stream, 并在每次收到消息时通知Flutter重新构建界面。

相关推荐
半桔29 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
xiaopengbc1 小时前
Android解压工具,ZArchiver,RAR for Android,iZip,The Unarchiver,解压专家
android
笑衬人心。1 小时前
Java 17 新特性笔记
java·开发语言·笔记
Digitally1 小时前
5种使用USB数据线将文件从安卓设备传输到电脑的方法
android
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
quant_19864 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
宝山哥哥9 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
爬虫程序猿9 小时前
利用爬虫按关键字搜索淘宝商品实战指南
android·爬虫
顾北川_野9 小时前
Android ttyS2无法打开该如何配置 + ttyS0和ttyS1可以
android·fpga开发
逼子格10 小时前
逻辑门电路Multisim电路仿真汇总——硬件工程师笔记
笔记·硬件工程师·multisim·电路仿真·逻辑门·硬件工程师学习·电路图