flutter

491 阅读3分钟

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 操作,大家可以自行学习。

原文链接:blog.csdn.net/qq_41151659…