Http协议是无状态的,只能由客户端主动发起,服务端再被动响应,服务端无法向客户端主动推送内容,并且一旦服务器响应结束,链接就会断开所以无法进行实时通信。WebSocket协议正是为解决客户端与服务端实时通信而产生的技术,现在已经被主流浏览器支持。目前 Flutter也提供了专门的包来支持WebSocket协议。
注意:Http协议中虽然可以通过keep-alive机制使服务器在响应结束后链接会保持一段时间,但最终还是会断开,keep-alive机制主要是用于避免在同一台服务器请求多个资源时频繁创建链接,它本质上是支持链接复用的技术,而并非用于实时通信。
1. WebSocket 使用
1.1 引入web_socket_channel
web_socket_channelpackage 提供了我们需要连接到WebSocket服务器的工具。该package提供了一个WebSocketChannel
允许我们既可以监听来自服务器的消息,又可以将消息发送到服务器的方法。
dependencies:
web_socket_channel: ^2.2.0
执行flutter pub get 命令,即可
1.2 web_socket_channel 使用
步骤
- 连接到WebSocket服务器。
- 监听来自服务器的消息。
- 将数据发送到服务器。
- 关闭WebSocket连接。
1. 连接到WebSocket服务器
final channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
2. 监听来自服务器的消息
channel.stream.listen((event) {});
使用一个StreamBuilder
来监听新消息, 并用一个Text来显示它们
StreamBuilder(
stream: widget.channel.stream,
builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : '');
},
);
工作原理
WebSocketChannel
提供了一个来自服务器的消息Stream
。该Stream
类是dart:async
包中的一个基础类。它提供了一种方法来监听来自数据源的异步事件。与Future
返回单个异步响应不同,Stream
类可以随着时间推移传递很多事件。该StreamBuilder
组件将连接到一个Stream
, 并在每次收到消息时通知Flutter重新构建界面
3. 将数据发送到服务器
为了将数据发送到服务器,我们会add消息给WebSocketChannel提供的sink。
channel.sink.add(data);
WebSocketChannel
提供了一个StreamSink
,它将消息发给服务器
StreamSink
类提供了给数据源同步或异步添加事件的一般方法
4. 关闭WebSocket连接
channel.sink.close(0, "close");
2. 示例
import 'package:flutter/material.dart';
import 'package:web_socket_channel/io.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
class MSWebSocketRouter extends StatefulWidget {
const MSWebSocketRouter({Key? key}) : super(key: key);
@override
State<MSWebSocketRouter> createState() => _MSWebSocketRouterState();
}
class _MSWebSocketRouterState extends State<MSWebSocketRouter> {
TextEditingController _controller = TextEditingController();
late IOWebSocketChannel channel;
String _text = "";
@override
void initState() {
super.initState();
channel = IOWebSocketChannel.connect("ws://49.234.18.41:8866");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("WebSocket")),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Form(
child: TextFormField(
controller: _controller,
decoration: InputDecoration(labelText: "send a message"),
),
),
StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
if (snapshot.hasError) {
_text = "网络不通...";
} else if (snapshot.hasData) {
_text = "echo: ${snapshot.data}";
}
print("text $_text ${channel.stream.runtimeType}");
return Padding(
padding: const EdgeInsets.all(20.0),
child: Text(_text),
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.send),
onPressed: () {
sendMessage();
},
),
);
}
void sendMessage() {
if (_controller.text.isNotEmpty) {
// 发送消息
channel.sink.add(_controller.text);
}
print("TTTT ${_controller.text}");
}
@override
void dispose() {
super.dispose();
_controller.dispose();
channel.sink.close();
}
}
思考:
假如我们想通过WebSocket传输二进制数据应该怎么做(比如要从服务器接收一张图片)?我们发现StreamBuilder和Stream都没有指定接收类型的参数,并且在创建WebSocket链接时也没有相应的配置,貌似没有什么办法……其实很简单,要接收二进制数据仍然使用StreamBuilder,因为WebSocket中所有发送的数据使用帧的形式发送,而帧是有固定格式,每一个帧的数据类型都可以通过Opcode字段指定,它可以指定当前帧是文本类型还是二进制类型(还有其它类型),所以客户端在收到帧时就已经知道了其数据类型,所以flutter完全可以在收到数据后解析出正确的类型,所以就无需开发者去关心,当服务器传输的数据是指定为二进制时,StreamBuilder的snapshot.data的类型就是List<int>,是文本时,则为String。