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

电玩女神 2023-06-19 07:17 55阅读 0赞

### 文章目录 ###

*  1.WebSocket介绍
 *  2.WebSocket简单用法
 *  3.第三方插件库实现 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 操作，大家可以自行学习。