Flutter学习记录——17.WebSocket的使用

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<WebSocket> webSocketFuture =
        WebSocket.connect('ws://192.168.1.8:8080');

// WebSocket.connect返回的是 Future<WebSocket>对象
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();

基本用法就这些，怎么样，是不是很简单？

接下来我们看下通过第三方插件库进行 WebSocket 通信的基本用法。

3.第三方插件库实现 WebSocket

第三方插件库我们选择官方的插件库：websocketchannel。

基本使用步骤也都是：连接 WebSocket 服务器、发送消息、接收消息、关闭 WebSocket 连接。

插件库地址：https://pub.dev/packages/websocketchannel

首先安装。

在项目的 pubspec.yaml 里加入引用：

dependencies:
  web_socket_channel: ^1.0.13

导入包：

import 'package:web_socket_channel/io.dart';
import 'package:web_socket_channel/status.dart' as status;

连接 WebSocket 服务器：

var channel = IOWebSocketChannel.connect("ws://192.168.1.8:8080");
// 通过IOWebSocketChannel我们便可以进行各种操作

发送消息：

channel.sink.add("connected!");
监听接收消息：

channel.stream.listen((message) {
      print('收到消息:' + message);
    });
关闭 WebSocket 连接：

channel.sink.close();

以上就是 Flutter 通过第三方插件库实现 WebSocket 通信功能的基本步骤。

当然 Flutter 也支持 Socket 相关 API 操作，大家可以自行学习。