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重新构建界面。

相关推荐
四谎真好看1 小时前
Java 学习笔记(进阶篇2)
java·笔记·学习
Suckerbin3 小时前
DarkHole: 2靶场渗透
笔记·安全·web安全·网络安全
一枝小雨3 小时前
【C++】Vector完全指南:动态数组高效使用
开发语言·c++·笔记·vector·学习笔记·std库
没有了遇见3 小时前
Android 原生定位(替代高德 / 百度等三方定位)<终极版本>
android
大白的编程日记.3 小时前
【Linux学习笔记】信号的深入理解之软件条件产生信号
linux·笔记·学习
Wilber的技术分享4 小时前
【大模型实战笔记 1】Prompt-Tuning方法
人工智能·笔记·机器学习·大模型·llm·prompt
来生硬件工程师4 小时前
【硬件笔记】负载是如何烧MOS的?
笔记·嵌入式硬件·硬件架构·硬件工程·硬件设计
2501_916008894 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921434 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
CYRUS_STUDIO5 小时前
LLVM 全面解析:NDK 为什么离不开它?如何亲手编译调试 clang
android·编译器·llvm