Flutter 之 WebSockets (三十一)

Posted 2023-04-01

参考技术A

Http协议是无状态的，只能由客户端主动发起，服务端再被动响应，服务端无法向客户端主动推送内容，并且一旦服务器响应结束，链接就会断开所以无法进行实时通信。WebSocket协议正是为解决客户端与服务端实时通信而产生的技术，现在已经被主流浏览器支持。目前 Flutter也提供了专门的包来支持WebSocket协议。

web_socket_channel package 提供了我们需要连接到WebSocket服务器的工具。该package提供了一个 WebSocketChannel 允许我们既可以监听来自服务器的消息，又可以将消息发送到服务器的方法。

执行flutter pub get 命令，即可

1. 连接到WebSocket服务器

2. 监听来自服务器的消息

使用一个 StreamBuilder 来监听新消息， 并用一个Text来显示它们

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

3. 将数据发送到服务器
为了将数据发送到服务器，我们会add消息给WebSocketChannel提供的sink。

WebSocketChannel 提供了一个 StreamSink ，它将消息发给服务器
StreamSink 类提供了给数据源同步或异步添加事件的一般方法

4. 关闭WebSocket连接

思考:
假如我们想通过WebSocket传输二进制数据应该怎么做（比如要从服务器接收一张图片）？我们发现StreamBuilder和Stream都没有指定接收类型的参数，并且在创建WebSocket链接时也没有相应的配置，貌似没有什么办法……其实很简单，要接收二进制数据仍然使用StreamBuilder，因为WebSocket中所有发送的数据使用帧的形式发送，而帧是有固定格式，每一个帧的数据类型都可以通过Opcode字段指定，它可以指定当前帧是文本类型还是二进制类型（还有其它类型），所以客户端在收到帧时就已经知道了其数据类型，所以flutter完全可以在收到数据后解析出正确的类型，所以就无需开发者去关心，当服务器传输的数据是指定为二进制时，StreamBuilder的snapshot.data的类型就是List<int>，是文本时，则为String。

https://book.flutterchina.club/chapter11/websocket.html