学完 WebSocket 之后，我们做个项目来综合练习下。

WebSocket 的项目实战，最容易想到的就是即时通讯（Instant Messaging），也就是聊天室了。

我们每天都在用 QQ、微信，对它们的功能都很熟悉。

我们会实现最精简的版本，包括这些功能：

用户可以注册账号、登录，忘记密码还可以通过邮箱找回。

可以添加删除好友、群聊，查看好友、群聊列表。

聊天支持单聊和群聊，可以发送文字、表情、图片、文件。

可以收藏聊天消息，后续查看。

然后我们来画下原型图：

注册

注册的时候要填入用户名、昵称、密码、邮箱，然后通过邮箱验证码验证邮箱的有效性，之后点击注册

登录

注册完之后，通过用户名密码登录

修改密码

忘记密码的话，可以通过邮箱来重置密码

修改信息

登录成功后，可以修改头像、昵称和邮箱：

好友

可以添加好友，查看好友列表：

右键可以删除好友。

好友

可以添加群聊，查看群聊列表：

右键可以退出群聊。

添加好友

点击添加好友时，会有一个弹窗，输入 username 和理由就可以发送好友请求：

通知

收到好友请求的时候，可以在通知页面查看请求：

发送请求一方也可以在这里看到发出的请求。

聊天

加了好友或者加入群聊之后，就可以开始聊天了：

可以发送文字、表情、图片、文件。

收藏

聊天过程中可以收藏聊天消息，包括文字消息、图片消息、文件消息：

可以按照文字、图片、文件等类型来查看。

原型图链接：https://js.design/f/BofSOW?p=2G9mZB5h-B&mode=design&linkelement=1-1084

这节是全部做完后的效果，你可以先看一下。

总结

我们分析了下聊天室的需求，并画了原型图。

首先是账号相关，包括注册、登录、修改密码、修改信息等。

然后可以查看好友列表、添加好友、加入群聊、删除好友、退出群聊。

在通知页面可以看到收到的、发出的好友请求，可以通过好友请求。

聊天页面可以和好友聊天，也可以在群聊里聊天，可以发送文字、表情、图片、文件。

聊天消息可以收藏，之后在收藏页面查看，支持按照消息类型来查看。

实现了这些功能，一个简易聊天室就算完成了。