Flutter 利用 StreamProvider 一起玩 WebSocket

前言

在实际的应用中，我们经常会遇到数据流的处理，比如监听实时位置时会产生实时的位置信息流，比如 Socket 通讯时需要监听Socket 数据流。对于数据流，在 Flutter 中称之为 Stream，而 Provider 为 Stream专门设计了一个 StreamProvider 来监听数据流的变化，当数据流产生新的数据时就会通知监听组件刷新。本篇我们就来介绍如何利用 StreamProvider 监听 WebSocket 数据。

本篇设计的知识点如下：

• WebSokcet 客户端封装插件 socket_io_client的使用。
• StreamProvider 监听 Socket数据。

为了能够让程序正常运行，已经在后端代码增加了简单的 socket，使用的是和 socket_io_client 配套的服务端socket.io，npm 地址为socket.io，版本为4.1.3。注意 Flutter 的插件存在版本兼容性，配套该版本的当前处于开发中的版本：^2.0.0-beta.4-nullsafety.0（稳定版的1.0.1插件不支持服务端的4.1.3版本）。后端源码地址为：