设计和构建Model的Chat对象,然后会完成聊天滑块的UI工作,让它使用并响应chat对象的API。我们还添加了Avatar功能模块,它也会使用chat对象的API在屏幕上显示在线人员列表。讨论如何使用jQuery来完成数据绑定。最后,加上Data模块,我们就完成了单元应用的客户端部分。
6.1 设计chat对象
chat对象提供即时通信的功能,但需要具体地确定这些功能是什么。
- 提供加入或者离开聊天室的方法
- 提供更换听者的方法
- 提供向其他人发送消息的方法
- 提供通知服务器用户更新了头像的方法。
- 当听者不管是何原因而有变化的时候,发布一个事件。比如,假如听者下线了或者用户选择了新的听者。
- 当不管是何原因而需要更改消息框的时候,发布一个事件。比如,假如用户发送或者接收消息。
- 当不管是何原因而导致在线人员列表发生变化,发布一个事件。比如,假如某人加入或者离开聊天室,或者任意用户移动了头像。
首先采用同步方法:join() get_chatee() set_chatee(<person_id>) send_message(<msg_text>) update_avatar(<update_avatar_map>)
异步方法,事件:spa-listchange spa-setchatee spa-updatechat
给Chat对象的API添加文档:
6.2 构建chat对象
先创建chat对象的join方法:
- 使用spa.model.people.login(<username>)方法进行登入;
- 使用spa.model.chat.join()方法加入聊天室
- 注册一个回调函数,每当model从后端接收到listchange消息时,就发布spa-listchange事件,这表示用户列表发生了变化。
更新Fake以响应chat.join:
- 把已登入的用户列入模拟人员列表中
- 模拟接收来自服务器的listchange消息
给chat对象添加消息传输功能:
- 维护听者的记录
- 发送消息的时候带上元数据信息,比如发送者的ID、发送者的名字以及接受者的ID;
- 优雅地处理用户给离线人员发送消息的潜在情况;
- 当从后端接收到消息时,发布jQuery全局事件,这样jQuery集合就可以订阅这些事件,并按照这些事件调用响应的函数。
更新Fake,模拟消息传输功能:
- 模拟发出的updatechat消息的响应,响应内容是来自当前听者的updatechat消息
- 模拟来自Wilma的未经请求的updattechat消息。
- 模拟发出的leavechat消息的响应。当用户登出的时候,会发送这个消息。可以在这个时候解除聊天消息回调函数的绑定。
测试chat的消息传输功能:
6.3 给Model添加Avatar功能
显示近实时消息传输的其他用途。
给chat对象添加Avatar功能:向后端发送一个updateavatar消息。
修改Fake来模拟头像功能:
- 模拟向服务器发送updateavatar消息
- 模拟从服务器接收listchange消息,携带的数据是更新后的人员列表;
- 执行注册了listchange消息的回调函数,传入的参数是更新后的人员列表。
测试驱动开发(TDD):P194,见附录B
6.4 完成Chat功能模块
UI功能包括:
- 更改聊天滑块的设计,引入人员列表。
- 当用户登入的时候,执行以下操作:加入聊天室、打开聊天滑块、更改聊天滑块的标题以及显示在线人员列表。
- 每当在线人员列表有变化时,就更新列表。
- 高亮在线人员列表中的听者,当列表有变化时,更新显示。
- 授权用户发送消息,从在线人员列表中选择一位听者。
- 显示来自消息记录中用户、其他人员和系统的消息。所有这些消息的颜色都是不同的,消息记录从下往上平滑滚动。
- 修改接口,支持触摸控件。
- 当用户登出的时候,执行以下操作:更改聊天滑块的标题、清除消息记录以及收起滑块。
更新Chat的JavaScript:
模板系统:目前单页应用的工具式模板系统包括Handlebars、Dust和Mustache。
更新样式表:
6.5 创建Avatar功能模块
js/spa.avtr.js
css/spa.avtr.css
6.6 数据绑定和jQuery
数据绑定是一种机制,确保当Model数据发生变化时,界面会更改,以体现Model数据的变化。
6.7 创建Data模块
客户端和服务器之间通信的所有数据都会经过这个模块。