Flutter 基于 WebSocket 实现即时通讯

前言

我们在前面花了很大篇幅介绍 Provider 状态管理，这是因为在 Flutter 中，Provider 是众多状态管理插件的首选。本篇以即时聊天为例，来讲述 Provider 的综合应用，也算是 Provider 状态管理系列的终结篇。本篇涉及的内容如下：

• 联系人界面的构建；
• 聊天界面的简单实现;
• StreamProvider 接收 Socket流数据并自动通知界面刷新;
• MultiProvider为聊天主界面提供多个Provider状态;
• 多个 Provider存在交叉数据时处理方式。

联系人界面构建

我们在聊天前，需要选择对应的联系人进行单聊，因此需要构建一个联系人列表。这里我们使用简单的 ListView.builder+Mock 数据构建联系人列表。界面如下所示，其中关键的就是点击联系人时将联系人的 id通过路由传递过去，以便发送消息时通过用户 id指定接收用户。

return ListTile(
  leading: _getRoundImage(contactors[index].avatar, 50),
  title: Text(contactors[index].nickname),
  subtitle: Text(
    contactors[index].description,
    style: TextStyle(fontSize: 14.0, color: Colors.grey),
  ),
  onTap: () {
    debugPrint(contactors[index].id);
    RouterManager.router.navigateTo(c