聊天室：需求分析和原型图学完 WebSocket 之后，我们做个项目来综合练习下。
WebSocket 的项目实战，最容易想到的就是即时通讯（Instant Messaging），也就是聊天室了。
我们每天都在用 QQ、微信，对它们的功能都很熟悉。
我们会实现最精简的版本，包括这些功能：
用户可以注册账号、登录，忘记密码还可以通过邮箱找回。
可以添加删除好友、群聊，查看好友、群聊列表。
聊天支持单聊和群聊，可以发送文字、表情、图片、文件。
可以收藏聊天消息，后续查看。
然后我们来画下原型图：
# 注册
注册的时候要填入用户名、昵称、密码、邮箱，然后通过邮箱验证码验证邮箱的有效性，之后点击注册
# 登录
注册完之后，通过用户名密码登录
# 修改密码
忘记密码的话，可以通过邮箱来重置密码
# 修改信息
登录成功后，可以修改头像、昵称和邮箱：
# 好友
可以添加好友，查看好友列表：
右键可以删除好友。
# 好友
可以添加群聊，查看群聊列表：
右键可以退出群聊。
# 添加好友
点击添加好友时，会有一个弹窗，输入 username 和理由就可以发送好友请求：
# 通知
收到好友请求的时候，可以在通知页面查看请求：
发送请求一方也可以在这里看到发出的请求。
# 聊天
加了好友或者加入群聊之后，就可以开始聊天了：
可以发送文字、表情、图片、文件。
# 收藏
聊天过程中可以收藏聊天消息，包括文字消息、图片消息、文件消息：
可以按照文字、图片、文件等类型来查看。
原型图链接：https://js.design/f/BofSOW?p=2G9mZB5h-B&mode=design&linkelement=1-1084
这节 (opens new window)是全部做完后的效果，你可以先看一下。
# 总结
我们分析了下聊天室的需求，并画了原型图。
首先是账号相关，包括注册、登录、修改密码、修改信息等。
然后可以查看好友列表、添加好友、加入群聊、删除好友、退出群聊。
在通知页面可以看到收到的、发出的好友请求，可以通过好友请求。
聊天页面可以和好友聊天，也可以在群聊里聊天，可以发送文字、表情、图片、文件。
聊天消息可以收藏，之后在收藏页面查看，支持按照消息类型来查看。
实现了这些功能，一个简易聊天室就算完成了。