Flutter 利用 StreamProvider 一起玩 WebSocket

最新推荐文章于 2024-03-25 20:45:16 发布

岛上码农

最新推荐文章于 2024-03-25 20:45:16 发布

阅读量2.1k

点赞数

分类专栏： Flutter 入门与实战文章标签： websocket flutter 移动开发 App 开发跨平台

本文链接：https://blog.csdn.net/shuijian00/article/details/122608525

版权

Flutter 入门与实战专栏收录该内容

131 篇文章 58 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在 Flutter 中使用 StreamProvider 结合 socket_io_client 插件进行 WebSocket 连接，实现数据流的监听与交互。通过创建 Socket 管理类 StreamSocket，结合 StreamProvider 的 create 和 value 形式，实现实时通信并展示在界面上，最终展示了运行效果和源码链接。

摘要由CSDN通过智能技术生成

前言

在实际的应用中，我们经常会遇到数据流的处理，比如监听实时位置时会产生实时的位置信息流，比如 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版本）。后端源码地址为：