无忧聊天室（二）

这周实现了聊天室的登录、注册、群聊、以及私聊功能, 并将user信息，聊天记录存储到了本地数据库，以供判断和查询。

无忧聊天室聊天主界面

捋一下大致思路：

1. 注册功能

每一个用户在前端进行注册信息的时候，前端会通过websocket将注册的表单信息传输到后端，然后后端会经过一个判断，查询数据库中是否存在该名称的用户：

如果存在，后端也会通过websocket将错误代号传输给前端，然后前端收到之后会弹出一个警示框，然后清空用户所填的表单信息；

如果后端查询数据库之后不存在，则在数据库中添加一行新的用户信息，然后返回成功的代号，前端收到成功代号之后，给用户返回成功的信息提示。

2. 登录功能

和注册差不多，每一个用户在前端进行登录的时候，前端会通过websocket将登录的表单信息传输到后端，然后后端会经过一个判断，查询数据库中是否存在该名称的用户：

如果用户存在，则再判断输入的密码是否和数据库中存储的密码相同，如果相同，则再判断该用户是否已经在客户端登录，如果没有，则登录成功，如果已经登录，则给用户返回相应的提示信息，如果密码都不一致，则返回给用户相应的提示信息只有，清空密码，让用户重新输入。

如果用户不存在，则给用户提示信息，请注册之后再来吧~

3. 群聊功能

用户登录之后，后端会保存该用户的连接（conn）到后端的map中，一个userName对应一个user结构体，每一个user里面含有conn，这是群发消息的关键；

1. 然后用户从前端页面的输入框中输入聊天消息，点击发送

2. 后端会通过websocket接收到，然后返回后端处理过的消息给前端（这里就是在消息后面多了一个爱心❤，简单模拟了一下功能）

3. 最后后端通过遍历每一个map中的user.conn来给每一个用户发送信息。

4. 私聊功能

如果自己写的聊天室群聊和私聊都在一个界面处理的话，那么会简单很多很多，直接就是群聊功能里的遍历每一个用户变为单一 一个用户就行了，如果想给每一个私聊用户都添加一个界面，像PC端QQ那样，那就得考验一下前端的功底了。

群聊完成的比较快, 一到私聊这, 为了将用户体验感提升到最大，让我冥思苦想、边想边写了整整两天，最后我把群聊和私聊分开写了，群聊消息和私聊消息存在数据库中的位置也不一样

具体思路就是：当我打开一个新页面，点击发送的时候，我给后、端发送了一个状态，其实无论是登录，注册，群发，私发，我都会向后端发送一个状态（type），以表达我想做什么事情，当是私聊的事情时，前端返回的有以下内容（对方的名称，我输入的信息，私聊状态，我的名称），然后后端接收到之后，会做一些处理，然后给前端返回（我的名称，对方的名称，处理过的信息），以对方用户知晓，然后怎么在前端的不同界面显示不同的消息呢，这个时候得需要一个多维数组来存储各个页面的信息了，使用两个v-for，注意：不要使用两个一维数组进行嵌套v-for，否则每一个界面的内容都是一样的！显示信息的时候要遍历这个多维数组，如果姓名相互对应，则在相应的界面添加数组内容，进而就可以显示了。

添加新页面我是用的elementUI里面的组件，然后修改了一下里面的部分代码，

现在私聊方面我还没有完成的是，当我和张三这个页面删除之后，我在打开一下张三的私聊页面，会是一个空页面，没有之前的消息记录，当然这只是课外内容，不是阶段要求的，时间够的话还是可以试试的，毕竟QQ能做到的一些简单功能，给我们一些时间，我们一样可以做出来。

剩余的功能和需要优化的地方（下周完成）

1. 私发自动提醒

2. 数据库的设计优化

3. 用户上线提醒

4. 历史聊天记录的显示

撸起袖子加油干，必须得有一股子钻劲，才能将技术给吃透。

---

埋头向下赶路的同时，也要抬头看看前面的方向。