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

相关推荐
chushiyunen10 分钟前
dom操作笔记、xml和document等
xml·java·笔记
chushiyunen13 分钟前
tomcat使用笔记、启动失败但是未打印日志
java·笔记·tomcat
汇能感知17 分钟前
光谱相机的光谱数据采集原理
经验分享·笔记·科技
ModestCoder_29 分钟前
将一个新的机器人模型导入最新版isaacLab进行训练(以unitree H1_2为例)
android·java·机器人
人人题40 分钟前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
小脑斧爱吃鱼鱼1 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
robin_suli1 小时前
Spring事务的传播机制
android·java·spring
鸿蒙布道师2 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
lulinhao2 小时前
HCIA/HCIP基础知识笔记汇总
网络·笔记
Harrison_zhu3 小时前
Ubuntu18.04 编译 Android7.1代码报错
android