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