一. 连接
首先简单介绍一下连接组件, 我们在对象树里选中前台即可添加一个连接, 可以看到它只有一个属性就是它的 SID 码, 这也是它的唯一标识.
1. 用户
登录连接的每个用户可以设置自己的用户 ID, 昵称和头像, 登录成功后会收到一个 CID 码作为该用户的唯一标识. 同时, 连接组件也可以监听到用户的加入和离开并返回实时结果.
2. 房间
用户可以创建房间, 但是需要填写房间 ID, 而且此 ID 会作为房间的唯一标识, 在加入, 退出, 关闭房间和发送房间消息时都需要指明房间 ID.
3. 发送和接收消息
用户可以发送个人, 房间和全局三种消息, 发送个人消息时必须指明接收用户的 CID 码, 而发送房间 / 全局消息会发送给当前房间 / 连接内的每一位用户 (包括发送者自己). 此外, 连接中可以一次发送多条消息, 每条消息用不同的消息名称加以区分.
在接收消息时可以得到参数 "消息内容", 它是包含整条消息的集合, 我们可以在后面添加上发送消息时填入的名称作为后缀选取其中的某一条, 此外我们还可以获取发送者的 CID, 用户 ID, 昵称和头像.
二. 私聊模型
1. 数据
在这个模型中共有五个参数, 通用变量 "我的信息" 和 "选中好友" 分别用于存放当前用户和正在对话的好友的 CID, 昵称和头像; 对象数组 "好友列表" 则用来存放全部好友信息, 而且加了一个字段 "红点" 用来判断是否有未读消息, 而对象数组 "当前消息列表" 和 "总消息列表" 则分别存放正在对话的好友消息记录和所有好友的消息记录, 可以看到它俩的结构是一致的, 其中布尔值字段 "我的消息" 为 1 说明这条消息是当前用户发给对方的, 反之说明是由对方发送的.
2. 前台
在前台初始化时我们会获取当前在线用户列表并赋值给 "好友列表", 下图中可以看到调试记录里的打印结果, 序号为 0 的元素里面就是之前已经登录的一个用户的信息, 序号为 1 的元素其实就是当前用户, 不过由于当前用户还没完成登记, 所以暂时只分配了一个 CID.(即连接获取在线用户列表时会获取用户自己和没有进行登记的用户)
3. 登记页面
登记页面中我们可以上传头像, 输入昵称, 点击 chat 按钮就会在连接中进行登记, 登记成功后会把当前用户的 CID, 头像和昵称保存在 "我的信息" 中, 然后使用连接组件发送一条全局消息, 包含 "类型","昵称" 和 "头像" 三部分内容. 对应要给连接添加收全局消息的事件, 并且当接收到的全局消息的 "类型" 值为 "新用户" 时, 在 "好友列表" 中添加一条数据, 包括直接获取的发送者 CID 和 "消息内容" 中的 "头像" 与 "昵称".
4. 聊天页面
聊天页面可以分为四部分: 左侧放置的是当前用户的头像, 图片组件已经与 "我的信息" 进行了数据绑定; 中间是联系人列表; 右上方是正在对话好友的消息列表; 右下方则用来输入并发送消息.
其中联系人列表是依据 "好友列表" 循环创建的, for 容器下添加了两个 if 容器用来分别将当前用户自己和没有昵称的用户筛除, 当用户点击选中一个好友时会将该好友的信息存到 "选中好友" 中, 并且从 "总消息列表" 中将与该好友的对话记录筛选输出到 "当前消息列表".
联系人列表中还用绝对定位容器做了一个红点的展示效果, 它的可见属性进行了数据绑定, 只有在当前数据的 "红点" 为 1 时可见, 这部分的逻辑是当连接收到一条个人消息会先将该消息存入 "总消息列表", 然后判断消息来源的 CID 是否为正在对话的 "选中好友", 如果是就将该消息再添加到 "当前消息列表"; 如果不是就从 "好友列表" 中找到该 CID 对应的好友, 把 "红点" 字段置 1, 使该好友在列表中显示红点, 标记有消息未读.
前面已经说过选中一个好友后会从 "总消息列表" 中将与该好友的对话记录筛选输出到 "当前消息列表", 右上方就是根据 "当前消息列表" 循环创建展示出聊天记录的, 而且这里 if 容器会通过每条消息中字段 "我的消息" 的值选择不同的展示效果.
最后是点击右下方的 send 按钮, 这里连接会通过 "选中好友" 中的 CID 确认发送对象, 将输入内容发送给对方后, 我们需要在 "总消息列表" 和 "当前消息列表" 中都添加这条消息的记录, 而且将 "我的消息" 这一字段设置为 1.
总结
连接的使用中, 首先要注意的就是事件的对应, 案例中有通过连接发送消息的动作, 那么就要在连接中添加对应的接收消息的事件, 否则通讯就是没有意义的. 还有就是连接中无论发送个人消息还是房间消息都需要唯一标识, 所以要设置好案例中数据的字段结构, 尽量清晰明了.
来源: http://www.bubuko.com/infodetail-3507416.html