26、聊天应用增强与Ember框架入门指南

聊天应用增强与Ember框架入门指南

一、聊天应用挑战任务

1.1 青铜挑战：消息添加视觉效果

为新消息添加视觉效果，如淡入或滑入效果，可参考 jQuery 的效果文档。需注意仅对真正的新消息应用此效果，避开用户首次登录或刷新浏览器时加载的已有消息。可通过消息的数据属性判断其新旧，若该属性显示消息已存在一两秒以上，则为旧消息。

1.2 白银挑战：消息缓存

在聊天过程中刷新浏览器，消息会消失。可创建一个继承自 Store 的 MessageStore 来缓存聊天消息，确保不重复存储相同消息。页面加载时，聊天应用应从 MessageStore 获取缓存消息。需考虑是否让消息在浏览器标签关闭并重新打开后仍保留，若有此需求，可考虑使用除 sessionStorage 之外的存储方式。

1.3 黄金挑战：独立聊天室

此挑战需同时修改服务器和客户端应用。为用户添加独立的聊天室，用户输入用户名后，提示其输入想使用的聊天室名称。用户登录到某个聊天室后，应仅通过 WebSocket 连接接收该聊天室的消息，可能需要更改服务器上消息的存储方式和向客户端发送消息的方式。还可在客户端 UI 中显示可用聊天室的下拉列表，方便用户切换聊天室，切换时确保能从服务器接收新消息并显示在聊天列表中。

二、MVC 模式与 Ember 框架概述

2.1 MVC 模式介绍

Model - View - Controller (MVC) 是一种非常实用的软件设计模式，在 Web 应用中表现出色，能将应用结构分层构建。各层功能如下：
| 层次 | 功能 |
| ---