WebSocket 在我们平时开发推送、聊天、数据传输时经常使用,无论是 Web 端还是移动端。那么这节博客我们将介绍 Flutter 中 WebSocket 的基本使用:连接、发送消息、接收消息、断开连接。Flutter 自身 SDK 带 WebSocket 功能,或者通过第三方插件库也可以实现这些功能,这两种实现方式都非常简单,本节博客会给大家讲解。 1.WebSocket介绍 在开始学习之前,先给大家简单介绍下 WebSocket。我们应该对 Socket 和TCP、UDP 协议都有所了解,它们都可以用来做长链接、数据通信。WebSocket 也是基于 TCP 实现的双向全双工通信协议,它可以实现客户端和服务器端数据双向传输交换。只需连接一次,便可以持久化连接通信。
这里我们可以对比 HTTP 来了解 WebSocket 的特性,我们知道 HTTP 是单向的请求/响应式协议,是无连接的协议,客户端发起请求,服务器端对请求做相应处理,这个过程是单向的。如果服务器端有数据或状态变化,无法及时告知客户端,所以很多的推送如果用 HTTP 来实现的话,都是进行轮询,这样不但效率低、容易出错,而且浪费资源,毕竟它是不停的发送 HTTP 请求给服务器端进行轮询。
那么 WebSocket 就解决了这个问题,它可以双向通信,并且是长连接、无需轮询,效率大大提升。
而使用 WebSocket 很简单,一般就如下几个步骤和功能:
连接 WebSocket 服务器 发送消息 接收消息 关闭 WebSocket 连接 那么接下来我们就学习下 Flutter 中 WebSocket 的基本用法。
2.WebSocket简单用法 Flutter SDK 中目前已经自带 WebSocket API。基本的使用步骤就是:连接 WebSocket 服务器、发送消息、接收消息、关闭 WebSocket 连接。
// 导入websocket的包 import 'dart:io'; ... // 连接WebSocket服务器 Future webSocketFuture = WebSocket.connect('ws://192.168.1.8:8080');
// WebSocket.connect返回的是 Future对象 static WebSocket _webSocket;
webSocketFuture.then((WebSocket ws) { _webSocket = ws;
void onData(dynamic content) {
print('收到');
}
// 调用add方法发送消息
_webSocket.add('message');
// 监听接收消息,调用listen方法
_webSocket.listen(onData, onDone: () {
print('onDone');
}, onError: () {
print('onError');
}, cancelOnError: true);
});
...
// 发送消息 _webSocket.add('发送消息内容');
...
// 监听接收消息,调用listen方法 void onData(dynamic content) { print('收到消息:'+content); }
_webSocket.listen(onData, onDone: () { print('onDone'); }, onError: () { print('onError'); }, cancelOnError: true);
...
// 关闭WebSocket连接 _webSocket.close(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 基本用法就这些,怎么样,是不是很简单?
接下来我们看下通过第三方插件库进行 WebSocket 通信的基本用法。
3.第三方插件库实现 WebSocket 第三方插件库我们选择官方的插件库:websocketchannel。
基本使用步骤也都是:连接 WebSocket 服务器、发送消息、接收消息、关闭 WebSocket 连接。
插件库地址:pub.dev/packages/we…
首先安装。
在项目的 pubspec.yaml 里加入引用:
dependencies: web_socket_channel: ^1.0.13 1 2 导入包:
import 'package:web_socket_channel/io.dart'; import 'package:web_socket_channel/status.dart' as status; 1 2 连接 WebSocket 服务器:
var channel = IOWebSocketChannel.connect("ws://192.168.1.8:8080"); // 通过IOWebSocketChannel我们便可以进行各种操作 1 2 发送消息:
channel.sink.add("connected!"); 监听接收消息:
channel.stream.listen((message) { print('收到消息:' + message); }); 关闭 WebSocket 连接:
channel.sink.close(); 1 2 3 4 5 6 7 8 9 以上就是 Flutter 通过第三方插件库实现 WebSocket 通信功能的基本步骤。
当然 Flutter 也支持 Socket 相关 API 操作,大家可以自行学习。